放大镜 鼠标滑入 鼠标滑轮放大

今天是周六，陪朋友逛了一天，回来就写代码，写到吐血了~~~

 已实现功能：
     1、图片局部放大
     2、按住鼠标右键时，滑动鼠标滑轮，可修改放大缩小倍数
本段代码仍存在问题：
     1、代码不够精简
     2、按住鼠标右键移动时，放大镜内图片不能随之放大代码并不完善，有时间再写，

原理图，（本小牛手画的，不喜勿喷~~）大概原理是，等比例背景图定位

最终效果：

黄色部分有张 遮罩层背景图

       

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .mediumDiv{
            position: relative;
            width: 375px;
            height: 281px;
        }
        .mask {
            position: absolute;
            width: 125px;
            height: 125px;
            background: url(2.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
            top: 0;
            left: 0;
        }
        .mImg{
            display: block;
            width: inherit;
            height: inherit;
        }
        .superMask{
            position: absolute;
            width: inherit;
            height: inherit;
            opacity: 0;
            top: 0;
            left: 0;
            cursor: move;
        }
        .largeDiv{
            position: absolute;
            width: 300px;
            height: 300px;
            background: #fff;
            border: 1px solid #ddd;
            top: 5px;
            left: 385px;
            z-index: 999;
            /*display: none;*/
        }
    </style>
</head>
<body>
<div class="mediumDiv">
    <img class="mImg" src="P-s.jpg"/>
    <div class="mask"></div>
    <div class="superMask"></div>
</div>
<div class="largeDiv"></div>
</body>
<script>
    /*
        已实现功能：
        1、图片局部放大
        2、按住鼠标右键时，滑动鼠标滑轮，可修改放大缩小倍数
     本段代码仍存在问题：
     1、代码不够精简
     2、按住鼠标右键移动时，放大镜内图片不能随之放大
    * */
    //为了达到最简效果这里就不引入jQuery拉哈
    //封装selector api 为 $函数简化查询
    function $(selector){
        return document.querySelectorAll(
                selector
        );
    }
    var mImg=$(".mImg")[0],
        mediumDiv=$(‘.mediumDiv‘)[0],
        mask=$(‘.mask‘)[0],
        smask=$(‘.superMask‘)[0],

    // 放大镜里，大原图的实际宽高
    // 这里仅是放大镜效果demo，小图和大图是同一张图片
    // 所以直接用了，实际开发中，这些美工都会给的，不用担心，即便不给咱也有办法搞到，
    // 这里就不废话了哈
        BW= mImg.naturalWidth,
        BH= mImg.naturalHeight,
        BX=BY= 0,
        mw= mImg.width,
        mh= mImg.height,
        largeDiv=$(‘.largeDiv‘)[0];

     var LSIZEW= mediumDiv.offsetWidth,
         LSIZEH= mediumDiv.offsetHeight,
         MSIZE= mask.offsetWidth;

         //mask最大top和left
         MAXT=LSIZEH-MSIZE;
         MAXL=LSIZEW-MSIZE;

    var nBW= BW,
            nBH= BH;
    //放大镜里的背景原图
    var src=mImg.src;
    //查找最后一个.的位置
    var i=src.lastIndexOf(".");
    src= src.slice(0,i-1)+"l"+src.slice(i);
    smask.addEventListener("mouseover",
            function(){
                mask.style.display="block";
                largeDiv.style.cssText=
                        "display:block;"
                        +"background-image:url("+src+")";
            }
    );
    smask.addEventListener("mouseout",
            function(){
                mask.style.display="none";
                largeDiv.style.display="none";
            }
    );
    //为mediumDiv添加鼠标移动事件
    smask.addEventListener("mousemove",drawMask);
    smask.addEventListener("mousemove",mouseMove);
    function mouseMove(e){
        //获得鼠标相对于当前元素的坐标
        var x=e.offsetX,y=e.offsetY;
        //计算mask的top和left
        var l=x-MSIZE/2, t=y-MSIZE/2;
        if(l<0) l=0;
        else if(l>MAXL) l=MAXL;

        if(t<0) t=0;
        else if(t>MAXT) t=MAXT;
        //设置mask的top和left
        mask.style.cssText= "display:block; top:"+t+"px;left:"+l+"px";
        BX=BW*l/mw;BY=BH*t/mh;
            //修改largeDiv的背景图片位置
            largeDiv.style.backgroundPosition=
                    ‘-‘+BX+"px "+(‘-‘+BY)+"px";
    }
    function  drawMask(e){
        //获得鼠标相对于当前元素的坐标
        var x=e.offsetX,y=e.offsetY;
        //计算mask的top和left
        var l=x-MSIZE/2, t=y-MSIZE/2;
        if(l<0) l=0;
        else if(l>MAXL) l=MAXL;

        if(t<0) t=0;
        else if(t>MAXT) t=MAXT;
        //设置mask的top和left
        mask.style.cssText= "display:block; top:"+t+"px;left:"+l+"px";
        BX=BW*l/mw;BY=BH*t/mh;
    }
    smask.addEventListener(‘mouseup‘,function(e){
        smask.addEventListener("mousemove",mouseMove);
    });
    smask.addEventListener(‘mousedown‘,function(e){
        if(event.button==2) { // 鼠标右键按下
            smask.removeEventListener("mousemove", mouseMove);
        }
   });
//  判断滚轮向上或向下在浏览器中也要考虑兼容性，
// 现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，
// 其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，
// detail只取±3，wheelDelta只取±120
//     《不同分辨率 值不同，比如我的1920*1080的 是150》，其中正数表示为向上，负数表示向下。
    smask.addEventListener(‘mousewheel‘,function(e){   //Firefox下不能运行，有时间在做兼容性哈哈

        if(e.wheelDelta>0){ // 向上滑动
            nBW  = nBW + (BW/BH)*100;   //宽高等比例放大
            nBH  = nBH + 100;

        }else if(e.wheelDelta<0){  //向下滑动
            nBW  = nBW - (BW/BH)*100;
            nBH  = nBH - 100;
        }
        nBW= nBW<largeDiv.offsetWidth? largeDiv.offsetWidth : nBW;
        nBH= nBH<largeDiv.offsetHeight? largeDiv.offsetHeight : nBH;
        var offsetX=nBW-BW,offsetY=nBH-BH;
        //修改largeDiv的背景图片大小
        largeDiv.style.cssText=
                "display:block;"
                +"background-image:url("+src+")";
        largeDiv.style.backgroundSize=nBW+"px "+nBH+"px";
            //修改largeDiv的背景图片位置
                largeDiv.style.backgroundPosition=
                        ‘-‘+(BX+offsetX/2)+"px "+(‘-‘+(BY+offsetY/2))+"px";
         });

</script>
</html>
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .mediumDiv{            position: relative;            width: 375px;            height: 281px;        }        .mask {            position: absolute;            width: 125px;            height: 125px;            background: url(2.png) repeat scroll 0 0 rgba(0, 0, 0, 0);            top: 0;            left: 0;        }        .mImg{            display: block;            width: inherit;            height: inherit;        }        .superMask{            position: absolute;            width: inherit;            height: inherit;            opacity: 0;            top: 0;            left: 0;            cursor: move;        }        .largeDiv{            position: absolute;            width: 300px;            height: 300px;            background: #fff;            border: 1px solid #ddd;            top: 5px;            left: 385px;            z-index: 999;            /*display: none;*/}    </style></head><body><div class="mediumDiv">    <img class="mImg" src="P-s.jpg"/>    <div class="mask"></div>    <div class="superMask"></div></div><div class="largeDiv"></div></body><script>    /*        已实现功能：        1、图片局部放大        2、按住鼠标右键时，滑动鼠标滑轮，可修改放大缩小倍数     本段代码仍存在问题：     1、代码不够精简     2、按住鼠标右键移动时，放大镜内图片不能随之放大    * */    //为了达到最简效果这里就不引入jQuery拉哈    //封装selector api 为 $函数简化查询function $(selector){        return document.querySelectorAll(                selector        );    }    var mImg=$(".mImg")[0],        mediumDiv=$(‘.mediumDiv‘)[0],        mask=$(‘.mask‘)[0],        smask=$(‘.superMask‘)[0],

// 放大镜里，大原图的实际宽高    // 这里仅是放大镜效果demo，小图和大图是同一张图片    // 所以直接用了，实际开发中，这些美工都会给的，不用担心，即便不给咱也有办法搞到，    // 这里就不废话了哈BW= mImg.naturalWidth,        BH= mImg.naturalHeight,        BX=BY= 0,        mw= mImg.width,        mh= mImg.height,        largeDiv=$(‘.largeDiv‘)[0];

var LSIZEW= mediumDiv.offsetWidth,         LSIZEH= mediumDiv.offsetHeight,         MSIZE= mask.offsetWidth;

//mask最大top和leftMAXT=LSIZEH-MSIZE;         MAXL=LSIZEW-MSIZE;

var nBW= BW,            nBH= BH;    //放大镜里的背景原图var src=mImg.src;    //查找最后一个.的位置var i=src.lastIndexOf(".");    src= src.slice(0,i-1)+"l"+src.slice(i);    smask.addEventListener("mouseover",            function(){                mask.style.display="block";                largeDiv.style.cssText=                        "display:block;"+"background-image:url("+src+")";            }    );    smask.addEventListener("mouseout",            function(){                mask.style.display="none";                largeDiv.style.display="none";            }    );    //为mediumDiv添加鼠标移动事件smask.addEventListener("mousemove",drawMask);    smask.addEventListener("mousemove",mouseMove);    function mouseMove(e){        //获得鼠标相对于当前元素的坐标var x=e.offsetX,y=e.offsetY;        //计算mask的top和leftvar l=x-MSIZE/2, t=y-MSIZE/2;        if(l<0) l=0;        else if(l>MAXL) l=MAXL;

if(t<0) t=0;        else if(t>MAXT) t=MAXT;        //设置mask的top和leftmask.style.cssText= "display:block; top:"+t+"px;left:"+l+"px";        BX=BW*l/mw;BY=BH*t/mh;            //修改largeDiv的背景图片位置largeDiv.style.backgroundPosition=                    ‘-‘+BX+"px "+(‘-‘+BY)+"px";    }    function  drawMask(e){        //获得鼠标相对于当前元素的坐标var x=e.offsetX,y=e.offsetY;        //计算mask的top和leftvar l=x-MSIZE/2, t=y-MSIZE/2;        if(l<0) l=0;        else if(l>MAXL) l=MAXL;

if(t<0) t=0;        else if(t>MAXT) t=MAXT;        //设置mask的top和leftmask.style.cssText= "display:block; top:"+t+"px;left:"+l+"px";        BX=BW*l/mw;BY=BH*t/mh;    }    smask.addEventListener(‘mouseup‘,function(e){        smask.addEventListener("mousemove",mouseMove);    });    smask.addEventListener(‘mousedown‘,function(e){        if(event.button==2) { // 鼠标右键按下smask.removeEventListener("mousemove", mouseMove);        }   });//  判断滚轮向上或向下在浏览器中也要考虑兼容性，// 现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，// 其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，// detail只取±3，wheelDelta只取±120//     《不同分辨率 值不同，比如我的1920*1080的 是150》，其中正数表示为向上，负数表示向下。smask.addEventListener(‘mousewheel‘,function(e){   //Firefox下不能运行，有时间在做兼容性哈哈

if(e.wheelDelta>0){ // 向上滑动nBW  = nBW + (BW/BH)*100;   //宽高等比例放大nBH  = nBH + 100;

}else if(e.wheelDelta<0){  //向下滑动nBW  = nBW - (BW/BH)*100;            nBH  = nBH - 100;        }        nBW= nBW<largeDiv.offsetWidth? largeDiv.offsetWidth : nBW;        nBH= nBH<largeDiv.offsetHeight? largeDiv.offsetHeight : nBH;        var offsetX=nBW-BW,offsetY=nBH-BH;        //修改largeDiv的背景图片大小largeDiv.style.cssText=                "display:block;"+"background-image:url("+src+")";        largeDiv.style.backgroundSize=nBW+"px "+nBH+"px";            //修改largeDiv的背景图片位置largeDiv.style.backgroundPosition=                        ‘-‘+(BX+offsetX/2)+"px "+(‘-‘+(BY+offsetY/2))+"px";         });

</script></html>
时间： 2024-10-22 04:28:19

放大镜 鼠标滑入 鼠标滑轮放大的相关文章

利用jQuery实现，蒙板随鼠标滑入滑出

今天学习了jQuery的一些知识点,做了一个练习:实现蒙板随鼠标移动,从元素的四个方向滑入滑出.如图: jQuery知识点: 定位:获取相对于父元素的偏移量           position().left           position().top 获取元素相对于当前窗口的偏移量           offset().left           offset().top 步骤: 1.创建父元素.当前对象.蒙板 代码如下: <div class="wrap">  

[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例

转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮,为了模拟鼠标移入或移出时动态显示下拉列表啥的效果,我们使用了动态面板来做处理.当然了,条条大路通罗马,这条大路也许不是最佳的,仅供参考. 1.拖一个动态面板到编辑区: 2.双击添加一个状态,我们命名为“正常”,以代表鼠标没有滑过时的状态: 3.双击“正常”状态,进入正常状态编辑页面: 4.在动态面

鼠标滑入滑出事件

$("#clo").mouseover(function(){//当id为clo的元素 鼠标滑入将id为hint_closs元素显示 $("#hint_closs").show(); }); $("#clo").mouseout(function(){//当id为clo的元素 鼠标滑出将id为hint_closs元素隐藏       $("#hint_closs").hide(); });

鼠标滑过列表图片放大，带列表序列号自动生成效果

请转载此文的朋友务必附带原文链接,谢谢. 原文链接:http://xuyran.blog.51cto.com/11641754/1861924 这里我只把关键代码给贴出来. html: <div class="hot-exchange">      <ul>      <li class="active clear">      <a href="">      <div class=&quo

二级下拉列表，滑入显示

主要知识点: <ul>的<li>下嵌套<ul>和<li> 将二级菜单使用的ul的display设置为none 使用li:hover时,将鼠标滑入一级菜单的li时,将二级菜单的display设置为block; 源代码如下: <!DOCTYPE html><html><head>  <title></title>  <meta charset="utf-8"></h

基于CSS3鼠标滑过放大突出效果

还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种突出放大的CSS3动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <ul class="evenflow sample_1"> <li class="e

JQuery实现鼠标滑过显示导航下拉列表

我们往往是将同一级目录下的栏目先隐藏起来,当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表,下面为大家讲解下是如何实现的,当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 <html> <h

酷炫的鼠标滑过添加遮罩层效果

今天,没错又是今天,今天做的事情还真是多呢~还修了洗衣机,貌似除了写代码不行,样样都行了呢~ 好了,言归正传.今天在浏览一个网页时,鼠标滑过它的图片,出现了一种我感觉很酷炫的效果.像这样: 自己感受下~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l