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

索趣科技的答案

Feb 07 Javascript

JavaScript学习笔记记录我的旅程

May 23 Javascript

JavaScript NodeTree导航栏(菜单项JSON类型/自制)

Feb 01 Javascript

JSF中confirm弹出框的用法示例介绍

Jan 07 Javascript

jQuery中hover方法和toggle方法使用指南

Feb 27 Javascript

Bootstrap响应式侧边栏改进版

Sep 17 Javascript

node.js的事件机制

Feb 08 Javascript

JavaScript函数表达式详解及实例

May 05 Javascript

详解在express站点中使用ejs模板引擎

Sep 21 Javascript

ES6 更易于继承的类语法的使用

Feb 11 Javascript

JavaScript常用工具函数汇总（浏览器环境）

Sep 17 Javascript

解决vue中使用less/sass及使用中遇到无效的问题

Oct 24 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

PHP5中使用DOM控制XML实现代码

2010/05/07 PHP

PHP读取txt文件的内容并赋值给数组的代码

2011/11/03 PHP

处理单名多值表单的详解

2013/06/08 PHP

解析php中反射的应用

2013/06/18 PHP

PHP使用逆波兰式计算工资的方法

2015/07/29 PHP

laravel框架与其他框架的详细对比

2019/10/23 PHP

javascript下function声明一些小结

2007/12/28 Javascript

jquery form表单序列化为对象的示例代码

2014/03/05 Javascript

做web开发先学JavaScript

2014/12/12 Javascript

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

2014/12/20 Javascript

window.open()实现post传递参数

2015/03/12 Javascript

浅谈javascript中的闭包

2015/05/13 Javascript

jquery实现华丽的可折角广告代码

2015/09/02 Javascript

jQuery使用$.ajax进行异步刷新的方法(附demo下载)

2015/12/04 Javascript

详解jQuery中的事件

2016/12/14 Javascript

微信小程序聊天室简单实现

2017/04/19 Javascript

JavaScript输入框字数实时统计更新

2017/06/17 Javascript

浅谈JS获取元素的N种方法及其动静态讨论

2017/08/25 Javascript

关于vue-router的beforeEach无限循环的问题解决

2017/09/09 Javascript

postman+json+springmvc测试批量添加实例

2018/03/31 Javascript

对angular 实时更新模板视图的方法$apply详解

2018/10/09 Javascript

js中关于Blob对象的介绍与使用

2019/11/29 Javascript

[05:16]《大圣！大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访

2016/12/13 DOTA

浅谈python中的面向对象和类的基本语法

2016/06/13 Python

PyQt5每天必学之进度条效果

2018/04/19 Python

Python SQLAlchemy入门教程(基本用法)

2019/11/11 Python

Python操作Excel把数据分给sheet

2020/05/20 Python

德国机车企业：FC-Moto

2017/10/27 全球购物

北京一家公司的.net开发工程师笔试题

2012/04/17 面试题

超市业务员岗位职责

2013/12/05 职场文书

安全在我心中演讲稿

2014/09/01 职场文书

年会邀请函范文

2015/01/30 职场文书

小学生家长意见

2015/06/03 职场文书

证婚人婚礼致辞

2015/07/28 职场文书

中学校园广播稿

2015/08/18 职场文书

争做文明公民倡议书

2019/06/24 职场文书