//给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. 脚本两则--用于快速部署HADOOP,SPARK这些(特别是VM虚拟机模板部署出来的)。。

    感觉可能只是适合我自己的部署习惯吧,且只针对CENTOS6及以下版本,以后有时间,可能还是要改进.. 1,从VM的模块产生的虚拟机,如何快速搞定网络配置? #!/bin/bash #usage:./i ...

  2. FLASK初步实践

    感觉经过DJANGO,CI,RAILS之类的WEB框架之后,FLASK的思路就比较顺畅了... FLASKR.PY import sqlite3 from flask import Flask, re ...

  3. CENTOS纯手工安装LAMP+PHPMYADMIN

    现在,安装这些确实越来越方便了. Installing Apache2 With PHP5 And MySQL Support On CentOS 6.4 (LAMP) 参考URL: http://w ...

  4. 云方案,依托H3C彩虹云存储架构,结合UIA统一认证系统,实现了用户数据的集中存储和管理

    客户的声音 资料云项目在迷你云基础上二次开发,通过使用云存储技术及文件秒传技术,对文件进行统一存储与管理,以达到节约文件管理成本.存储成本目的:通过有效的文件版本控制机制,以达到风险管控的目的:通过多 ...

  5. java数组并集/交集/差集(补集)

    1.说明 使用java容器类的性质选择容器 2.实现 package com.wish.datastrustudy; import java.util.HashSet; import java.uti ...

  6. Android新浪微博客户端(七)——ListView中的图片异步加载、缓存

    原文出自:方杰|http://fangjie.info/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...

  7. [Design Pattern] Mediator Pattern 简单案例

    Meditor Pattern,即调解模式,用一个调解类类处理所有的沟通事件,使得降低多对象之间的沟通难度,属于行为类的设计模式.为了方便理解记忆,我也称其为,沟通模式. 下面是一个调解模式的简单案例 ...

  8. c31 rotc_百度百科

    c31 rotc_百度百科 c31 rotc

  9. I - Tunnel Warfare - hdu 1540(区间合并更新)

    题意:在抗日战争期间,地道战在华北平原得到广泛的实施,一般而言,村庄通过一些隧道在一条线上连接,除了两端剩下的每个村庄都有两个相连. 侵略者会频繁的对这些村庄进行扫荡,并且摧他们的地道,当然八路军会把 ...

  10. 通过百度获取IP地址对应的经纬度

    /** * 获取指定IP对应的经纬度(为空返回当前机器经纬度) *  * @param ip * @return */ public static String[] getIPXY(String ip ...