编程 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 JavaScript获取Url参数，src属性参数

Mar 09 Javascript

JSON.parse 解析字符串出错的解决方法

Jul 08 Javascript

使用Js让Html中特殊字符不被转义

Nov 05 Javascript

让input框实现类似百度的搜索提示(基于jquery事件监听)

Jan 31 Javascript

Javascript aop(面向切面编程)之around(环绕)分析

May 01 Javascript

老生常谈JavaScript数组的用法

Jun 10 Javascript

JavaScript函数节流概念与用法实例详解

Jun 20 Javascript

解决给dom元素绑定click等事件无效问题的方法

Feb 17 Javascript

Vue resource中的GET与POST请求的实例代码

Jul 21 Javascript

vue-cli项目无法用本机IP访问的解决方法

Sep 20 Javascript

layui实现根据table数据判断按钮显示情况的方法

Sep 26 Javascript

JS简单表单验证功能完整示例

Jan 26 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下关于Cannot use a scalar value as an array的解决办法

2010/08/08 PHP

php下使用iconv需要注意的问题

2010/11/20 PHP

php获取服务器端mac和客户端mac的地址支持WIN/LINUX

2014/05/15 PHP

JavaScript严格模式禁用With语句的原因

2014/10/20 Javascript

轻松创建nodejs服务器（2）：nodejs服务器的构成分析

2014/12/18 NodeJs

js实现简单随机抽奖的方法

2015/01/27 Javascript

angularJS结合canvas画图例子

2015/02/09 Javascript

使用console进行性能测试

2015/04/27 Javascript

Window.Open打开窗体和if嵌套代码

2016/04/15 Javascript

JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

2016/06/17 Javascript

js中window.open的参数及注意注意事项

2016/07/06 Javascript

基于JavaScript实现添加到购物车效果附源码下载

2016/08/22 Javascript

JS表格组件BootstrapTable行内编辑解决方案x-editable

2016/09/01 Javascript

jQuery可见性过滤选择器用法示例

2016/09/09 Javascript

Node.js 中exports 和 module.exports 的区别

2017/03/14 Javascript

angularjs实现猜数字大小功能

2020/05/20 Javascript

使用axios实现上传图片进度条功能

2017/12/21 Javascript

jQuery基于Ajax实现读取XML数据功能示例

2018/05/31 jQuery

微信小程序使用component自定义toast弹窗效果

2018/11/27 Javascript

vue的.vue文件是怎么run起来的(vue-loader)

2018/12/10 Javascript

vue-router路由懒加载及实现的3种方式

2021/02/28 Vue.js

Python getopt模块处理命令行选项实例

2014/05/13 Python

python连接MySQL数据库实例分析

2015/05/12 Python

详解Python中的序列化与反序列化的使用

2015/06/30 Python

Python中的异常处理try/except/finally/raise用法分析

2019/02/28 Python

Django模板语言 Tags使用详解

2019/09/09 Python

Python远程方法调用实现过程解析

2020/07/28 Python

使用HTML5 Canvas API中的clip()方法裁剪区域图像

2016/03/25 HTML / CSS

Booking.com英国官网：全球酒店在线预订网站

2018/04/21 全球购物

中医专业职业生涯规划书范文

2014/01/04 职场文书

大班亲子运动会方案

2014/06/10 职场文书

项目委托协议书（最新）

2014/09/13 职场文书

教师党员批评与自我批评

2014/10/15 职场文书

2015年三万活动总结

2015/03/25 职场文书

机修车间主任岗位职责

2015/04/08 职场文书

MySQL 1130异常,无法远程登录解决方案详解

2021/08/23 MySQL