10款基于jQuery实现的鼠标悬停九宫格图片延伸效果

<p><b>1.jQuery多张图片上下叠加切换插件</b></p>
<p>之前我们已经向大家分享过一款jQuery/CSS3洗牌效果的图片叠加切换应用，本文介绍的这款jQuery多张图片上下叠加切换插件也类似，我们可以将预先加载好的图片按不同的角度叠加起来，点击上下切换按钮时即可将图片上下切换至其他图片后面，效果非常不错。</p>
<p><img src="http://www.html5tricks.com/wp-content/uploads/2014/12/jquery-mult-image-switch.png" /></p>
<p><a href="http://www.html5tricks.com/demo/jquery-mult-image-switch/index.html" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>2.jQuery带Tooltip表单验证的注册表单</b></p>
<p>这是一款基于jQuery的注册表单，这款注册表单的特点是确认提交注册信息时，表单会自动验证所填写的信息，如果信息填写有误，即会在相应的字段内以Tooltip提示框的形式显示错误信息。这款jQuery表单实现非常简单，使用起来相对比较轻巧。</p>
<p><img src="http://www.html5tricks.com/wp-content/uploads/2014/12/jquery-tooltip-reg-form.png" /></p>
<p><a href="http://www.html5tricks.com/demo/jquery-tooltip-reg-form/index.html" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>3.L20n – Mozilla 推出的 Web 本地化框架</b></p>
<p>L20n是 Mozilla 开发的用于 Web 开发的本地化框架。它允许本地化开发者把逻辑细分为本地化的资源。 L20n 的框架不再需要开发人员深入理解自然语言的具体细节，并提供了机会为本地化创造更好的翻译。L20n 重塑软件本地化，用户应该能够从自然语言的整个表现力中受益。</p>
<p><img src="http://images.cnitblog.com/blog/36987/201411/302119541842389.jpg" /></p>
<p><a href="http://l20n.org/" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>4.使用 CSS3 & jQuery 制作漂亮的书签动画</b></p>
<p>今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果。我们的想法是展现出样书状结构，使单一的色板或列表点击切换。当点击其中一项，我们就会旋转以显示所选择的项目。</p>
<p><img src="http://images.cnitblog.com/blog/36987/201312/07222352-60e27a46aed14cf4bc047ccca16880d7.jpg" /></p>
<p><a href="http://www.yyyweb.com/demo/inner-show/swatch-book.html" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>5.jquery实现的点击弹出遮罩背景并且可以拖动关闭的弹出层</b></p>
<p>jquery实现的点击弹出遮罩背景并且可以拖动关闭的弹出层特效代码，是一段点击按钮即弹出一个遮罩层的效果代码，该实例中出现的遮罩背景弹出层拥有拖动和关闭效果，此段代码适应于所有想要的网页的使用，有兴趣的朋友们可以前来下载使用。</p>
<p><img src="http://files.jb51.net/do/uploads/litimg/141225/164AH34K5.jpg" /></p>
<p><a href="http://demo.jb51.net/js/2014/jquery-zzbj-tdgbtcc/" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>6.HTML5实现的由绚丽的颗粒组成的动态幻灯片</b></p>
<p>HTML5实现的由绚丽的颗粒组成的动态幻灯片特效源码，是一段实现了利用不同颜色的相同大小的圆形组成的浮动图像效果，当鼠标悬浮在组成的图形上时，距离相近的圆形会被截止或打乱，组成图像的各个圆形，会不定时自动缩放，图像本身给人一种在水面上浮动的错觉，本段代码适用于所有网页使用，有需要的朋友们可以前来下载使用。</p>
<p><img src="http://files.jb51.net/do/uploads/litimg/141225/163935231430.jpg" /></p>
<p><a href="http://demo.jb51.net/js/2014/HTML5-keli-dthdp/" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>7.html5+css3实现的3D书本展示效果</b></p>
<p>html5+css3实现的3D书本展示效果源码，是一段实现了3D动画效果的图书展示平台效果代码，此段代码共实现了两种书籍展示效果，一种是平铺显示书籍相关信息的效果，另外一种是以将书籍放在书架上的形式展示出来的效果，有需要的朋友们可以二选一使用。</p>
<p><img src="http://files.jb51.net/do/uploads/litimg/141225/162943231156.jpg" /></p>
<p><a href="http://demo.jb51.net/js/2014/html5+css3-3dsbzd/" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>8.基于jQuery实现的鼠标悬停九宫格图片延伸效果</b></p>
<p>jQuery鼠标悬停九宫格图片延伸效果是一款鼠标悬停在任意一个宫格内，分别上下左右四个方向延伸出四个图片，且当前宫格内显示半透明链接效果。</p>
<p><img src="http://files.jb51.net/do/uploads/litimg/141225/151646252E6.jpg" /></p>
<p><a href="http://demo.jb51.net/js/2014/jquery-jgg-sbxt-tpys/" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>9.纯css3实现的网页加载后图片翻转效果</b></p>
<p>css3网页加载后图片翻转效果代码是一款很简单，但是效果很好的图片翻转效果。</p>
<p><img src="http://files.jb51.net/do/uploads/litimg/141225/151110254947.jpg" /></p>
<p><a href="http://demo.jb51.net/js/2014/css3-wyjz-tpfz/" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p><b>10.基于jQuery实现的鼠标悬停时向上滑出遮罩效果</b></p>
<p>jQuery鼠标悬停向上滑出遮罩效果是一款多个图片列表排列后，鼠标悬停在其中一个图片上后，显示标题以及图片文字介绍效果。</p>
<p><img src="http://files.jb51.net/do/uploads/litimg/141225/15064125E45.jpg" /></p>
<p><a href="http://demo.jb51.net/js/2014/jquery-shbxt-xshczz/" target="_blank">在线演示</a></p>
<p><a href="http://www.i7758.com/archives/976.html" target="_blank">源码下载</a></p>
<p>&gt;&gt; 本文固定链接: <a href="http://www.i7758.com/archives/976.html" rel="bookmark" title="10款基于jQuery实现的鼠标悬停九宫格图片延伸效果">http://www.i7758.com/archives/976.html</a></p>