最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯js仿淘宝京东商品放大镜功能
时间:2017-05-16 编辑:简简单单 来源:一聚教程网
效果图:
代码如下:
代码如下 | 复制代码 |
*{ margin: 0px; padding: 0px; } .imgContent{ width: 420px; height: 300px; position: relative; margin-left: 50px; margin-top: 50px; } .imgContent>img{ width: 420px; height: 300px; }
/*大致功能的思路:(完全按照自己的想法去实现的功能,肯定有很多地方优化,希望大家一起讨论) 1、有一个放原始图片的盒子 2、当鼠标移入这个盒子,在右侧创建一个相同大小的镜像盒子,镜像盒子里创建一个放大4倍的镜像图片,同时也在原始盒子里创建一个放大镜(若存在就display:block,若不存在就创建,镜像盒子同理) 3、当鼠标移动时,原始盒子里的放大镜跟随鼠标移动(类似拖拽功能),镜像盒子里的图片的top和left值是原始盒子里放大镜的top和left值的-4倍 4、当鼠标移出原始盒子时,隐藏镜像盒子和放大镜*/ function Scaler(id){ var me = this var originalDiv = document.querySelector("#"+id) var mirrorDiv = null var mirrorImg = null var scaler = null var real_left = originalDiv.offsetLeft var real_right = originalDiv.offsetWidth+originalDiv.offsetLeft var real_top = originalDiv.offsetTop var real_bottom = originalDiv.offsetHeight+originalDiv.offsetTop //创建镜像盒子 this.createMirror = function(){ var originalStyle = getComputedStyle(originalDiv) mirrorDiv = document.createElement("div") mirrorDiv.style.cssText = 'width:'+originalStyle.width+ ';height:'+originalStyle.height+ ';position:absolute;left:'+originalStyle.width+ ';top:0px;margin-left:10px;overflow:hidden;'; //创建镜像图片 mirrorImg = document.createElement("img") mirrorImg.style.cssText = 'width:'+(originalDiv.offsetWidth*4)+ 'px;height:'+originalDiv.offsetHeight*4+'px;position:absolute;top:0px;left:0px;' mirrorImg.src = document.querySelector("#"+id+" img").src mirrorDiv.appendChild(mirrorImg) originalDiv.appendChild(mirrorDiv) } //创建放大镜 this.createScaler = function(left,top){ scaler = document.createElement("div") scaler.style.cssText = 'width:100px;height:100px;background-color:yellow;opacity:0.4;position:absolute;' scaler.style.top = top; scaler.style.left = left; originalDiv.appendChild(scaler) } //设置镜像图片位置 this.setImgPosition = function(left,top){ mirrorImg.style.left = '-'+left+'px' mirrorImg.style.top = '-'+top+'px' } //鼠标移入事件 this.e_mouseover = function(){ originalDiv.style.cursor = "move" if (!mirrorDiv) { me.createMirror() }else{ mirrorDiv.style.display = "block" }; if (!scaler) { me.createScaler(0,0) }else{ scaler.style.display = "block" }; } //鼠标移出事件 this.e_mouseleave = function(){ mirrorDiv.style.display = "none" scaler.style.display = "none" } //鼠标移动事件(关键代码) this.e_mousemove = function(e){ // 判断鼠标是否移出原始盒子 if (e.clientX > real_right || e.clientX me.e_mouseleave() return false }; // 鼠标到原始盒子顶部的距离 varpadTop=e.clientY-real_top // 鼠标到原始盒子左侧的距离 varpadLeft= e.clientX-real_left //放大镜跟随鼠标移动(-50是因为让鼠标在放大镜的中心) scaler.style.top=padTop-50; scaler.style.left=padLeft-50; //因为镜像图片放大了4倍,所以跟随移动的时候是4倍 me.setImgPosition((padLeft-50)*4,(padTop-50)*4) } //注册事件监听 originalDiv.onmouseover=me.e_mouseover originalDiv.onmouseleave=me.e_mouseleave originalDiv.onmousemove=function(e){ me.e_mousemove(e) } } // 创建图片放大功能对象,参数为原始盒子id即可(放大镜大小,镜像图片放大倍数都可设为参数传递) new Scaler("imgContent1") |
相关文章
- 原生js仿淘宝网商品放大镜效果 05-10
- js仿淘宝评价评分功能 05-10
- 用js制作淘宝放大镜效果 03-14
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31