- 最后登录
- 2013-7-18
- 注册时间
- 2011-7-16
- 阅读权限
- 70
- 积分
- 3247
 
- 纳金币
- 324742
- 精华
- 0
|
烈47火22网(LieHuo15.Net)教75程 鼠标移到图片上自动放大，基于jQuery，刻Google上有过的图片放大效果，值得注意的是，鼠标指不同的位置，放大的位置也就不同。不多介绍了，大家自己看演示吧。
为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示
网页演示：猛击此处
运行演示：
<!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" src="http://www.veryhuo.com/uploads/allimg/090108/1108250.jpg"></img></div>
<div id="info"></div>
</BODY>
</HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/28158.html
|
|
发表于 2011-12-30 19:30:05
QQ好友和群
腾讯微博
腾讯朋友
微信
转播
淘帖
收藏
支持
反对