js实现产品缩略图效果


Posted in Javascript onMarch 10, 2017

效果图:

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 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>

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

Javascript 相关文章推荐
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
在node中如何使用 ES6
Apr 22 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
js仿360开机效果
Dec 26 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
BootStrap注意事项小结(五)表单
Mar 10 #Javascript
微信小程序 弹框和模态框实现代码
Mar 10 #Javascript
BootStrap表单宽度设置方法
Mar 10 #Javascript
Angular.js基础学习之初始化
Mar 10 #Javascript
js实现返回顶部效果
Mar 10 #Javascript
Vue.directive自定义指令的使用详解
Mar 10 #Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 #Javascript
You might like
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
Flask框架信号用法实例分析
2018/07/24 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
如何让python的运行速度得到提升
2020/07/08 Python
Python代码注释规范代码实例解析
2020/08/14 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
表彰会主持词
2014/03/26 职场文书
安全生产月活动总结
2014/05/04 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python