图片局部放大效果实现
作为菜鸟的我，来到这里开始学习javascript感到非常兴奋啊！
因为js可以实现很多我想实现的页面效果，而这些是我以前只是知道，不知道自己可以怎么写的。
好了，刚才看到宿舍一哥们班的老师上课写的一个图片局部放大的js效果，学来了，而且自己改进了很多。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#toolbar
{
width:300px;
height:300px;
position:absolute;
display:none;
overflow:hidden;
}
</style>
<script type="text/javascript">
window.onload = function () {
var vtoolbar = document.getElementById("toolbar");
var vsmallImg = document.getElementById("sImg");
//小图片的鼠标移动事件
vsmallImg.onmousemove = function () {
//获取鼠标偏移量
var xOffset = event.offsetX;
var yOffset = event.offsetY;
//创建详细图
var ImgBar = document.createElement("img");
ImgBar.src = this.src; //路径为当前图片路径
//清空Div
if (vtoolbar.innerHTML) {
vtoolbar.innerHTML = "";
}
vtoolbar.appendChild(ImgBar);
vtoolbar.style.display = "block";
vtoolbar.style.left = event.clientX + 50 + "px";
vtoolbar.style.top = event.clientY + 50 + "px";
//设置图片偏移量
ImgBar.style.marginLeft = -xOffset * 10+100;
ImgBar.style.marginTop = -yOffset * 10+100;
}
//鼠标离开清空Div
vsmallImg.onmouseout = function () {
//alert("out");
vtoolbar.innerHTML = "";
vtoolbar.style.display = "none";
}
}
</script>
</head>
<body>
<div id="toolbar"">
</div>
<div style="width:100px ; margin:0 auto; margin-top:200px;">
<img id="sImg" src="images/caoyi.jpg" height="120" width="160"/>
</div>
</body>
</html>
不过还是有很多问题的，比如这里怎么才能自动获取原图片的长宽呢？
在偏移量的设置时是：局部图片.marginLeft=-1*(鼠标当前偏移量)*倍数+常数；
这里的倍数是：原始图片/缩略图
常数是偏移点相对局部图Div的偏移量：Div/2;
好了，慢慢学习吧~
加油！
