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 获取URL参数的插件
Mar 04 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
Node.js事件驱动
Jun 18 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
javascript中layim之查找好友查找群组
Feb 06 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修改session_id示例代码
2014/01/08 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
form自动提交实例讲解
2017/07/10 PHP
PDO::quote讲解
2019/01/29 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
Javascript模块模式分析
2008/05/16 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
Python 查看文件的编码格式方法
2017/12/21 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
教师研修随笔感言
2014/01/23 职场文书
工伤赔偿协议书
2014/04/15 职场文书
融资租赁计划书
2014/04/29 职场文书
中班下学期个人总结
2015/02/12 职场文书
银行催款通知书
2015/04/17 职场文书
Python实现机器学习算法的分类
2021/06/03 Python