简单实用的图片放大效果

最新推荐文章于 2024-08-23 14:03:47 发布

haiwei_sun

最新推荐文章于 2024-08-23 14:03:47 发布

阅读量541

点赞数

分类专栏： jquery 文章标签： function xhtml div 2010 filter html

jquery 专栏收录该内容

102 篇文章 0 订阅

订阅专栏

<!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>
<title>简单实用的图片放大效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
#large{width:650px;position:absolute;top:100px;left:100px;}
#large #smallimg{width:300px;position:relative;float:left;border:1px solid #CCCCCC;}
#large #smallimg #mark{width:100px;height:100px;border:1px solid #CCCCCC;position:absolute;display:none;z-index:10;filter:alpha(opacity=40);opacity:.4;background:#CCCCCC;cursor:crosshair;}
#large #smallimg img{width:300px;z-index:1;}
#large #largeimg{width:225px;height:225px;float:right;overflow:hidden;}
</style>
<script language="javascript">
function showmark(e){
   var large=document.getElementById("large");
   var smallimg=document.getElementById("smallimg");
   var mark=document.getElementById("mark");
   var e=e||window.event;
   mark.style.display="block";
   smallimg.οnmοusemοve=movemark;
   smallimg.οnmοuseοut=hidemark;
}
function hidemark(){
   var mark=document.getElementById("mark");
   var largeimg=document.getElementById("largeimg");
   mark.style.display="none";
   largeimg.style.background="";
}
function movemark(e){
   var large=document.getElementById("large");
   var smallimg=document.getElementById("smallimg");
   var largeimg=document.getElementById("largeimg");
   var mark=document.getElementById("mark");
   var e=e||window.event;
   var left=e.clientX-large.offsetLeft-50;
   var top=e.clientY-large.offsetTop-50;
   mark.style.left=left+"px";
   mark.style.top=top+"px";
   if(left<0){
       mark.style.left=0+"px";
   }
   else{
       if(left>200){
           mark.style.left=200+"px";
       }
       else{
           mark.style.left=left+"px";
       }
   }
   if(top<0){
       mark.style.top=0+"px";
   }
   else{
       if(top>125){
           mark.style.top=125+"px";
       }
       else{
           mark.style.top=top+"px";
       }
   }
   largeimg.style.background="url(/get_pic/2010/03/20100507135839310.jpg) "+"-"+parseInt(mark.style.left)*1024/300+"px"+" -"+parseInt(mark.style.top)*1024/300+"px"+" no-repeat";
}
</script>
</head>
<body>

<div id="large">
<div id="smallimg" οnmοuseοver="showmark(event)">
    <div id="mark"></div>
    <img alt="js 简单实用的图片放大效果" src="/get_pic/2010/03/20100507135839310.jpg">
</div>
<div id="largeimg"></div>
</div>
</body>
</html>

haiwei_sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单实用的图片放大效果

简单实用的图片放大效果与之间-->#large{width:650px;position:absolute;top:100px;left:100px;}#large #smallimg{width:300px;position:relative;float:l
复制链接

扫一扫

专栏目录