[经验分享] 鼠标放到、滑过图片动态放大效果，jQuery代码

[复制链接]

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2011-12-30 19:16:33 |只看该作者 |倒序浏览

一款jQuery放大图片的代码，当我们把鼠标放到图片上、滑过图片时，动态弹出放大的图片，这样的例子烈火网介绍过许多，有jQuery版的、还有JS放大图片的代码，有时间的朋友可以在站内搜索一下。
　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。
　　点击查看：网页特效
　　运行演示：
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>图片提示</title>

<script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script>

<style type="text/css">

body{

margin:0;

padding:40px;

background:#fff;

font:80% Arial, Helvetica, sans-serif;

color:#555;

line-height:180%;

}

img{border:none;}

ul,li{

margin:0;

padding:0;

}

li{

list-style:none;

float:left;

display:inline;

margin-right:10px;

border:1px solid #AAAAAA;

}

/* tooltip */

#tooltip{

position:absolute;

border:1px solid #ccc;

background:#333;

padding:2px;

display:none;

color:#fff;

}

</style>

<script type="text/javascript">

//<![CDATA[

$(function(){

var x = 10;

var y = 20;

$("a.tooltip").mouseover(function(e){

this.myTitle = this.title;

this.title = "";

var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";

var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素

$("body").append(tooltip); //把它追加到文档中

$("#tooltip")

.css({

"top": (e.pageY+y) + "px",

"left":  (e.pageX+x)  + "px"

}).show("fast"); //设置x坐标和y坐标，并且显示

}).mouseout(function(){

this.title = this.myTitle;

$("#tooltip").remove();  //移除

}).mousemove(function(e){

$("#tooltip")

.css({

"top": (e.pageY+y) + "px",

"left":  (e.pageX+x)  + "px"

});

});

})

//]]>

</script>

</head>

<body>

<h3>有效果：</h3>

<ul>

<li><a href="/uploads/common/images/wall1.jpg" class="tooltip" title="风光 iPod"><img src="/uploads/common/images/wall_s1.jpg" alt="风光 iPod" /></a></li>

</ul>

<br/><br/><br/><br/>

<br/><br/><br/><br/>

<h3>无效果：</h3>

<ul>

<li><a href="/uploads/common/images/wall1.jpg" title="风光 iPod"><img src="/uploads/common/images/wall_s1.jpg" alt="风光 iPod" /></a></li>

</ul>

</body>

</html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>

文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43003.html