炫酷实用的jQuery插件涵盖菜单、按钮、图片

桃扇骨 2022-08-06 17:23 143阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:757px; color:rgb(68,68,68); font-family:微软雅黑,Tahoma,Helvetica,SimSun,sans-serif; font-size:12px; line-height:18px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="word-wrap:break-word; font-size:14px"> 新的一周开始了，今天我们要为大家分享一些全新的jQuery插件和<a href="http://www.html5cn.org/" style="word-wrap:break-word; color:rgb(51,102,153); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">HTML5</a>/<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=16" style="word-wrap:break-word; color:rgb(51,102,153); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">CSS3</a><a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=20" style="word-wrap:break-word; color:rgb(51,102,153); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">应用</a>，这些jQuery插件不仅非常炫酷，而且还挺实用，这次的分享包含jQuery菜单、CSS3按钮已经多种图片特效，一起来看看吧。 1、CSS3书本翻页动画 书本翻页效果逼真 今天我们要分享一款炫酷而且实用的CSS3动画效果，它是模拟书本翻页的动画特效。当鼠标滑过书本右上角时，书本即可向前翻一页，而且翻页动画非常逼真。由于CSS3的运用，我们并不需要使用复杂的图片来制造逼真的书本效果，书本翻页可以很简单地完成。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/21/094404cpnxccc32yf65drp.jpg" width="588" alt="css3-page-flip.jpg" title="css3-page-flip.jpg" style="word-wrap:break-word">&nbsp; <a href="http://www.html5tricks.com/demo/css3-page-flip/index.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">在线演示</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<a href="http://www.html5tricks.com/css3-page-flip.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">源码下载</a> 2、纯CSS3黑色气泡背景动画菜单 今天我们要来分享一款非常酷的CSS3动画菜单，这款CSS3菜单有一个很漂亮的黑色气泡背景，菜单是银白色的，和黑色的背景交织在一起更加显得有3D立体的视觉效果。CSS3的运用让菜单有圆角的效果，鼠标滑过菜单时也会改变背景。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/21/094403bc72r0b0c3jobb18.jpg" width="588" alt="css3-3d-pagination.jpg" title="css3-3d-pagination.jpg" style="word-wrap:break-word">&nbsp; <a href="http://www.html5tricks.com/demo/pure-css3-animated-menu/index.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">在线演示</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<a href="http://www.html5tricks.com/pure-css3-animated-menu.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">源码下载</a> 3、jQuery/CSS3飘带式下拉菜单 今天我们再来介绍一款jQuery下拉菜单，这款jQuery下拉菜单应用了一些CSS3相关的属性，但并不复杂，也没有绚丽的动画，但是非常实用。这款jQuery菜单的另一个特点是菜单整体呈飘带状，样式非常新颖。鼠标滑过菜单项时即可展开下拉菜单。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/21/094405pac4bcrdk8ivicpk.jpg" width="588" alt="jquery-css3-ribbon-menu.jpg" title="jquery-css3-ribbon-menu.jpg" style="word-wrap:break-word">&nbsp; <a href="http://www.html5tricks.com/demo/jquery-css3-ribbon-menu/index.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">在线演示</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<a href="http://www.html5tricks.com/jquery-css3-ribbon-menu.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">源码下载</a> 4、纯CSS3实现分享按钮 包含常用社交网站按钮 之前我们有介绍过不少非常实用的分享按钮，有基于HTML5和CSS3的，也有基于jQuery和CSS的，效果都非常不错。今天我们再来分享一款纯CSS3实现的社会化分享按钮，这款纯CSS3分享按钮没有使用图片，而且包含了基本的常用社交网站的分享按钮。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/21/0944057csh2msr5d1zr7m7.jpg" width="588" alt="pure-css3-social-buttons.jpg" title="pure-css3-social-buttons.jpg" style="word-wrap:break-word">&nbsp; <a href="http://www.html5tricks.com/demo/pure-css3-social-buttons/index.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">在线演示</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<a href="http://www.html5tricks.com/pure-css3-social-buttons.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">源码下载</a> 5、CSS3 3D 分页导航按钮 这是一款用 CSS3 实现的 3D 分页导航按钮，和之前分享的一些jQuery分页插件一样，这款CSS3 3D分页插件同样具有前和分页页码和数字页面，不同的是，这款分页插件的分页页码是一个个3D的导航按钮，样式十分新颖，不过需要CSS3支持。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/21/094405ivpem1vze1pdzjep.jpg" width="588" alt="pure-css3-animated-menu.jpg" title="pure-css3-animated-menu.jpg" style="word-wrap:break-word">&nbsp; <a href="http://www.html5tricks.com/demo/css3-3d-pagination/index.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">在线演示</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<a href="http://www.html5tricks.com/css3-3d-pagination.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">源码下载</a> 6、CSS3动画相册 图片淡入淡出动画效果 这是一款基于CSS3的动画相册，这样的相册我们之前也分享过不少，比如HTML5 3D立体图片相册。非常的华丽。今天的这款CSS3相册相对比较实用，当鼠标划过缩略图时，原图片即会以淡入淡出的动画效果展现出来，大家可以将它应用在自己的网站上。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/21/0944042eeujrroh3e0284e.jpg" width="588" alt="css3-animated-gallery.jpg" title="css3-animated-gallery.jpg" style="word-wrap:break-word">&nbsp; <a href="http://www.html5tricks.com/demo/css3-animated-gallery/index.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">在线演示</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<a href="http://www.html5tricks.com/css3-animated-gallery.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">源码下载</a> 7、仿QQ空间相册图片浏览jQuery插件 今天我们要来分享一款基于jQuery的相册图片浏览插件，它是一款仿QQ空间的相册浏览组件，点击缩略图即可弹出图片浏览窗口，这款jQuery相册图片浏览插件的特点是：1、支持左右键来切换图片；2、支持ESC键退出相册浏览模式；3、可传入自定义的文本描述。缺点是没有应用任何动画，使图片浏览的体验性不是很高，不过你可以通过利用jQuery动画或者CSS3来实现。 <img src="http://bbs.html5cn.org/data/attachment/forum/201407/21/094406mxvxdx7mtv44axvv.jpg" width="588" alt="qzone-jquery-gallery.jpg" title="qzone-jquery-gallery.jpg" style="word-wrap:break-word">&nbsp; <a href="http://www.html5tricks.com/demo/jiaoben2512/index.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">在线演示</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<a href="http://www.html5tricks.com/qzone-jquery-gallery.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">源码下载</a> 以上分享的几个jQuery插件还不错吧，欢迎收藏和分享。 本文链接：<a href="http://www.html5tricks.com/cool-jquery-menu-icon-image.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">http://www.html5tricks.com/cool-jquery-menu-icon-image.html</a></td> 
 </tr> 
 </tbody> 
</table>