jquery马赛克拼接翻转效果代码分享
2015-08-24 14:19
1061 查看
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="//www.jb51.net" target="_blank">tuttoaster</a> 代码整理:<a href="//www.jb51.net" target="_blank">脚本之家</a> 感谢:<a href="//www.jb51.net" target="_blank">fanz</a></p> <p>转载请注明出处,此代码仅供学习交流,请勿用于商业用途。</p> </div> </body> </html>
以上就是为大家分享的jquery马赛克拼接翻转效果代码,希望大家可以喜欢。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结
- 23个超流行的jQuery相册插件整理分享