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 相关文章推荐
json简单介绍
Jun 10 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
详解Angular模板引用变量及其作用域
Nov 23 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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实现Unicode编码相互转换的方法示例
2020/11/17 PHP
无阻塞加载脚本分析[全]
2011/01/20 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python实现简单图书管理系统
2019/11/22 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python 8种必备的gui库
2020/08/27 Python
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
几个数据库方面的面试题
2016/07/01 面试题
实习生体会的自我评价范文
2013/11/28 职场文书
元旦晚会邀请函
2014/01/27 职场文书
优秀党员获奖感言
2014/02/18 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
python 命令行传参方法总结
2021/05/25 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python