插件描述：今天我要给大家介绍的是一款基于jquery和css3的鼠标覆盖图片插件-3D THUMBNAIL HOVER EFFECTS。当我们的鼠标移动到图片上时就会出现看上去有点像纸张的褶皱的效果，该插件一共有四种效果可供我们选择。
今天我要给大家介绍的是一款基于jquery和css3的鼠标覆盖图片插件-3D THUMBNAIL HOVER EFFECTS。当我们的鼠标移动到图片上时就会出现看上去有点像纸张的褶皱的效果，该插件一共有四种效果可供我们选择。
预览图
width="474" height="300" title="3D鼠标覆盖" alt="3D鼠标覆盖"/>
width="474" height="300" title="3D鼠标覆盖" alt="3D鼠标覆盖"/>
width="474" height="300" title="3D鼠标覆盖" alt="3D鼠标覆盖"/>
width="474" height="300" title="3D鼠标覆盖" alt="3D鼠标覆盖"/>
使用步骤
1、引入以下的js和css文件，我们有5种效果，要想切换到某个效果就引用相应的css文件，这里我们引用的是 css/style1.css 样式文件，就表示我们要实现的是第一种效果。
1 2 3 4 | <link rel="stylesheet" type="text/css" href="css/demo.css"><link rel="stylesheet" type="text/css" href="css/style_common.css"><link rel="stylesheet" type="text/css" href="css/style1.css"><script type="text/javascript" src="js/modernizr.custom.69142.js"></script> |
2、在head标签中加入以下js代码
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> Modernizr.load({ test: Modernizr.csstransforms3d && Modernizr.csstransitions, yep : ['/','js/jquery.hoverfold.js'], nope: 'css/fallback.css', callback : function( url, result, key ) { if( url === 'js/jquery.hoverfold.js' ) { $( '#grid' ).hoverfold(); } }}); </script> |
3、在body标签中加入以下格式的html代码,外围容器的ID是 grid。里面可以放置多张图片
1 2 3 4 5 6 7 | <div id="grid" class="main"> //图片1 //图片2 <div> </div></div> |
每张图片的代码格式为：外围容器样式为 view。里面包含了图片和图片介绍，图片介绍的样式为 view-back。
1 2 3 4 5 6 | <div class="view"> <div class="view-back"> </div><img src="images/1.jpg"></div> |
效果切换
上面我已经讲过了，喜欢哪种效果就引用相应额css文件即可。在示例中的css文件夹下有5个决定效果的css文件，选择指定的引入即可。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： JQUERY短网址生成插件-JLY1
- 下一个特效： 好看的滑动显示插件-LATERAL ON-SCROLL SLIDING