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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php基础知识:类与对象(1)
2006/12/13 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
python程序变成软件的实操方法
2019/06/24 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
vscode调试django项目的方法
2020/08/06 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
九年级物理教学反思
2014/01/29 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript