分别用javascript，jquery实现对图片的放大镜效果

来源：互联网发布：stm32单片机arm的区别编辑：程序博客网时间：2024/06/05 11:37

javascript实现：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>#dsmall{    height: 200px;    width: 200px;    border: solid 1px;    float: left;    position: relative;    left: 5px;    top: 5px;    overflow: hidden;}#dsmall img{    height: 200px;}#smallblock{    height: 40px;    width: 40px;    background-color: white;    opacity: 0.5;    position: absolute;    left: 0px;    top: 0px;    display: none;}#dbig{   /* display: none;*/    height: 400px;    width: 400px;    position: absolute;    left: 250px;    top:13px;    overflow: hidden;    display: none;}#bigimg{    height: 480px;    position: absolute;    left: 0px;    right: 0px;    } </style></head><body><div id="dsmall"><img src="img/small.jpg" alt=""><div id="smallblock"></div></div> <div id="dbig"><img src="img/big.jpg" alt="" id="bigimg"> </div> <script src="js/jquery.min.js"></script> <script>       var oSmall=document.getElementById("dsmall");       var oSBlock=document.getElementById("smallblock");       var oBig=document.getElementById("dbig");       var oBImg=document.getElementById("bigimg");       oSmall.onmouseover = function(){           oSBlock.style.display='block';           oBig.style.display='block';       }       oSmall.onmouseout = function(){            oSBlock.style.display='none';            oBig.style.display='none';       }       oSmall.onmousemove = function(e){           var e=e||window.event;           var sleft=e.clientX-oSmall.offsetLeft-oSBlock.offsetWidth/2;           var stop=e.clientY-oSmall.offsetTop-oSBlock.offsetHeight/2;           if(sleft>oSmall.offsetWidth-oSBlock.offsetWidth){               sleft=oSmall.offsetWidth-oSBlock.offsetWidth;           }           if(sleft<0){            sleft=0;           }           if(stop>oSmall.offsetHeight-oSBlock.offsetHeight){               stop=oSmall.offsetHeight-oSBlock.offsetHeight;           }           if(stop<0){            stop=0;           }           oSBlock.style.left=sleft+'px';           oSBlock.style.top=stop+'px';           var fleft=sleft/(oSmall.offsetWidth-oSBlock.offsetWidth);           var ftop=stop/(oSmall.offsetHeight-oSBlock.offsetHeight);           oBImg.style.left=fleft*(oBig.offsetWidth-oBImg.offsetWidth)+'px';           oBImg.style.top=ftop*(oBig.offsetHeight-oBImg.offsetHeight)+'px';       } </script></body></html>

jquery实现：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>#dsmall{    height: 200px;    width: 200px;    border: solid 1px;    float: left;    position: relative;    left: 5px;    top: 5px;    overflow: hidden;}#dsmall img{    height: 200px;}#smallblock{    height: 40px;    width: 40px;    background-color: white;    opacity: 0.5;    position: absolute;    left: 0px;    top: 0px;    display: none;}#dbig{   /* display: none;*/    height: 400px;    width: 400px;    position: absolute;    left: 250px;    top:13px;    overflow: hidden;    display: none;}#bigimg{    height: 480px;    position: absolute;    left: 0px;    right: 0px;    } </style></head><body><div id="dsmall"><img src="img/small.jpg" alt=""><div id="smallblock"></div></div> <div id="dbig"><img src="img/big.jpg" alt="" id="bigimg"> </div> <script src="js/jquery.min.js"></script> <script>$(function(){  var $dsmall=$('#dsmall');  var $smallblock=$('#smallblock');  var $dbig=$('#dbig');  var $bigimg=$('#bigimg');    $dsmall.hover(function(){          $smallblock.show();          $dbig.show();    },function(){          $smallblock.hide();          $dbig.hide();    })    $dsmall.mousemove(function(e){         var sleft=e.pageX-$dsmall.offset().left-$smallblock.width()/2;         var stop=e.pageY-$dsmall.offset().top-$smallblock.height()/2;         if(sleft<0){            sleft=0;           }         if(stop<0){            stop=0;           }        if(sleft>$dsmall.width()-$smallblock.width())        {          sleft=$dsmall.width()-$smallblock.width();        }        if(stop>$dsmall.height()-$smallblock.height())        {          stop=$dsmall.height()-$smallblock.height();        }         $smallblock.css({          left:sleft,          top:stop         });         var fleft=sleft/($dsmall.width()-$smallblock.width());         var ftop=stop/($dsmall.height()-$smallblock.height());         var bleft=fleft*($dbig.width()-$bigimg.width());         var btop=ftop*($dbig.height()-$bigimg.height());         $bigimg.css({          left:bleft,          top:btop         })    })}) </script></body></html>

这里写图片描述

0 0

分别用javascript，jquery实现 对图片的放大镜效果

分别用javascript，jquery实现对图片的放大镜效果