纳金网

标题: 鼠标移到图片上自动放大，基于jQuery框架 [打印本页]
作者: 奇    时间: 2011-12-30 19:30
标题: 鼠标移到图片上自动放大，基于jQuery框架
烈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





作者: 奇    时间: 2012-1-6 20:29
顶贴
作者: 晃晃    时间: 2012-3-2 23:28
好可爱的字,学习了
作者: 奇    时间: 2012-3-12 23:32
呵呵，很好，方便罗。
作者: 奇    时间: 2012-3-20 23:28
路过……
作者: C.R.CAN    时间: 2012-4-7 23:19
好铁多多发，感激分享
作者: tc    时间: 2012-7-8 23:26
水……生命之源……灌……
作者: tc    时间: 2012-7-10 23:26
加精、加亮滴铁子，尤其要多丁页丁页
作者: 菜刀吻电线    时间: 2012-10-6 23:27
好`我顶``顶顶
作者: 晃晃    时间: 2013-3-6 23:30
不错 非常经典  实用




欢迎光临 纳金网 (http://wwww.narkii.com/club/) Powered by Discuz! X2.5