您的位置：首页 > 其它

简单实用的图片放大效果

2011-08-20 22:57 381 查看

<!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.onmousemove=movemark;

smallimg.onmouseout=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" onmouseover="showmark(event)">

<div id="mark"></div>

<img alt="js 简单实用的图片放大效果" src="/get_pic/2010/03/20100507135839310.jpg">

</div>

<div id="largeimg"></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航