编程 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 获取url参数和script标签中获取url参数函数代码

Jan 22 Javascript

JS模拟面向对象全解（二、类型与赋值）

Jul 13 Javascript

JQuery自动触发事件的方法

Jun 13 Javascript

13个PHP函数超实用

Oct 21 Javascript

关于cookie的初识和运用(js和jq)

Apr 07 Javascript

JavaScript cookie 跨域访问之广告推广

Apr 20 Javascript

JavaScript DOM 对象深入了解

Jul 20 Javascript

jQuery窗口拖动功能的实现代码

Feb 04 Javascript

BootStrap select2 动态改变值的方法

Feb 10 Javascript

详解微信小程序框架wepy踩坑记录（与vue对比）

Mar 12 Javascript

微信小程序之下拉列表实现方法解析（附完整源码）

Aug 23 Javascript

Vue + ts实现轮播插件的示例

Nov 10 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验证码(支持中文)

2007/02/14 PHP

php分割合并两个字符串的函数实例

2015/06/19 PHP

Yii+upload实现AJAX上传图片的方法

2016/07/13 PHP

php微信开发之百度天气预报

2016/11/18 PHP

获取Javscript执行函数名称的方法

2006/12/22 Javascript

比较详细的javascript对象的property和prototype是什么一种关系

2007/08/06 Javascript

JS 毫秒转时间示例代码

2013/09/22 Javascript

js获取select默认选中的Option并不是当前选中值

2014/05/07 Javascript

JavaScript中常见获取元素的方法汇总

2015/03/04 Javascript

Bootstrap实现登录校验表单(带验证码)

2016/06/23 Javascript

js实现获取鼠标当前的位置

2016/12/14 Javascript

jquery实现静态搜索功能(可输入搜索文字)

2017/03/28 jQuery

angular2中router路由跳转navigate的使用与刷新页面问题详解

2017/05/07 Javascript

详解angularJs中关于ng-class的三种使用方式说明

2017/06/02 Javascript

Vue 兄弟组件通信的方法（不使用Vuex）

2017/10/26 Javascript

vue-prop父组件向子组件进行传值的方法

2018/03/01 Javascript

vue图片上传本地预览组件使用详解

2019/02/20 Javascript

微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

2019/12/17 Javascript

使用React-Router实现前端路由鉴权的示例代码

2020/07/26 Javascript

vue实现给div绑定keyup的enter事件

2020/07/31 Javascript

wxPython窗口中文乱码解决方法

2014/10/11 Python

利用python生成一个导出数据库的bat脚本文件的方法

2016/12/30 Python

django上传图片并生成缩略图方法示例

2017/12/11 Python

python切片及sys.argv[]用法详解

2018/05/25 Python

基于python实现简单日历

2018/07/28 Python

python实现RabbitMQ的消息队列的示例代码

2018/11/08 Python

Python递归函数二分查找算法实现解析

2019/08/12 Python

Python转换字典成为对象,可以用"."方式访问对象属性实例

2020/05/11 Python

CSS3实现银灰色动画效果的导航菜单代码

2015/09/01 HTML / CSS

解释DataSet(ds) 和 ds as DataSet 的含义

2014/07/27 面试题

营销总经理岗位职责

2014/02/02 职场文书

护理专业毕业生自我鉴定总结

2014/03/24 职场文书

职务聘任书范文

2014/03/29 职场文书

离婚被告答辩状

2015/05/22 职场文书

认识实习感想

2015/08/10 职场文书

Java中多线程下载图片并压缩能提高效率吗

2021/07/01 Java/Android