当鼠标经过图片时，局部放大

gongyuelx 2010-03-18 04:11:59

希望网页上的图片，当鼠标经过图片时，局部放大。而且这个放大效果在原图的地方，原图的其他位置不变。不知道如何实现/

...全文

418 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

gongyuelx 2010-03-18

打赏
举报

[Quote=引用 3 楼 ws_hgo 的回复:]
HTML code
<!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>
……
[/Quote]
不是小图放大。。是一张大图的局部放大显示。。有点用了放大镜的感觉

gongyuelx 2010-03-18

打赏
举报

[Quote=引用 2 楼 lieri111 的回复:]
楼主我的资源里有，你自己下吧，不需要资源分
[/Quote]
谢谢。你的代码好不错。。。
不过。我要的不是这个效果。。。我没有说清楚。
就是一张很大的图。譬如说地图。。。放在网页中的话是看不清具体图标的。我希望鼠标经过的地方能够放大显示。可以被看清。。。不知道这个怎么弄。。

ws_hgo 2010-03-18

打赏
举报

<!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>  

    <style type="text/css">  

     #demo{overflow:hidden;width:120px;text-align:center;padding:10px;}   

     #demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}   

     #bigimage{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}   

    </style>  

</head>  

<body>  

<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">  

<img alt="美女" src="../img/123592LD140-1KT7.jpg" />  

</div>  

<div id="bigimage"></div>  

<script type="text/javascript">  

var demo = document.getElementById("demo");   

var gg = demo.getElementsByTagName("img");   

var ei = document.getElementById("bigimage");   

for(var i=0; i<gg.length; i++){   

 var ts = gg[i];   

 ts.onmousemove = function(event){   

  eventevent = event || window.event;   

  ei.style.display = "block";   

  ei.innerHTML = '<img src="' + this.src + '" />';   

  ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";   

  ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";   

 }   

 ts.onmouseout = function(){   

  ei.innerHTML = "";   

  ei.style.display = "none";   

 }   

 ts.onclick = function(){   

  window.open( this.src );   

 }   

}   

</script>  

</body>  

</html>  





本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ws_hgo/archive/2010/01/16/5198209.aspx