js实现产品缩略图效果

多人的饭局尽量少参加,因为难有真心的交流,多为应酬。多想什么是自己真正想要的东西,想不透就继续想。

效果图:

代码如下:

<!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 rel="nofollow noopener noreferrer" 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="https://cdnss.haodaima.top/uploadfile/2024/0309/20240309075259588.jpg">
  <div class="smallImageDiv">
    <img width="100px" class="smallImage" src="https://cdnss.haodaima.top/uploadfile/2024/0309/20240309075300139.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8620.jpg">
    <img width="100px" class="smallImage" src="https://cdnss.haodaima.top/uploadfile/2024/0309/20240309075300119.jpg" bigImageURL="https://cdnss.haodaima.top/uploadfile/2024/0309/20240309075259588.jpg">
    <img width="100px" class="smallImage" src="https://cdnss.haodaima.top/uploadfile/2024/0309/20240309075301443.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8618.jpg">
    <img width="100px" class="smallImage" src="https://cdnss.haodaima.top/uploadfile/2024/0309/20240309075301113.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8617.jpg">
    <img width="100px" class="smallImage" src="https://cdnss.haodaima.top/uploadfile/2024/0309/20240309075301745.jpg" bigImageURL="http://how2j.cn/tmall/img/productSingle/8616.jpg">
  </div>
 <div class="img4load hidden" ></div>  
 </div>
 <div style="clear:both"></div>
</div>

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

您可能有感兴趣的文章
JS获取鼠标点击时的位置

JS获取URL参数

Ajax跨域问题及解决方案(jsonp,cors)

ajax动态加载json数据并详细解析

ajax从JSP传递对象数组到后台的方法