JS-商品图片放大器
//给mask添加事件,让其随着鼠标移动
superMask.onmousemove=function(){
var left=event.offsetX-175/2;
left=left>0?left:0;
left=left<175?left:175;
var top=event.offsetY-175/2;
top=top>0?top:0;
top=top<175?top:175;
mask.style.left=left+"px";
mask.style.top=top+"px";
//控制大图的预览区
largeDiv.style.backgroundPositionX=left*2*(-1)+'px';
largeDiv.style.backgroundPositionY=top*2*(-1)+'px';
}
superMask.onmouseover=function(){
mask.style.display="block";//控制小遮罩显示
largeDiv.style.display="block";//控制大图区显示
var mediumSrc=document.getElementById("mediumImg").src;
var dotIndex=mediumSrc.lastIndexOf(".");
var largeSrc=mediumSrc.substring(0,dotIndex-1)+"l"+mediumSrc.substring(dotIndex);
//console.log(largeSrc);
largeDiv.style.background='url('+largeSrc+')';//大图链接字符串
}
superMask.onmouseout=function(){
mask.style.display="none";
largeDiv.style.display="none";
}
JS-商品图片放大器的更多相关文章
- smartcrop.js智能图片裁剪库
今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...
- 原生JS实现图片放大镜插件
前 言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的 ...
- jquery.lazyload.js实现图片懒加载
个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...
- jquery.lazyload.js实现图片懒载入
个人理解:将须要延迟载入的图片的src属性所有设置为一张同样尽可能小(目的是尽可能的少占宽带,节省流量,因为缓存机制,当浏览器载入了一张图片之后,同样的图片就会在缓存中拿.不会又一次到server上拿 ...
- TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片
**TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片首先我们来看看淘宝的功能和样式:** 之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9 ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- js压缩图片base64长度
var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
- 使用 FocusPoint.js 实现图片的响应式裁剪
通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...
随机推荐
- SPRING-MVC访问静态文件,如jpg,js,css
如何你的DispatcherServlet拦截 *.do这样的URL,就不存在访问不到静态资源的问题.如果你的DispatcherServlet拦截“/”,拦截了所有的请求,同时对*.js,*.jpg ...
- 云方案,依托H3C彩虹云存储架构,结合UIA统一认证系统,实现了用户数据的集中存储和管理
客户的声音 资料云项目在迷你云基础上二次开发,通过使用云存储技术及文件秒传技术,对文件进行统一存储与管理,以达到节约文件管理成本.存储成本目的:通过有效的文件版本控制机制,以达到风险管控的目的:通过多 ...
- Android ANR、Force Closed(转)
ANRs (“Application Not Responding”),意思是”应用没有响应“. 在如下情况下,Android会报出ANR错误: – 主线程 (“事件处理线程” / “UI线程”) 在 ...
- 【HDOJ】4982 Goffi and Squary Partition
题意就是整数划分,选出和为n的K个整数,其中K-1个数的和为完全平方数S.选择整数时需要从1,2,3..连续选择,当选择整数与n-S相等时,需要跳过n-S,即选择n-S+1.如此选择K-2个数,从而可 ...
- 【线段树】HDU 5443 The Water Problem
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5443 题目大意: T组数据.n个值,m个询问,求区间l到r里的最大值.(n,m<=1000) ...
- SVN项目库错误Unsupported FS format svn: Expected FS format between '1' and '4'; found format '6'
SVN项目库错误Unsupported FS format svn: Expected FS format between '1' and '4'; found format '6' 从这里找到解决方 ...
- L - Kakuro Extension - HDU 3338 - (最大流)
题意:有一个填数字的游戏,需要你为白色的块内填一些值,不过不能随意填的,是有一些规则的(废话),在空白的上方和作方给出一些值,如果左下角有值说明下面列的和等于这个值,右上角的值等于这行后面的数的和,如 ...
- 状压dp-poj-1170-Shopping Offers
题目链接: http://poj.org/problem?id=1170 题目意思: 购物车里有b种(0=<b<=5)物品,每种物品告诉物品代号c(1=<c<=999),数量为 ...
- Object -C NSNumber -- 笔记
// // main.m // NSNumber // // Created by facial on 24/8/15. // Copyright (c) 2015 facial_huo. A ...
- [RxJS] Creation operators: interval and timer
It is quite common to need an Observable that ticks periodically, for instance every second or every ...