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 实现图片的响应式裁剪
通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...
随机推荐
- mysql rr和rc区别
<pre name="code" class="html">1. 数据库事务ACID特性 数据库事务的4个特性: 原子性(Atomic): 事务中的 ...
- C#中两个时间的比较
var DateTimedt1 = Convert.ToDateTime(dt); var DateTimedt2 = Convert.ToDateTime(DateTime.Now); ...
- 3Sum Closest——LeetCode
Given an array S of n integers, find three integers in S such that the sum is closest to a given num ...
- Java习惯用法总结
在微博中看到的一个不错的帖子,总结的很详细,拷贝过来,一是为了方便自己查阅,也能和大家一起共享,后面有原文的链接地址: 在Java编程中,有些知识 并不能仅通过语言规范或者标准API文档就能学到的.在 ...
- 均价 和 最新价格 是啥意思 什么是MACD DIFF DEA 指标?
均价=当前时刻成交的总价格/成交的总量 最新价格=当前时刻的价格 一.平滑异同平均线(Moving Average Convergence Divergence)原理:MACD(Moving Aver ...
- 抽象基类(ABC),纯虚函数
#ifndef _ACCTABC_H_ #define _ACCTABC_H_ //(* #include <iostream> #include <string> //*) ...
- nova-network创建初始化网络
nova-network创建初始化网络
- puppet report import
把Puppet报告导入Puppet Dashboard 现在Dashboard正在运行,而我们需要确保它能够获取Puppet报告.完成这项工作有几种方法,开始的时候都是用Rake任务导入旧报告.在/u ...
- 部分实用的SQL语句
一.在数据库创建表格的SQL语句 1,创建一个link表格,包含属性:lid 主键,title 标题, imgpath 图片地址 , url 网址 , info 说明, isshow 显示1 ...
- 【AngularJS入门】用ng-repeat指令实现循环输出
循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串 ...