图片随着鼠标的滚动而滚动,

 

·

HTML+CSS代码如下;

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
#home_bottom {color:#008CD7;text-align:center;font-size:14px;}
body,div,ul,li{margin: 0;padding: 0;font-size: 14px;font-family: Verdana, Arial, Helvetica, sans-serif;}
ul,li{list-style: none;}
#div1{width:450px;height: 300px;margin: 50px auto 0; }
li{float: left;margin-right: 10px;}
#tooltip{border: 2px solid #0077B0;padding: 1px;position: absolute;display: none;background: #ffffff;}
</style>
</head>
<body>
<h3 id="home_top">图片跟随鼠标放大显示并移动 - Powered By <a href="http://taobao.fm/"target="_blank">broszhu</a>  博客网址:<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
<p id="home_bottom">学习JavaScript是一件很有趣的事,可以做出很多自豪的小玩意!--broszhu (这个页面是实现原理:<a href="#" target="_blank">点此查看</a></p>
<div id="div1">
<h3>图片跟随鼠标放大显示并移动</h3>
<ul>
<li><a href="img/1_bigger.jpg" class="tooltip"><img src="img/1.jpg" alt="第一幅图片"/></a></li>
<li><a href="img/2_bigger.jpg" class="tooltip"><img src="img/2.jpg" alt="第二幅图片"/></a></li>
<li><a href="img/3_bigger.jpg" class="tooltip"><img src="img/3.jpg" alt="第三幅图片"/></a></li>
<li><a href="img/4_bigger.jpg" class="tooltip"><img src="img/4.jpg" alt="第四幅图片"/></a></li>
</ul>
</div>
</body>
</html>

·

javascript代码如下:

<script src="js/DOM.js"></script>
<script>
var oTooltips=DOM.getElesByClass("tooltip");
for(var i=0;i<oTooltips.length;i++){
oTooltips[i].onmouseover=function(e){
var tooltip= document.createElement("div");
tooltip.id="tooltip";
var oImg= document.createElement("img");
oImg.src=this.href;
tooltip.appendChild(oImg);
tooltip.style.left= e.clientX+10+"px";
tooltip.style.top= e.clientY+20+"px";
document.body.appendChild(tooltip);//在全局里面加的,
tooltip.style.display="block";

};
oTooltips[i].onmousemove=function(e){
var tooltip=document.getElementById("tooltip");
if(tooltip){
tooltip.style.left= e.clientX+10+"px";
tooltip.style.top= e.clientY+20+"px";
}
};
oTooltips[i].onmouseout=function(e){
document.body.removeChild(tooltip);
}
}
</script>

 

············