//给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-商品图片放大器的更多相关文章

  1. smartcrop.js智能图片裁剪库

    今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...

  2. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  3. jquery.lazyload.js实现图片懒加载

    个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...

  4. jquery.lazyload.js实现图片懒载入

    个人理解:将须要延迟载入的图片的src属性所有设置为一张同样尽可能小(目的是尽可能的少占宽带,节省流量,因为缓存机制,当浏览器载入了一张图片之后,同样的图片就会在缓存中拿.不会又一次到server上拿 ...

  5. TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片

    **TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片首先我们来看看淘宝的功能和样式:** 之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9 ...

  6. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  8. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  9. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  10. 使用 FocusPoint.js 实现图片的响应式裁剪

    通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...

随机推荐

  1. 关于兄弟QWidget间的位置重叠

    转自:http://hi.baidu.com/dbzhang800/item/a7bf1f1e983c6af964eabf45?qq-pf-to=pcqq.group 缘起 csdn上一用户抱怨:她的 ...

  2. COJ 0016 20603矩阵链乘

    传送门:http://oj.cnuschool.org.cn/oj/home/solution.htm?solutionID=35454 20603矩阵链乘 难度级别:B: 运行时间限制:1000ms ...

  3. Delphi——Window 消息 - 转载▼

    Delphi是Borland公司的一种面向对象的可视化软件开发工具. Delphi集中了Visual C++和Visual Basic两者的优点:容易上手.功能强大,特别是在界面设计.数据库编程.网络 ...

  4. 下载cppunit

    cppunit的官方地址:http://sourceforge.net/projects/cppunit 方式一:下载打包好的版本 下载地址:http://sourceforge.net/projec ...

  5. 甲骨文公司 Oracle

    甲骨文公司 甲骨文公司,全称甲骨文股份有限公司,是全球最大的企业软件公司,总部位于美国加利福尼亚州的红木滩.甲骨文是继Microsoft之后,全球收入第二多的软件公司.甲骨文公司1989年正式进入中国 ...

  6. Matlab:回归分析(1)

    1.多元线性回归 %数据的输入 x = [ ]; y = [ ]; %转换为列向量 X = [ones(,) x']; Y = y'; %回归分析及检验 [b, bint, r, rint, stat ...

  7. 《算法问题实战策略》-chaper17-部分和

    数组上的一个基本优化——部分和: 对于一定长度的数组,我们想不断访问这个数组上的某个区间的和,我们能够怎么做呢?这里先不去谈一些数据结构在这个问题上的优化处理.首先我们最简单的一个方法就是穷举出所有区 ...

  8. spring配置文件中id与name

    1.id属性命名必须满足XML的命名规范,因为id其实是XML中就做了限定的. 2.name属性则没有这些限定,你可以使用几乎任何的名称 3.配置文件中不允许出现两个id相同的<bean> ...

  9. C++获得系统路径

    源码: [cpp] view plaincopy #include <Shlobj.h> #include <stdio.h> #include <locale.h> ...

  10. 在JAVA中 System.getProperty 和 System.setProperty 方法.

    今天着手研究TOMCAT源码. 在刚開始的时候Startup类中init方法中调用非常多次System.getProperty和System.setProperty的方法. 后来经过网上搜索才得知,这 ...