原生javascript实现放大镜效果

html部分:

<div class="main">
 <div id="xiaotu" class="xiaotu">
     <img src="http://zhangyan520.com/1.jpg"  />
        <div id="yidong" class="yidong"></div>
    </div>
    <div id="datu" class="datu"><img id="img1" src="http://zhangyan520.com/1.jpg"  /></div>
    <br class="clear" />
</div>

css部分:

* { padding:0px; margin:0px;}
.main { margin:50px;}
.xiaotu, .datu { float:left; position:relative;}
.xiaotu img { width:500px;}
.yidong { width:100px; height:100px; background:#333; filter:alpha(opacity=50); opacity:0.5; position:absolute; left:0px; top:0px; display:none;}
.datu { width:320px; height:320px; overflow:hidden; display:none;}
.datu img { position:absolute;}
.clear { height:0px; clear:both;}

js部分:

window.onload = function(){
 var yidong = document.getElementById(‘yidong‘);
 var xiaotu = document.getElementById(‘xiaotu‘);
 var datu = document.getElementById(‘datu‘);
 var img1 = document.getElementById(‘img1‘);
 var mouseX = 0;
 var mouseY = 0;
 document.onmousemove = function(e){
  //获取鼠标当前位置
  e = e||window.event;
  mouseX = e.clientX;
  mouseY = e.clientY;
  //显示移动的块及大图在规定的范围内,超出范围隐藏
  if(mouseX>xiaotu.offsetLeft&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth&&mouseY>xiaotu.offsetTop&&mouseY<xiaotu.offsetHeight+xiaotu.offsetTop){
   yidong.style.display = datu.style.display = ‘block‘;
   var a = yidong.offsetWidth/2;
   var b = yidong.offsetHeight/2;
   if(mouseX>xiaotu.offsetLeft+a&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth-a&&mouseY>xiaotu.offsetTop+b&&mouseY<xiaotu.offsetHeight+xiaotu.offsetTop-b){
    yidong.style.left = mouseX - xiaotu.offsetLeft - a + ‘px‘;
    yidong.style.top = mouseY - xiaotu.offsetTop - b + ‘px‘;
   }else if(mouseX>xiaotu.offsetLeft&&mouseX<xiaotu.offsetLeft+a&&mouseY>xiaotu.offsetTop+b&&mouseY<xiaotu.offsetTop+xiaotu.offsetHeight-b){
    yidong.style.left = 0;
    yidong.style.top = mouseY - xiaotu.offsetTop - b + ‘px‘;
   }else if(mouseX>xiaotu.offsetLeft+xiaotu.offsetWidth-a&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth&&mouseY>xiaotu.offsetTop+b&&mouseY<xiaotu.offsetTop+xiaotu.offsetHeight-b){
    yidong.style.left = xiaotu.offsetWidth - a*2 + ‘px‘;
    yidong.style.top = mouseY - xiaotu.offsetTop - b + ‘px‘;
   }else if(mouseY>xiaotu.offsetTop&&mouseY<xiaotu.offsetTop+b&mouseX>xiaotu.offsetLeft+a&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth-a){
    yidong.style.left = mouseX - xiaotu.offsetLeft - a + ‘px‘;
    yidong.style.top = 0;
   }else if(mouseY>xiaotu.offsetTop+xiaotu.offsetHeight-b&&mouseY<xiaotu.offsetTop+xiaotu.offsetHeight&mouseX>xiaotu.offsetLeft+a&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth-a){
    yidong.style.left = mouseX - xiaotu.offsetLeft - a + ‘px‘;
    yidong.style.top = xiaotu.offsetHeight - b*2 + ‘px‘;
   }
   //改变大图位置
   var i = img1.offsetWidth/xiaotu.offsetWidth;
   img1.style.left = -yidong.offsetLeft * i + ‘px‘;
   img1.style.top = -yidong.offsetTop * i + ‘px‘;
  }else{
   yidong.style.display = datu.style.display = ‘none‘;
  }
 }
}
时间: 2024-11-05 18:45:50

原生javascript实现放大镜效果的相关文章

JavaScript之放大镜效果2

在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" con

JavaScript之放大镜效果

在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现放大效果: 这个放大效果引用了MagicZoom.css

原生js实现放大镜效果

放大镜效果主要涉及3个鼠标事件: 1.onmouseover,鼠标移入浮动小方块和显示放大的区域显示: 2.onmousemove,鼠标移动,小方块和放大区域一起移动: 3.onmouseout,鼠标移除小方块和放大区域消失. 其实放大镜效果最主要的是小方块与放大区域的比例及位置: <div id="small_box"> <div class="small_Pic"> <div id="float_box">

原生 JavaScript 图片裁剪效果

图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CSS 部分 左侧的裁剪操作区域可以分为三层. 最底层的图片半透明效果:中间层的图片只显示制定区域,其他部分隐藏:最上层为拖拽控制层.最低层和中间层使用同一张图片,利用CSS属性clip控制中间层只显示一部分. 三个层都使用 absolute 绝对定位.下面是 HTML 和 CSS 代码. 1 <div i

javascript -- (js放大镜效果)

<style> * { margin: 0; padding: 0; } </style> <script type = "text/javascript" > var body = document.getElementsByTagName('body')[0]; var box1 = document.createElement('div'); var box2 = document.createElement('div'); var mask

原生js实现的放大镜效果

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style&

原生JS实现简单的淘宝放大镜效果

大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址 亲们可以自行更换; <!DOCTYPE html> <html> <head> <title>放大镜</title> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } body{ hei

javascript html 鼠标放大镜效果

1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #little_image { width: 400px

Javascript:实操---放大镜效果(2)

CSS部分<style type="text/css">/* body{    padding: 10px;} */#minWrap{    width: 350px;    height: 350px;    border: 1px solid #ccc;    position: relative;}    #slider{    height: 175px;    width: 175px;    background-color: yellow;    opacit