javascript实现放大镜功能

本文实例为大家分享了javascript实现放大镜功能的具体代码，供大家参考，具体内容如下

描述：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反

如何设计

• 页面元素
• 技术要点：事件捕捉和定位
• 难点：计算

涉及技术

• onmouseover：当鼠标指针移动到指定的对象上时发生
• onmouseout：鼠标指针移出指定对象时发生
• onmousemove：鼠标指针移动时发生
• offsetLeft | offsetTop | offsetWidth | offsetHeight
  
• event.clientX | event.clientY
  

偏移量与style.left

• style.left返回字符串，例如30px，而offsetLeft返回数字30。
• style.left可以读和写，offsetLeft是只读的。如果我们想改变div的位置，我们可以修改style.left.
• style.left应事先定义，否则值为空。

需要考虑

• 如何使小画面上的放大镜与大图同步移动
• IE兼容性问题
  

代码实现

 
 
 
 
 *{
  margin: 0;
  padding: 0;
 }
 #wrap{
  width: 400px;
  height: 255px;
  margin: 50px;
  border: 1px solid #ccc;
  display: block;
  position: relative;
 }
 #small-box{
  position: relative;
  z-index: 1;
 }
 #float-box{
  width: 160px;
  height: 120px;
  position: absolute;
  background-color: #ffffcc;
  border:1px solid #ccc;
  filter: alpha(opacity = 50);
  opacity: .5;
  display: none;
 }
 #mask{
  position: absolute;
  display: block;
  width: 400px;
  height: 255px;
  z-index: 10;
  background-color: #ffffff;
  filter: alpha(opacity = 0);
  opacity: 0;
  cursor: move;
 }
 #big-box{
  position: absolute;
  top: 0;
  left: 460px;
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  z-index: 1;
  display: none;
 }
 #big-box img{
  position: absolute;
  z-index: 5; 
 }
 



 
 
  
  
  
 
 
  
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。