放大镜

代码实现:js实现放大镜

js模块代码实现 var obj = { $:function(name){ return document.querySelector(name); }, init:function(){ this.small_pic=this.$(".small_pic"), this.slider = this.$(".slider"), //滑块 this.big_pic = this.$(".big_pic"), //右侧BOX this.big_img = this.$(".big_img"); //右侧大图 this.mousemove(); this.mouseleave(); }, mousemove:function(){ var self = this; this.small_pic.onmousemove = function(event){ //event对象 事件的状态 self.slider.style.display = 'block'; self.big_pic.style.display = 'block'; //event.clientX 当前移入点与X轴的坐标 slider.offsetWidth 滑块的宽度 var left = event.clientX - self.slider.offsetWidth/2; var top = event.clientY - self.slider.offsetHeight/2; var w = self.small_pic.offsetWidth - self.slider.offsetWidth; var h = self.small_pic.offsetHeight - self.slider.offsetHeight; //移动范围 if(left <0) { left = 0; }else if(left > w) { left = w; }; if(top <0) { top = 0; }else if(top > h) { top = h; }; self.slider.style.left = left +'px'; self.slider.style.top = top +'px'; self.big_img.style.left = -(left*2) +'px'; //右侧大图的距离 self.big_img.style.top = -(top*2) +'px'; }; //移出 onm ouseleave }, mouseleave:function(){ this.self = this; self.onmouseleave= function(){ self.slider.style.display = 'none'; self.big_pic.style.display = 'none'; }; } } window.onload = function(){ //选择器封装 // function $(name) { // return document.querySelector(name); // }; // var small_pic = $(".small_pic"), //左侧的图片 // slider = $(".slider"), //滑块 // big_pic = $(".big_pic"), //右侧BOX // big_img = $(".big_img"); //右侧大图 // //移入 obj.init(); } css代码 #box { position: relative; } .small_pic { width:360px; height:500px; } .small_pic img { width:100%; height:100%; } .small_pic .slider { width:180px; height:250px; position: absolute; background:rgba(255,255,255,.3); cursor:move; display:none; } .big_pic { width:360px; height:500px; position: absolute; top:0; left:370px; border:1px solid #333; overflow: hidden; display:none; } .big_pic .big_img { position: absolute; } msg图片 

标签：style,放大镜,big,self,pic,slider,small
来源： https://www.cnblogs.com/jycom/p/16651662.html