编程 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跨页面保存变量做菜单的方法

Jan 17 Javascript

JQery 渐变图片导航效果代码漂亮

Jan 01 Javascript

js 利用className得到对象的实现代码

Nov 15 Javascript

实测jquery data()如何存值

Aug 18 Javascript

jtable列中自定义button示例代码

Nov 21 Javascript

javascript自定义函数参数传递为字符串格式

Jul 29 Javascript

使用javascript获取页面名称

Dec 23 Javascript

AngularJS自动表单验证

Feb 01 Javascript

Jquery Easyui验证组件ValidateBox使用详解（20）

Dec 18 Javascript

js获取指定时间的前几秒

Apr 05 Javascript

angularjs 动态从后台获取下拉框的值方法

Aug 13 Javascript

JavaScript动态创建二维数组的方法示例

Feb 01 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 print EOF实现方法

2009/05/21 PHP

PHP可变变量学习小结

2015/11/29 PHP

PHP数组相加操作及与array_merge的区别浅析

2016/11/26 PHP

php实时倒计时功能实现方法详解

2017/02/27 PHP

PHP实现权限管理功能示例

2017/09/22 PHP

实例讲解php将字符串输出到HTML

2019/01/27 PHP

Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法

2019/04/02 PHP

Javascript 两个窗体之间传值实现代码

2009/09/25 Javascript

javascript 获取元素位置的快速方法 getBoundingClientRect()

2009/11/26 Javascript

javascript 处理事件绑定的一些兼容写法

2009/12/24 Javascript

基于jQuery的星级评分插件

2011/08/12 Javascript

js性能优化如何更快速加载你的JavaScript页面

2012/03/17 Javascript

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

2013/12/11 Javascript

js触发onchange事件的方法说明

2014/03/08 Javascript

深入学习JavaScript中的Rest参数和参数默认值

2015/07/28 Javascript

jQuery轻松实现表格的隔行变色和点击行变色的实例代码

2016/05/09 Javascript

JavaScript中点击事件的写法

2016/06/28 Javascript

Bootstrap模态框插件使用详解

2017/05/11 Javascript

最简单的JS实现json转csv的方法

2019/01/10 Javascript

webpack自动打包和热更新的实现方法

2019/06/24 Javascript

python中lambda与def用法对比实例分析

2015/04/30 Python

在Django的上下文中设置变量的方法

2015/07/20 Python

Django 迁移、操作数据库的方法

2019/08/02 Python

Python+Tensorflow+CNN实现车牌识别的示例代码

2019/10/11 Python

python爬取本站电子书信息并入库的实现代码

2020/01/20 Python

python中turtle库的简单使用教程

2020/11/11 Python

CSS实现限制字数功能当对象内文本溢出时显示省略标记

2014/08/20 HTML / CSS

HTML5页面中尝试调起APP功能

2017/09/12 HTML / CSS

Tostadora意大利：定制T恤

2019/04/08 全球购物

企业为何需要商业计划书

2013/12/26 职场文书

新郎新娘婚礼答谢词

2014/01/11 职场文书

英语感恩演讲稿

2014/01/14 职场文书

2015个人简历自我评价语

2015/03/11 职场文书

2015年感恩节演讲稿（优选篇）

2015/03/20 职场文书

基于PyTorch实现一个简单的CNN图像分类器

2021/05/29 Python

python必学知识之文件操作（建议收藏）

2021/05/30 Python