js实现产品缩略图效果
2017-03-10 11:25
633 查看
代码如下:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <script> $(function(){ $("img.smallImage").mouseenter(function(){ var bigImageURL = $(this).attr("bigImageURL"); $("img.bigImg").attr("src",bigImageURL); }); $("img.bigImg").load( function(){ $("img.smallImage").each(function(){ var bigImageURL = $(this).attr("bigImageURL"); img = new Image(); img.src = bigImageURL; img.onload = function(){ console.log(bigImageURL); $("div.img4load").append($(img)); }; }); } ); }); </script> <style> div.imgAndInfo{ margin: 40px 20px; } div.imgInimgAndInfo{ width: 400px; float: left; } div.imgAndInfo img.bigImg{ width: 400px; height: 400px; padding: 20px; border: 1px solid #F2F2F2; } div.imgAndInfo div.smallImageDiv{ width: 80%; margin: 20px auto; } div.imgAndInfo img.smallImage{ width: 60px; height: 60px; border: 2px solid white; } div.imgAndInfo img.smallImage:hover{ border: 2px solid black; } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <div class="imgAndInfo"> <div class="imgInimgAndInfo"> <img width="100px" class="bigImg" src="http://how2j.cn/tmall/img/productSingle/8619.jpg"> <div class="smallImageDiv"> <img width="100px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8620.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8620.jpg"> <img width="100px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8619.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8619.jpg"> <img width="100px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8618.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8618.jpg"> <img width="100px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8617.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8617.jpg"> <img width="100px" class="smallImage" src="http://how2j.cn/tmall/img/productSingle_small/8616.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8616.jpg"> </div> <div class="img4load hidden" ></div> </div> <div style="clear:both"></div> </div>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- JS实现鼠标移动到缩略图显示大图的图片放大效果
- 3月题外:关于JS实现图片缩略图效果的一个小问题
- JS实现带有抽屉效果的产品类网站多级导航菜单代码
- JS实现鼠标移动到缩略图显示大图的图片放大效果
- 3月题外:关于JS实现图片缩略图效果的一个小问题
- JS实现带有抽屉效果的产品类网站多级导航菜单代码
- 3月题外:关于JS实现图片缩略图效果的一个小问题
- 数字限时增长效果实现:numberGrow.js------遇到的产品提的要求
- JS实现全景图效果360度旋转
- 用XML+FSO+JS实现服务器端文件的选择效果
- 用XML+FSO+JS实现服务器端文件的选择效果
- jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
- JS实现全景图效果360度旋转
- js实现的很酷的连接提示效果
- Js实现图片透明效果
- 用js实现的打字效果的带链接的新闻标题
- 用js实现的打字效果的带链接的新闻标题
- Css利用js的expression实现的效果
- JS实现下拉列表效果
- JS实现图片幻灯片效果