html js 生成缩略图,js实现产品缩略图效果

效果图:

代码如下：

$(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 js 生成缩略图,js实现产品缩略图效果相关推荐

Openlayers前端复用Turf.js生成平头Buffer
Openlayers前端复用Turf.js生成平头Buffer,实现如下效果: 代码如下: <!doctype html> <html lang="en"> ...
dropzone js video上传使用frame-grap.js生成缩略图
第一步:从github上下载frame-grap组件,下载的压缩里,只有下面两个文件是有用的 rsvp.js 和 frame-grab.js,目录: /frame-grab.js-master/cli ...
四屏带缩略图JS幻灯片
四屏带缩略图JS幻灯片代码,不带箭头,效果简单,鼠标放到相应缩略图显示对应大图. 下载地址:四屏带缩略图JS幻灯片代码更多代码请访问JS代码站,JS代码频道转载于:https://blog.51c ...
Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大 ...
html轮播带缩略图,js带缩略图的图片轮播效果代码分享
本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:--------------- ...
node.js 生成文件_如何使用Node.js在几秒钟内生成模拟数据
node.js 生成文件介绍 (Introduction) In most of the applications, you need to have some static JSON data w ...
pHp封装成vue,vue.js生成条形码的方法
本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家. 1.下载插件npm install @xkeshi/vue-barcode //下载条形码插件 2.在m ...
js生成[n,m]的随机数
一.预备知识 Math.ceil(); //向上取整. Math.floor(); //向下取整. Math.round(); //四舍五入. Math.random(); //0.0 ~ 1 ...
bpmn js 生成json_你不知道的 tsconfig.json
在 TypeScript 开发中,tsconfig.json 是个不可或缺的配置文件,它是我们在 TS 项目中最常见的配置文件,那么你真的了解这个文件吗?它里面都有哪些优秀配置?如何配置一个合理的 t ...
LeaFlet学习之结合turf.js生成简单的等值线demo
本文主要结合turf.js生成等值线俺,进行展示效一.放张图: 二.全部源码 <!DOCTYPE html> <html xmlns="http://www.w3.org ...

html js 生成缩略图,js实现产品缩略图效果

html js 生成缩略图,js实现产品缩略图效果相关推荐

最新文章

热门文章