趣味测试小程序_js完成产品缩略图效果

2021-01-12 13:09| 发布者: | 查看: |

js实现产品缩略图效果       本文主要介绍了js实现产品缩略图效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧

效果图:

代码如下:

 !DOCTYPE html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
 script src="study/js/jquery/2.0.0/jquery.min.js" /script 
 link href="study/css/bootstrap/3.3.6/bootstrap.min.css" rel="external nofollow" rel="stylesheet" 
 script src="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 
 div 
 img width="100px" src="tmall/img/productSingle/8619.jpg" 
 div 
 img width="100px" src="tmall/img/productSingle_small/8620.jpg" bigImageURL="tmall/img/productSingle/8620.jpg" 
 img width="100px" src="tmall/img/productSingle_small/8619.jpg" bigImageURL="tmall/img/productSingle/8619.jpg" 
 img width="100px" src="tmall/img/productSingle_small/8618.jpg" bigImageURL="tmall/img/productSingle/8618.jpg" 
 img width="100px" src="tmall/img/productSingle_small/8617.jpg" bigImageURL="tmall/img/productSingle/8617.jpg" 
 img width="100px" src="tmall/img/productSingle_small/8616.jpg" bigImageURL="tmall/img/productSingle/8616.jpg" 
 /div 
 div /div 
 /div 
 div /div 
 /div 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部