最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现产品缩略图效果
时间:2017-06-17 编辑:简简单单 来源:一聚教程网
效果图:
代码如下:
代码如下 | 复制代码 |
$(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)); }; }); } ); }); 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; }
|
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31