编程 Javascript

jquery马赛克拼接翻转效果代码分享

Posted in Javascript onAugust 24, 2015

jquery实现的非常漂亮的图片马赛克翻转效果，经测试图片切换过程非常酷，整个图片分成一个一个的小方格进行翻转变换，感兴趣的朋友快来学习学习吧
运行效果图：----------------------查看效果下载源码-----------------------

jquery马赛克拼接翻转效果代码分享

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery马赛克拼接翻转效果代码如下

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,电视墙,图片翻转,图片切换,马赛克,jQuery特效" />
<meta name="description" content="jquery实现的非常漂亮的图片马赛克翻转效果，更多电视墙,图片翻转,图片切换,马赛克,jQuery特效请访问三水点靠木JS代码频道。" />
<title>jquery实现的非常漂亮的图片马赛克翻转效果_三水点靠木</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jMask.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js" ></script>
<script type="text/javascript" src="js/GeosansLight_500.font.js" ></script>
<script type="text/javascript" src="js/raphael-min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>


<!-- End of Scripts Block -->

<!-- Importing javascript files to be used in the page -->



<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/jMask.css" type="text/css" />

<!-- End of Declaration -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coming Soon Page</title>
</head>

<body>

<div id="container">

<div id="outerblock">
<div id="innerblock">


<div id="slideshow">
<div>
<ul>
<li><img src="img/im4.jpg" />

<h1 class="title">Image Title 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate neque id diam adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. 

</p>

</li>
<li><img src="img/im3.jpg" />
<h1 class="title">Image Title 2</h1>
<p>
Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. 

</p>

</li>
<li><img src="img/im2.jpg" />

<h1 class="title">Image Title 3</h1>
<p>
image 3 ,Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. 

</p>

</li>
<li><img src="img/im1.jpg" />
<h1 class="title">Image Title 4</h1>
<p>
image 4 ,Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. 

</p>
</li>

</ul>
</div>
</div>
<span id="ribbon-left"></span>


</div>



<div id="frame">
</div>



</div>
<img src="css/i/shadow.png" class="grid_10" id="shadow" />
</div>

<div style="text-align:center;clear:both">
<p>来源：<a href="https://3water.com" target="_blank">tuttoaster</a>　代码整理：<a href="https://3water.com" target="_blank">三水点靠木</a>　感谢：<a href="https://3water.com" target="_blank">fanz</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>

以上就是为大家分享的jquery马赛克拼接翻转效果代码，希望大家可以喜欢。

jquery马赛克拼接翻转效果代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript编写的第一人称射击游戏

Feb 25 Javascript

javascript showModalDialog模态对话框使用说明

Dec 31 Javascript

Microsoft Ajax Minifier 压缩javascript的方法

Mar 05 Javascript

js中一个函数获取另一个函数返回值问题探讨

Nov 21 Javascript

Array 重排序方法和操作方法的简单实例

Jan 24 Javascript

js实现点击图片改变页面背景图的方法

Feb 28 Javascript

手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

Aug 25 Javascript

vue 数组和对象不能直接赋值情况和解决方法(推荐)

Oct 25 Javascript

Vue中使用webpack别名的方法实例详解

Jun 19 Javascript

JavaScript中的一些实用小技巧总结

Apr 07 Javascript

angular异步验证防抖踩坑实录

Dec 01 Javascript

mpvue 项目初始化及实现授权登录的实现方法

Jul 20 Javascript

jquery+CSS实现的水平布局多级网页菜单效果

Aug 24 #Javascript

jQuery实现的背景动态变化导航菜单效果

Aug 24 #Javascript

jquery带下拉菜单和焦点图代码分享

Aug 24 #Javascript

javascript中SetInterval与setTimeout的定时器用法

Aug 24 #Javascript

jQuery仿360导航页图标拖动排序效果代码分享

Aug 24 #Javascript

js实现的黑背景灰色二级导航菜单效果代码

Aug 24 #Javascript

jQuery实现的类似淘宝网站搜索框样式代码分享

Aug 24 #Javascript

You might like

php中关于长度计算容易混淆的问题分析

2016/05/27 PHP

用cssText批量修改样式

2009/08/29 Javascript

仿新浪微博返回顶部的jquery实现代码

2012/10/01 Javascript

当鼠标移动到图片上时跟随鼠标显示放大的图片效果

2013/06/06 Javascript

自动设置iframe大小的jQuery代码

2013/09/11 Javascript

setInterval()和setTimeout()的用法和区别示例介绍

2013/11/17 Javascript

jquery easyui 结合jsp简单展现table数据示例

2014/04/18 Javascript

基于 Docker 开发 NodeJS 应用

2014/07/30 NodeJs

jquery实现的蓝色二级导航条效果代码

2015/08/24 Javascript

安装使用Mongoose配合Node.js操作MongoDB的基础教程

2016/03/01 Javascript

JavaScript模拟push

2016/03/06 Javascript

JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】

2016/09/04 Javascript

Node.js中用D3.js的方法示例

2017/01/16 Javascript

微信小程序使用progress组件实现显示进度功能【附源码下载】

2017/12/12 Javascript

nodeJS模块简单用法示例

2018/04/21 NodeJs

JS实现移动端触屏拖拽功能

2018/07/31 Javascript

详解小程序输入框闪烁及重影BUG解决方案

2018/08/31 Javascript

Vue filter 过滤当前时间实现实时更新效果

2019/12/20 Javascript

使用element-ui +Vue 解决 table 里包含表单验证的问题

2020/07/17 Javascript

Vue 中使用lodash对事件进行防抖和节流操作

2020/07/26 Javascript

Python入门之后再看点什么好?

2018/03/05 Python

Python smtplib实现发送邮件功能

2018/05/22 Python

python语言元素知识点详解

2019/05/15 Python

使用TensorFlow实现简单线性回归模型

2019/07/19 Python

200行python代码实现贪吃蛇游戏

2020/04/24 Python

python实现图像随机裁剪的示例代码

2020/12/10 Python

python 录制系统声音的示例

2020/12/21 Python

htnl5利用svg页面高斯模糊的方法

2018/07/20 HTML / CSS

玖熙女鞋美国官网：Nine West

2016/10/06 全球购物

美国领先的宠物用品和宠物食品零售商：Petco

2020/10/28 全球购物

大学生毕业的自我评价分享

2014/01/02 职场文书

中专生自我鉴定范文

2014/02/02 职场文书

文科生自我鉴定

2014/02/15 职场文书

教研处工作方案

2014/05/26 职场文书

《我和小伙伴》教学反思

2016/02/20 职场文书

导游词之安徽巢湖

2019/12/26 职场文书