html js 生成缩略图,js实现产品缩略图效果

效果图:

代码如下：

$(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));

};

});

}

);

});

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;

}

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