javascript实现商品图片放大镜_javascript技巧

来源:脚本之家  责任编辑:小易  

!DOCTYPEhtml>title>body {margin:0;padding:0;}*/img {width:250px;height:150px;}pic_wrap {position:relative;width:250px;height:150px;}float_box {width:100px;height:100px;background-color:green;filter:opacity(alpha:30);opacity:0.3;position:absolute;display:none;}big_img {background-image:url(1.jpg);height:450px;width:750px;background-repeat:no-repeat;background-size:cover;position:relative;}show {width:300px;height:300px;background-color:white;opacity:1;filter:opacity(alpha:1);overflow:hidden;display:none;}div>等比放大镜.js">var pic_wrap=document.getElementById('pic_wrap'),float_box=document.getElementById("float_box"),show=document.getElementById('show');big_img=document.getElementById("big_img");鼠标移入事件,让放大镜和放大区显示!pic_wrap.onmouseover=function(){float_box.style.display="block;show.style.display="block;}鼠标不断移动时触发,实时更新放大镜得到的图片pic_wrap.onmousemove=function(event){floatMove(float_box,pic_wrap,event);showPic();}鼠标移出后,放大镜和放大区隐藏pic_wrap.onmouseout=function(){float_box.style.display="none;show.style.display="none;}由于offset方法包括边框,在使用的时候很容易出现问题,所以用style来实时获取attr!function getStyle(obj,attr){if(window.currentStyle){return parseInt(obj.currentStyle[attr]);}else {return parseInt(getComputedStyle(obj,null)[attr]);}}运动框架,控制放大镜在原图中的位置!function floatMove(argu1,argu2,event){var e=event|window.event;var minLeft=getStyle(argu1,"width");var maxLeft=getStyle(argu2,"width")-minLeft/2;var minHeight=getStyle(argu1,"height");var maxHeight=getStyle(argu2,"height")-minHeight/2;console.log(maxLeft);console.log(maxLeft-minLeft/2);if(e.clientX){float_box.style.left="0px;防止放大镜超出左边框}else if(e.clientX>maxLeft){float_box.style.left=getStyle(argu2,"width")-getStyle(argu1,"width")+"px;防止放大镜超出右边框}else {float_box.style.left=event.clientX-minLeft/2+"px;放大镜完全在图片内时正常移动}if(e.clientY){float_box.style.top="0px;防止放大镜超出上边框}else if(e.clientY>maxHeight){float_box.style.top=getStyle(argu2,"height")-getStyle(argu1,"height")+"px;防止放大镜超出下边框}else {float_box.style.top=event.clientY-minLeft/2+"px;}}用来显示放大镜得到的图片,利用坐标计算!实时更新可视区域function showPic(){var iCurLeft=getStyle(float_box,"left");var iCurTop=getStyle(float_box,"top");var a=getStyle(pic_wrap,"width")-getStyle(float_box,"width");var b=getStyle(big_img,"width")-getStyle(show,"width");var moveWidth=-(iCurLeft/a)*b;big_img.style.left=moveWidth+"px;var c=getStyle(pic_wrap,"height")-getStyle(float_box,"height");var d=getStyle(big_img,"height")-getStyle(show,"height");var moveHigth=-(iCurTop/c)*d;big_img.style.top=moveHigth+"px;}www.zgxue.com防采集请勿采集本网。

优化原因

买是否便宜?可

现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能。

我觉得这个是不是得把当前整个页面复制一份到iframe里面,然后把iframe中的内容缩放。

技术关键点

试试这个图片放大效果 鼠标移上去就会显示放大图片 里面有教程和源码

1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小,那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小,那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。

以前写的一个,完全其于原生js,代码简单,好移植。 可以使用两张图片,当然也可以使用一张图片,只需要给src和data-bigimg同样的值。 demo: http://www.hellolone.com/demo/zoom/ 如有问题请追问。

计算方式

京东放大镜的主要js:http://misc.360buyimg.com/product/js/2012/product.js?t=20120717.js里面有个bigimg搜索下,具体问什么网页的css上没有体现,我也不清楚。。

x = 事件对象.clientX - 外侧盒子.offsetLeft;

Y = 事件对象.clientY - 外侧盒子.offsetTop;

2.解决如何鼠标在黄块内居中的问题,横纵位移分别加上放大黄块一半的长度和宽度。

计算方式

京东放大镜的主要js:http://misc.360buyimg.com/product/js/2012/product.js?t=20120717.js里面有个bigimg搜索下,具体问什么网页的css上没有体现,我也不清楚。。

x = 事件对象.clientX - 外侧盒子.offsetLeft - 小黄.offsetWidth/2;

Y = 事件对象.clientY - 外侧盒子.offsetTop - 小黄.offsetHeight/2;

// 事件对象的 offsetX 和 offsetY

// 归属于事件对象

// 作用:关注的鼠标的坐标(鼠标相对于当前元素的坐标)

// 元素的 offsetLeft 和 offsetTop

// 归属于元素

// 作用:关注的元素的坐标(相对于offsetParent的坐标)

3. 小黄块的最大距离

4.用preventDefault阻止事件冒泡

简易实现代码

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="base.css" rel="external nofollow" /></head><body> <div class="w"> <div class="fdj"> <!-- 左侧 --> <div class="leftBox" id="_leftBox"> <!-- 小图 --> <img src="img/m.jpg" alt=""/> <!-- 小黄盒子 --> <div class="tool" id="_tool"></div> </div> <!-- 右侧 --> <div class="rightBox" id="_rightBox"> <img id="_bImg" src="img/b.jpg" alt=""/> </div> </div> </div> <!-- 引入的外部js程序文件 --> <script src="index.js"></script></body></html>

* { margin:0; padding:0;}.w { width: 1190px; margin: 0 auto;}.fdj { margin-top: 20px;}.fdj .leftBox { width: 400px; height: 400px; border: 1px solid #ccc; float: left; position: relative; overflow: hidden;}.fdj .tool { width: 250px; height: 250px; background:gold; opacity:.5; filter:alpha(opacity=50); position: absolute; top:0; left: 0; cursor: move; /* 默认隐藏 */ display: none;}/* 给小黄加上active 就会显示 */.fdj .tool.active { display: block;}.fdj .rightBox { width: 500px; height: 500px; border:1px solid #ccc; float: left; overflow: hidden; /* 隐藏 */ display: none; position: relative;}/* 加上active表示显示 */.fdj .rightBox.active { display: block;}.fdj .rightBox img { position: absolute;}

//【准备:获取要操作的元素】var _leftBox = document.querySelector('#_leftBox'); // 左侧盒子var _tool = document.querySelector('#_tool'); // 小黄盒子var _rightBox = document.querySelector('#_rightBox'); // 右侧盒子var _bImg = document.querySelector('#_bImg'); // 右侧盒子中的大图片//【功能1:鼠标进入/离开左侧盒子显示/隐藏小黄和右侧盒子】// 1. 给_leftBox注册鼠标进入事件 onmouseenter_leftBox.onmouseenter = function () { // 1.1 显示小黄盒子,给小黄盒子添加类名 active _tool.className = 'tool active'; // 1.2 显示右侧盒子,给右侧盒子添加类名 active _rightBox.className = 'rightBox active';}// 2. 给_leftBox注册鼠标离开事件 onmouseleave_leftBox.onmouseleave = function () { // 2.1 显示小黄盒子,给小黄盒子去除类名 active _tool.className = 'tool'; // 2.2 显示右侧盒子,给右侧盒子去除类名 active _rightBox.className = 'rightBox';}//【功能2:鼠标在左侧区域移动时,控制小黄和右侧盒子中图片的位置】// 1. 给左侧盒子注册鼠标移动事件 onmosuemove_leftBox.onmousemove = function (e) { // 2. 通过事件对象获取鼠标相对元素的位置(x,y) var x = e.clientX - _leftBox.offsetLeft- _tool.offsetWidth/2; var y = e.clientY - _leftBox.offsetTop - _tool.offsetHeight/2; // 这里给x和y赋值时,不要用事件对象的offsetX和offsetY。 // 原因:因为【事件冒泡】,鼠标在移动时,有时会移动到小黄盒子上。若移动到小黄盒子上时,获取的值不是相对于左侧盒子元素,而是相对小黄盒子元素。所以当鼠标进入或离开小黄时,获取的坐标值时大时小,导致小黄盒子上下左右波动。 // 解决方案:在小黄移动事件中,停止冒泡。但是鼠标在移动时,就没有效果了。 // 最终解决方案:放弃使用事件对象offsetX/Y。 选择事件对象的clienX/Y 结合左侧盒子的位置计算出正确的位置。 // 2.1 对x和y限制 if (x < 0) { x = 0; } if (y < 0) { y = 0; } if (x > _leftBox.offsetWidth - _tool.offsetWidth) { x = _leftBox.offsetWidth - _tool.offsetWidth; } if (y > _leftBox.offsetHeight - _tool.offsetHeight) { y = _leftBox.offsetHeight - _tool.offsetHeight; } // 3. 把计算好的位置 赋值给小黄 _tool.style.left = x + 'px'; _tool.style.top = y + 'px'; // 4. 设定右侧大图片的位置(设置的方向是相反的,比例关系是1:2) _bImg.style.left = -2 * x + 'px'; _bImg.style.top = -2 * y + 'px';}

帮你找了一个(后面有测试附件):img_warp {width:318px;height:199px;overflow:hidden;border:1px solid#ccc;padding:0px;margin-left:0px;margin-top:0px;position:absolute;top:0px;left:0px;}img_warp{position:relative;top:0px;left:0px;cursor:crosshair*/}img_warp.current{ width:318px;height:199px}var$E=function(opts){function_(objId){return(typeof objId="string")?document.getElementById(objId):objId;}var beImg,expand,clip,cover,warp,expImg;var clipWidth,clipHeight;var closeTimeId=null;var mult=1;图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整init(function(){beImg=_(opts.berviary);warp=beImg.parentNode;cover=document.createElement("div");warp.appendChild(cover);cover.style.position="absolute;cover.style.top="0px;cover.style.left="0px;cover.style.backgroundColor="#ccc;var opac=parseFloat(opts.opacity)|0.3;cover.style.opacity=opac;cover.style.filter="Alpha(Opacity="+opac*100+");cover.style.width="100%;cover.style.height="100%;cover.style.zIndex=2;cover.style.visibility="hidden;clip=document.createElement("img");warp.appendChild(clip);clipWidth=(opts.clip&opts.clip.width)|"60px;clipHeight=(opts.clip&opts.clip.height)|"60px;clip.src=beImg.src;clip.className=beImg.className;clip.style.position="absolute;clip.style.top="0px;clip.style.left="0px;clip.style.clip="rect(0px,"+clipWidth+内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js放大镜放大图片效果
  • 用js实现放大镜的效果的简单实例
  • javascript图片放大镜效果代码[代码比较简单]
  • 奇妙的javascript图片放大镜
  • javascript 图片放大镜(可拖放、缩放效果)
  • 原生js写的放大镜效果
  • 电子商务网站上的常用的js放大镜效果
  • javascript 图片切割效果(放大镜)
  • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标
  • 基于angularjs实现图片放大镜效果
  • javascript在ie中“意外地调用了方法或属性访问”
  • jscript中的prototype(原型)属性研究
  • js去掉字符串中所有的逗号
  • vue bootstrap小例子一枚
  • web.js.字符串与正则表达式操作
  • js控制弹窗实现在任意分辨率下居中显示
  • js 递归json树实现根据子id查父id的方法分析
  • 使用js判断当前时区timezone是否是夏令时
  • 在多个页面使用同一个html片段《续》
  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原
  • 纯javascript写图片放大镜
  • 如何用原生javascript实现放大镜效果
  • JS图片放大扩展,按钮开关放大镜
  • 我用的是QQ浏览器,为什么上天猫的时候,不能用放...
  • js中轮播图放大镜为什么好多值都是负的
  • JS脚本实现开关网页放大镜
  • js 放大镜效果在右边放大 放大后右边的文字被挤到...
  • 求一个js或者jquery放大镜效果,不需要准备大图片...
  • js或者布局问题,京东产品放大镜效果原理
  • JS旋转图片以后,再给图片加上放大镜的效果。
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧js放大镜放大图片效果用js实现放大镜的效果的简单实例javascript图片放大镜效果代码[代码比较简单]奇妙的javascript图片放大镜javascript 图片放大镜(可拖放、缩放效果)原生js写的放大镜效果电子商务网站上的常用的js放大镜效果javascript 图片切割效果(放大镜)图片放大镜jquery.jqzoom.js使用实例附放大镜图标基于angularjs实现图片放大镜效果javascript在ie中“意外地调用了方法或属性访问”jscript中的prototype(原型)属性研究js去掉字符串中所有的逗号vue bootstrap小例子一枚web.js.字符串与正则表达式操作js控制弹窗实现在任意分辨率下居中显示js 递归json树实现根据子id查父id的方法分析使用js判断当前时区timezone是否是夏令时在多个页面使用同一个html片段《续》js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法前端实现文件的断点续传(前端文件提交+后微信小程序基于picker实现级联菜单javascript 巧学巧用动态修改dom 里面的 id 属性的弊端分析关于微信jssdk实现多图片上传的一点心得分cookie 最近浏览记录(中文escape转码)具体javascript更改字符串的大小写java实现单链表增删改查的实例代码详解ionic实现页面下拉刷新(ion-refresher)功bootstrap轮播插件简单使用方法介绍
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved