鼠标移上去自动放大

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Google的放大</TITLE>
<SCRIPT LANGUAGE="JavaScript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function(){
var t;
$(".show1").mouseout(
function(){
clearTimeout(t);
var img=$(this).find("img");
var src=img.attr("src");
img.attr("src",img.attr("src2")).attr("src2",src)
.css({top:0,left:0,width:125,height:125})
.end().unbind("mousemove").bind("mousemove",m1);
}).mousemove(m1);
function m1(e){
var that=this;
clearTimeout(t);
//$("#info").html($("#info").html()+t+"<br/>");
t=setTimeout(function(){
$(that).unbind("mousemove");
var thisOffset=$(that).offset();
var left=-((e.pageX-thisOffset.left)*(313/125-1));
var top=-((e.pageY-thisOffset.top)*(313/125-1));
//$("#info").html($("#info").html()+e.pageY+"|"+$(that).offset().top+"|"+left+"|"+top+"<br/>");
$(that).find("img").animate({height:"313px",width:"313px",top:top,left:left},{duration:500,complete:function(){
var img=$(this);
var src=img.attr("src");
img.attr("src",img.attr("src2")).attr("src2",src).parent().mousemove(m2);
}});
},200);
}
function m2(e){
var b=312/125;
var thisOffset1=$(this).offset();
var left1=-((e.pageX-thisOffset1.left)*(313/125-1));
var top1=-((e.pageY-thisOffset1.top)*(313/125-1));
//$("#info")[0].innerHTML+="b:"+b+" |left:"+((left1))+"|"+"top:"+((top1))+"---l:"+l+"|t:"+t+"<br>";
$(this).find("img").css({top:top1,left:left1});
}
});
//-->
</SCRIPT>
<style type="text/css">
.show1{
width:125;
height:125;
border:1px solid blue;
cursor:pointer;
overflow:hidden;
position:relative;
background-color:gray;
}
.img1{
width:125;
height:125;
position:absolute;
}
</style>
</HEAD>
<BODY>
<div class="show1" onclick=""><img class="img1" src="http://www.veryhuo.com/uploads/allimg/090108/1108250.jpg"></img></div>
<div id="info"></div>
</BODY>
</HTML>
阅读更多
个人分类: Html
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭