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 Assert.notNull
Exception in thread "main" java.lang.IllegalArgumentException: Source must not be null at ...
- 令人头痛的ExtJS日期时间控件
1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...
- Silverlight获取DataGrid选中的行数据
注意触发的事件为:CurrentCellChanged后台代码: /// <summary> /// 获取datagrid当前选中的单元格数据 /// 如果绑定的数据源为实体的话默认选中的 ...
- cloudCompute
云计算使企业可以迅速对市场做出反应而且加强了企业内部的协同 人人都在用云计算的时候能够迅速迁移到云平台已经不叫优势了,反而不使用云计算成为了一种劣势
- git init
git clone git@code.easyunion.net:516059158/cloud-basic-knowledge.git添加codes;git add .;git commit -m ...
- UVALive 6198 A Terribly Grimm Problem
题目大意是 给出L,H 10^10范围 为[L, H]这个连续的整数区间寻找一个序列. 序列的长度要跟[L, H]一样 然后序列中的数都是素数,并且互不相同 并且序列中第i个数 要求是L + ...
- otl获得sql出错位置(oracle)
项目的一个需要,要获得sql出错的位置,从而给出类似sqlplus的错误提示(如下) sql出错原因易获得,记录在otl_exception::msg,但出错位置就不是那么容易了. 默认情况下otl异 ...
- Java做acm所需要的基础知识之排序问题
Java做acm所需要的基础知识. 以前做acm的题都是用C/C++来写代码的,在学习完Java之后突然感觉Java中的方法比C/C++丰富很多,所以就整理一下平时做题需要用到的Java基础知识. 1 ...
- ViewPager 详解(一)---基本入门
前言:这两天研究研究ViewPager滚动功能,现在很多的app都有用到这个功能,我们的大虾米也有这个模块.要研究就彻底的研究研究,我从不满足于一个功能只是简单的应用,要学就学的彻底,所以我打算将Vi ...
- 重叠I/O之事件通知
在 Winsock 中,重叠 I/O(Overlapped I/O)模型能达到更佳的系统性能,高于select模型.异步选择和事件选择三种.重叠模型的基本设计原理便是让应用程序使 用一个重叠的数据 ...