图片局部放大效果实现
作为菜鸟的我,来到这里开始学习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;
好了,慢慢学习吧~
加油!