纳金网

标题: 鼠标放到、滑过图片动态放大效果，jQuery代码 [打印本页]

作者: 奇 时间: 2011-12-30 19:16
标题: 鼠标放到、滑过图片动态放大效果，jQuery代码
一款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

作者: 奇 时间: 2012-1-6 20:27
一直想学这个，很好有这些

作者: 菜刀吻电线 时间: 2012-1-25 23:23
新词新语迎新年, 年味十足乃作年.

作者: C.R.CAN 时间: 2012-1-26 23:23
得得失失平常事，是是非非任由之，恩恩怨怨心不愧，冷冷暖暖我自知，坎坎坷坷人生路，曲曲折折事业梯，凡事不必太在意，愿你一生好运气！

作者: 晃晃 时间: 2012-3-15 23:22
这么后现代

作者: C.R.CAN 时间: 2012-3-21 23:20
好可爱的字,学习了

作者: 奇 时间: 2012-4-16 23:26
有意思！学习了！

作者: 奇 时间: 2012-6-7 23:25
我是老实人,我来也!

作者: C.R.CAN 时间: 2012-6-24 23:19
已阵亡的蝶随风舞说过偶尔按一下 CTRL A 会发现世界还有另一面

作者: 晃晃 时间: 2012-7-5 23:23
很经典，很实用，学习了!

作者: 菜刀吻电线 时间: 2012-7-21 23:21
你们都躲开，我来顶

作者: tc 时间: 2012-12-9 23:21
我是老实人,我来也!

作者: tc 时间: 2012-12-9 23:25
先顶上去，偶要高亮加精鸟！

欢迎光临纳金网 (http://rs.narkii.com/club/)