仿京东图片放大镜动效

最新推荐文章于 2024-08-05 15:57:37 发布

frank201113

最新推荐文章于 2024-08-05 15:57:37 发布

阅读量2.3k

点赞数 3

分类专栏： frontend 文章标签： js 图片放大镜

本文链接：https://blog.csdn.net/handsome_fan/article/details/80874500

版权

相信大家应该都有在京东上买过东西，那么大家在买东西的时候一定见到过图片放大的特效，就像是这样的效果：
这里写图片描述
其实这个效果的原理也很简单，就是我们要准备两张尺寸比例一样的图片，一张小图，一张大图，当鼠标移动到小图上面时，大图显示出相应的部分来。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {
  width:180px;
  height:180px;
  overflow:hidden; 
  position:relative; /* 黄色遮罩相对于#div1进行绝对定位 */
}

#div1 span {
  width:100px; 
  height:100px; 
  background:yellow; 
  opacity:0.5; 
  filter:alpha(opacity=50); 
  position:absolute; /* 黄色遮罩绝对定位才能跟随鼠标移动 */
  left:0; 
  top:0; 
  display:none; /* 鼠标移入图片后才显示黄色遮罩 */
}

/* 
消除mouseover和mouseout事件子级对父级的影响
(阻止事件冒泡不能消除子级对父级的影响，所以在黄色遮罩和图片之间加个透明的隔离层)
*/
#mark { 
  width:180px; 
  height:180px; 
  background:red; 
  position:absolute; 
  left:0; 
  top:0;
  opacity:0; 
  filter:alpha(opacity=0);
  cursor: move; 
}

#div2 {