マウスは画像を通して大きくなり、簡単に実現します.
2473 ワード
簡単なマウスは画像を通して大きくなります.
<style type="text/css">
.demo{ overflow:hidden; width:150px; text-align:center; padding:5px;}
.demo img{ border:none; width:130px; border:5px solid #f4f4f4; }
#Big_Images{ position:absolute; display:none; z-index:2; }
#Big_Images img{ border:5px solid #f4f4f4; }
</style>
<body>
<div id="Big_Images"><img src=""></div> <!-- -->
<div id="box">
<div class="demo">
<img src="../Image/ .jpg">
</div>
<div class="demo">
<img src="../Image/ 1.jpg">
</div>
<div class="demo">
<img src="../Image/ 2.jpg">
</div>
<div class="demo">
<img src="../Image/ 3.jpg">
</div>
</div>
<script type="text/javascript">
var maxsize = 650; //
var img = document.getElementById("box").getElementsByTagName("img"); //
var L = img.length; //
var bigpic = document.getElementById("Big_Images"); //
for(i=0; i<L; i++)
{
img[i].onmousemove = function(){ //
/* start*/
var thisimg = new Image(); //
thisimg.src = "http://blog.51cto.com/viewpic.php?refimg=" + this.src; //
var r = thisimg.width/thisimg.height;
//
if (r>=1)
{
w = maxsize;
h = maxsize/r;
}
else
{
w = maxsize*r;
h = maxsize;
}
// img
bigpic.getElementsByTagName("img")[0].style.width = w+"px";
bigpic.getElementsByTagName("img")[0].style.height = h+"px";
bigpic.style.display = "block";
bigpic.style.left = this.offsetWidth + 30 + "px";
bigpic.style.top = document.body.scrollTop + (event|| window.event).clientY - 340 + "px";
bigpic.getElementsByTagName("img")[0].src = "http://blog.51cto.com/viewpic.php?refimg=" + this.src; // img
}
}
</script>