JavaScript实现图片放大镜效果

本文实例为大家分享了js实现图片放大镜效果的具体代码,供大家参考,具体内容如下

1、结构布局HTML代码

<div class="leftcon" id="left">
 <img src="~/Content/images/风景-1.jpg" />
 <div class="slide_box" id="box"></div>
</div>
<div class="rightcon" id="right">
 <img src="~/Content/images/风景-1.jpg" />
</div>

2、修饰结构css样式代码

img {
display: block;
}.leftcon {
width: 350px;height: 350px;
margin: 100px 20px 0px 312px;
float: left;position: relative;
box-shadow: 3px 3px 10px 0 #111111; /*给图片施加阴影效果 */
-webkit-box-shadow: 3px 3px 10px 0 #111111; /*兼容性处理*/
-moz-box-shadow: 3px 3px 10px 0 #111111;
}.leftcon img {
width: 100%;height: 100%;
}.leftcon .slide_box {
display: none; /*将小方块盒子隐藏*/
position: absolute;top: 0;left: 0;
width: 175px;height: 175px;
background: #000;opacity: 0.3;
cursor: move; /*改变鼠标的形状*/
}.rightcon {
display: none; /*将右边div隐藏*/
width: 350px;height: 350px;
margin-top: 100px;float: left;
overflow: hidden;position: relative;
}.rightcon img {
width: 200%;height: 200%;
position: absolute;left: 0px;top: 0px;
}

3、js获取事件对象

1)、Event是获取事件对象,对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、
鼠标的位置、鼠标按钮的状态,envet是windows的一个属性。 放大镜实现方法(获取右边图片定位)
2)、e.clientY:返回事件触发时鼠标相对于元素视口的Y坐标。
e.clientX:返回事件触发时鼠标相对于元素视口的X坐标。
这里的元素视口实际上代指就是浏览器,clientX是鼠标距离浏览器左边框的距离,
clientY是鼠标距离浏览器上边框的距离。
offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。
这里就是左边的div相对于body即浏览器窗口的纵向距离
offsetLeft获取对象相对于版面或由offsetLeft属性指定的父坐标的计算顶端位置。
这里就是左边的div相对于body即浏览器窗口的纵横向距离
offsetHeight是对象的可见高度。这里是指小滑块的高度
offsetHeight是对象的可见宽度。这里是指小滑块的宽度

var leftone = document.getElementById('left');
var rightone = document.getElementById('right');
var box = document.getElementById('box');
var rimg = rightone.getElementsByTagName("img")[0];
function getPosition(e){ //这里的参数e就是代表event
 //首先我们要去判断事件源,获取事件源,也就是e
  var e=e||window.event;  //实现兼容
  //理解:
  //这个表达式写全是这样:var e=event?event||window.event;
  //如果存在event,那么var e=event;而如果不存在event,
  //那么var e=window.event.那么可以看出确实能实现兼容
 var top = e.clientY-leftone.offsetTop-box.offsetHeight/2;
 //计算小图容器里的鼠标坐标(要减去最外层的偏移)
 var left = e.clientX-leftone.offsetLeft-box.offsetWidth/2;
 //这里为什么除以2?是因为我们不除以2的话,事件源也就是鼠标就在这个小滑块的的右下角,并不美观
  //我们要让鼠标位于滑块的中心,所以宽高各减去一半

    //边界判断
    //获取小滑块最大纵向移动距离
    var maxtop = leftone.offsetHeight - box.offsetHeight;
    //获取小滑块最大横向移动距离
    var maxleft = leftone.offsetWidth - box.offsetWidth;
    var mintop = 0; //获取小滑块最小纵向移动距离
    var minleft = 0; //获取小滑块最大纵向移动距离
    var mvtop; //定义小滑块的纵向移动距离
    var mvleft; //定义小滑块的横向移动距离
    // 判断
    if (top<mintop) {
    box.style.top = mintop + "px";
      mvtop = mintop;
      //理解:
  //top是鼠标到浏览器的垂直距离-左边div顶部到浏览器的垂直距离-小滑块的高度的一半。
  //那么现在鼠标在小滑块的中心,也就是说,top就等于小滑块的顶部到左边div的垂直距离
  //如果top<0,就是说小滑块和左边div顶部重合,就让小滑块的top值为0,即鼠标继续向上移动,
  //小滑块不在移动,从而让小滑块的移动范围不能超过左边div的宽高范围
  //下方同理
    }else if(top>maxtop){
      box.style.top = maxtop + "px";
      mvtop = maxtop;
 //如果top>maxtop,就是说小滑块和左边div底部重合,就让小滑块的top值为maxtop,
 //即鼠标继续向下移动,小滑块不在移动,从而让小滑块的移动范围不能超过左边div的宽高范围
    }else{
      box.style.top = top + "px";
      mvtop = top;
      //不超过边界,则小滑块的垂直移动距离就等于top,即小滑块的顶部到左边div的垂直距离
    }
    if(left<minleft){
      box.style.left = minleft + "px";
      mvleft = minleft
    }else if(left>maxleft){
      box.style.left = maxleft + "px";
      mvleft = maxleft
    }else{
      box.style.left = left + "px";
      mvleft = left;
    }
 //因为右边div的图片是左边div的图片的两倍,而左边div和右边div都是小滑块的宽高的两倍,
 //而要让右边div放大左边的小滑块的包围图片,所以右边大图的定位坐标是小滑块的两倍,这样才能进行映射
 //右侧图片跟着运动:左侧小滑块移动多少,右侧跟着移动他的2倍即可
    rimg.style.top = -mvtop*2 + "px";
    rimg.style.left = -mvleft*2 + "px";
 }

4、鼠标移入、移出事件

左侧盒子鼠标移入,小滑块和右侧图片显示,衔接鼠标移动效果
onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡。

//鼠标移动效果
leftone.onmousemove = function(e){
 var e=e||window.event; //判断事件源
 box.style.display = "block";
    getPosition(e);
 rightone.style.display = "block";
}
//鼠标移出效果
leftone.onmouseleave = function(e){
 var e=e||window.event; //判断事件源
    box.style.display = "none";
    rightone.style.display = "none";
}

5、效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 奇妙的Javascript图片放大镜

    在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一

  • 用js实现放大镜的效果的简单实例

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

  • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi

  • JavaScript 图片切割效果(放大镜)第1/4页

    上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了. 近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了. 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 . 效果预览请看这里 完整实例下载代码太多贴不出来,只好给个效果图: 程序说明 这个效果主要分三个部分:层的拖放.层的缩放.图片切割(包括预览). 其中 层的拖放 和 层的缩放 我已经在其他两篇

  • JS实现图片放大镜效果的方法

    本文实例讲述了JS实现图片放大镜效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

  • 原生js写的放大镜效果

    我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动.不废话了,看代码. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <meta name="Keywords" content=""> <me

  • js放大镜放大图片效果

    我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le

  • JavaScript 图片放大镜(可拖放、缩放效果)第1/4页

    前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

  • JavaScript图片放大镜效果代码[代码比较简单]

    #div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op

  • 电子商务网站上的常用的js放大镜效果

    复制代码 代码如下: jsFiddleRun again Edit this fiddle Result HTML <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>放大镜</title> <style> img{ vertical-align:bottom;} .mod_zoom{ overflow:hidden; zoom:

随机推荐