首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
调用js时ie6和ie7，ff的区别
Aug 19 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
Redux 和 Mobx的选择问题：让你不再困惑！
Sep 18 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
详解javascript函数写法大全
Mar 25 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
音频(1) mp3Play(1) GUI(2) 数组(5) 数据处理(2) 矩阵(1) 数据保存(1) agg(1) pandas(7) apply(1)
You might like
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
javascript复制对象使用说明
2011/06/28 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
详解vuex的简单使用
2018/03/12 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python中的多重装饰器
2015/04/11 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
深入理解Python中的super()方法
2017/11/20 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
python接口自动化框架实战
2020/12/23 Python
高级护理专业大学生求职信
2013/10/24 职场文书
中式婚礼主持词
2014/03/13 职场文书
拆迁委托协议书
2014/09/15 职场文书
学校2014年度工作总结
2014/12/06 职场文书
工作态度怎么写
2015/06/25 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android