图片放大镜注释详解_html/css_WEB-ITnose
程序员文章站
2022-04-10 14:26:27
...
今天的练习是做一个网购网站常见的图片详情介绍的放大镜效果,简单来说就是图片中有对应的区域让你看到放大后的效果。
关于布局:就是两组div,第一组大div放图片,小的是遮盖层。第二组是大图div显示框,里面放大张图片,超过部分隐藏,可以想象下是透过窗户看外面,你看到的只是一部分。
思路:就是两边的比例,重点,比例,话不说,直接上代码。
//鼠标在遮罩层中居中显示,鼠标的位置-显示区到body的距离-遮罩层的一半//后面是赋值给遮罩层的距离,所以用到减,鼠标位置不变,是遮罩层在变,所以需要用到减,遮罩层往回挪
var l = ev.clientX-this.offsetLeft-mask.offsetWidth/2; var t = ev.clientY-this.offsetTop-mask.offsetHeight/2; //不让遮罩层出左边显示框的范围 if(l=left.clientWidth - mask.offsetWidth){ l = left.clientWidth - mask.offsetWidth } if(t=left.clientHeight - mask.offsetHeight){ t = left.clientHeight - mask.offsetHeight } //比例,将能够移动的距离做比例 var percX = l/(this.clientWidth- mask.offsetWidth); var percY = t/(this.clientHeight- mask.offsetHeight); //大图显示区 bigImg.style.left = -percX*(bigImg.offsetWidth - big.clientWidth)+'px'; bigImg.style.top = -percY*(bigImg.offsetHeight - big.clientHeight)+'px'; //遮罩层的位置 mask.style.left = l +'px'; mask.style.top = t +'px'; }; };
这是做完的效果,我不知怎么插入图片文件,建议您可以自己拿张图片,修改下地址就行,最好是等宽高的,还有一点就是,如果你觉着遮罩层和显示区域的图片差太多,那你就可以修改下遮罩层的大小就行了。
上一篇: Django 常见问题及解决方案汇总
下一篇: 用PEAR来写你的下一个php程序
推荐阅读
-
css图片响应式+垂直水平居中2_html/css_WEB-ITnose
-
网页图片垂直剧中 等比例缩放 黑白显示_html/css_WEB-ITnose
-
让ie6对png透明图片支持起来_html/css_WEB-ITnose
-
「CSS3 」动画详解_html/css_WEB-ITnose
-
CSS截取图片上一部分做背景_html/css_WEB-ITnose
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
9种CSS3 blend模式制作的鼠标滑过图片标题特效_html/css_WEB-ITnose
-
关于在HTML表格中插入背景图片图片重复显示的问题_html/css_WEB-ITnose
-
css设置背景图片和背景颜色都不显示_html/css_WEB-ITnose