网页图片放大镜特效

稿源：互联网 2022-04-02 21:40:12 点击： 24683 撤稿纠错

网页上常见的放大镜效果，效果本身并不需要太多介绍；另外，也有许多写好的放大镜程序可以直接使用，但如果只是遇到一个效果就套用，而不是由自己开发出来，那么有更多的功能扩展就没法实现了。

以下讨论的是和放大镜相关的网页图片放大镜特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜 - 妙味课堂 - www.miaov.com</title>
<style type="text/css">
#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
 var aEle=oParent.getElementsByTagName('*');
 var aTmp=[];
 var i=0;
 
 for(i=0;i<aEle.length;i++)
 {
  if(aEle[i].className==sClass)
  {
   aTmp.push(aEle[i]);
  }
 }
 
 return aTmp;
}
window.onload=function ()
{
 var oDiv=document.getElementById('div1');
 var oMark=getByClass(oDiv, 'mark')[0];
 var oFloat=getByClass(oDiv, 'float_layer')[0];
 var oBig=getByClass(oDiv, 'big_pic')[0];
 var oSmall=getByClass(oDiv, 'small_pic')[0];
 var oImg=oBig.getElementsByTagName('img')[0];
 
 oMark.onmouseover=function ()
 {
  oFloat.style.display='block';
  oBig.style.display='block';
 };
 
 oMark.onmouseout=function ()
 {
  oFloat.style.display='none';
  oBig.style.display='none';
 };
 
 oMark.onmousemove=function (ev)
 {
  var oEvent=ev||event;
  
  var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
  var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
  
  if(l<0)
  {
   l=0;
  }
  else if(l>oMark.offsetWidth-oFloat.offsetWidth)
  {
   l=oMark.offsetWidth-oFloat.offsetWidth;
  }
  
  if(t<0)
  {
   t=0;
  }
  else if(t>oMark.offsetHeight-oFloat.offsetHeight)
  {
   t=oMark.offsetHeight-oFloat.offsetHeight;
  }
  
  oFloat.style.left=l+'px';
  oFloat.style.top=t+'px';
  
  var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
  var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
  
  oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
  oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
 };
};
</script>
</head>
<body>
<div id="div1">
    <div class="small_pic">
  <span class="mark"></span>
        <span class="float_layer"></span>
        <img src="http://www.miaov.com/miaov_demo/hand_lens/images/small.png" alt="妙味课堂 - 放大镜图片一" longdesc="http://www.miaov.com" />
    </div>
    <div class="big_pic">
  <img src="http://www.miaov.com/miaov_demo/hand_lens/images/big.png" alt="妙味课堂 - 放大镜图片二" longdesc="http://www.miaov.com" />
 </div>
</div>
</body>
</html>

关于网页图片放大镜特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011033069135.shtml方便下次再访问哦。

·上一篇： 仿iPhone手机图片查看器的效果
·下一篇： jQuery编写的常用商城商品属性选择器特效代码

网页图片放大镜特效

文章分类LIST >>返回首页

最新游戏

最新新闻