简介

网上有许多放大镜的jquery的插件，但是用着不是那么得心应手，现在一页代码实现一个放大镜功能，如果需要附加的功能可以手动修改，原理都在注释里

！DOCTYPE html html head meta charset=' UTF-8 '标题放大镜效果/title style type=' text/CSS ' * { margin : 0；padd : 0；} .小{左边距-:40像素；页边距-顶部：50像素；宽度： 150像素；高度： 150像素；/*border: 2px纯黄色；*/} .smallimg { width: 150px高度： 150像素；} .滑块{宽度： 50像素高度： 50px背景： rgba(180，180，135，0.3)；绝对位置：显示器：无；} #big { //设置为固定大小；宽度： 200像素；高度： 200像素；绝对位置：/* border: 2px纯红；*/overflow:隐藏；显示器：无；}/风格/头像dy！-缩略图-div class=' small ' img src=' http : thumb。jpg '/！-放大镜，在原图不上的小块- div class='slider'/div/div！-放大镜区域，大图，设置为没有人隐藏-div id=' big ' img id=' big img ' src=' http : big。jpg '/潜水通风。clientxinput类型=' text '值=' 0 ' id=' test '/br/even。clientyinput类型=' text '值=' 0 ' id=' test1 '/脚本类型=' text/JavaScript ' src=' http 3360 jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' small ')[0]；var滑块=$(' .滑块')[0];var big=文档。getelementbyid(' big ')；//试一试射流研究…获取var big img=文档。getelementbyid(' big img ')；//让滑块跟随鼠标移动。给小的方块绑定事件$('.小')。鼠标移动(函数(e){ var even=e | | event；//兼容火狐浏览器var x=偶数。client x-小。偏移left-slider.offsetWidth/2;变量y=偶数。客户很少。偏移top-slider.offsetHeight/2;//测试even.clientX和even.clientY $('#test ').瓦尔(甚至。client x)；$('#test1 ').瓦尔(甚至。客户关系)；//水平方向的最大值var MaxX=小。客户端宽度滑块。客户端宽度；//竖直方向的最大值var MaxY=小。客户端高度滑块。客户身高；if(x0){//相当于超出左侧，超出左侧时，拉回x=0；}//超出右侧时拉回if(XMaxx){ x=MaxX；}//顶部超出if(y0){ y=0；}//底部超出if(yMaxy){ y=MaxY；}滑块。风格。top=(y小。offset top)' px '；滑块。风格。左=(x小。offsetleft)' px '；//放大的图片的主要实现代码：比例计算，大。big.scrollLeft是id=大的差异中下方滚轴的位置//由于id=大的差异设置成固定大小，而图片又非常大，所以这个差异就像个放大镜一样在大图上晃//比例计算很简单，鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比，现在未知数是大图鼠标的位置很大。scrolleft=x/MaxX *(BigIMG)。客户端宽度-大。客户端宽度)；很大。滚动顶部=y/MaxY *(大img)。客户身高-大。客户端高度)；});//鼠标移入事件$('.小')。mouseenter(函数(){//鼠标移入到缩略图时候实现，上面出现的小的方块$('.滑块')。css('display '，' block ')；$('#big ').css('top '，小。offset top ' px ')；//隐藏的大图=获取左图的左边位置宽度10(隔开点缝隙与缩略图)px大。风格。左=小。偏移很小。偏移10 ' px//右侧的大图区域显示出来图片$('#big ').css('display '，' block ')；});//移除事件//添加鼠标移出事件，鼠标移出缩略图的时候$('.小')。mouseleave(函数(){ $(')。滑块')。css('display '，' none ')；$('#big ').css('display '，' none ')；});/脚本/正文/html下载演示

https://github.com/mytheshow/.

链接：http://pan . Baidu.com/s/1 vmbgb 3

以上是边肖介绍的jquery实现放大镜的简洁代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！