编程 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 相关文章推荐

30个经典的jQuery代码开发技巧

Dec 15 Javascript

jQuery中DOM操作实例分析

Jan 23 Javascript

JQuery.dataTables表格插件添加跳转到指定页

Jun 09 jQuery

jQuery EasyUI 选项卡面板tabs的使用实例讲解

Dec 25 jQuery

基于vue-cli配置lib-flexible + rem实现移动端自适应

Dec 26 Javascript

html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】

Sep 10 jQuery

js 判断当前时间是否处于某个一个时间段内

Sep 19 Javascript

vue 中几种传值方法(3种)

Nov 12 Javascript

JavaScript中的全局属性与方法深入解析

Jun 14 Javascript

vue键盘事件点击事件加native操作

Jul 27 Javascript

vue接口请求加密实例

Aug 11 Javascript

Vue绑定用户接口实现代码示例

Nov 04 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中mysql模块部分功能的简单封装

2011/09/30 PHP

php UBB 解析实现代码

2011/11/27 PHP

ThinkPHP使用心得分享-分页类Page的用法

2014/05/15 PHP

php把数组值转换成键的方法

2015/07/13 PHP

PHP获取当前执行php文件名的代码

2017/03/02 PHP

Yii2语言国际化自动配置详解

2018/08/22 PHP

利用json获取字符出现次数的代码

2012/03/22 Javascript

关于jQuery中.attr()和.prop()的问题探讨

2013/09/06 Javascript

jQuery中innerWidth()方法用法实例

2015/01/19 Javascript

javascript类型系统 Array对象学习笔记

2016/01/09 Javascript

深入浅析AngularJS和DataModel

2016/02/16 Javascript

JQuery日期插件datepicker的使用方法

2016/03/03 Javascript

select隐藏选中值对应的id,显示其它id的简单实现方法

2016/08/25 Javascript

JavaScript实现公历转农历功能示例

2017/02/13 Javascript

jQuery为某个div加入行样式

2017/06/09 jQuery

Vue组件中slot的用法

2018/01/30 Javascript

详解vue中axios的封装

2018/07/18 Javascript

使用jquery Ajax实现上传附件功能

2018/10/23 jQuery

Vue项目中使用jquery的简单方法

2019/05/16 jQuery

Vue中消息横向滚动时setInterval清不掉的问题及解决方法

2019/08/23 Javascript

微信小程序转化为uni-app项目的方法示例

2020/05/22 Javascript

解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

2020/07/21 Javascript

小程序实现录音功能

2020/09/22 Javascript

[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾

2016/06/28 DOTA

python解析发往本机的数据包示例 (解析数据包)

2014/01/16 Python

python 实时得到cpu和内存的使用情况方法

2018/06/11 Python

Python实现全排列的打印

2018/08/18 Python

python中的反斜杠问题深入讲解

2019/08/12 Python

python isinstance函数用法详解

2020/02/13 Python

医科大学生的自我评价

2013/12/04 职场文书

乡党政领导班子群众路线教育实践活动个人对照检查材料

2014/09/20 职场文书

525心理健康活动总结

2015/05/08 职场文书

东京审判观后感

2015/06/01 职场文书

SpringBoot工程下使用OpenFeign的坑及解决

2021/07/02 Java/Android

SqlServer数据库远程连接案例教程

2021/07/15 SQL Server

springcloud整合seata

2022/05/20 Java/Android