标签：style 放大镜 big self pic slider small

代码实现: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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。