jqurey放大展示图片列表

最新推荐文章于 2021-10-26 10:46:54 发布

祁连山的野孩子

最新推荐文章于 2021-10-26 10:46:54 发布

阅读量265

点赞数

分类专栏： jqurey案列文章标签： jqurey 图片放大图片预览

本文链接：https://blog.csdn.net/qq_17254307/article/details/53507316

版权

jqurey案列专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML布局

<html>

<head>
<base href="<%=basePath%>">

<title>图片提示放大器</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style type="text/css">
body {
margin: 0;
padding: 40px;
}
li {
list-style: none;
margin-left: 15px;
float: left;
margin-top: 40px;
border: 1px solid #AAAAAA;
}
#tooltip{
position: absolute;
border: 3px solid #ccc;
background: #455;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript" src="<%=path %>/lib/jquery_1.8.3.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/ImageAmplify.js"></script>

</head>

<body>
<ul>
<li><a οnclick="" href="<%=path %>/img/apple_1_bigger.jpg" title="苹果MP3"><img src="<%=path %>/img/apple_1.jpg" alt="苹果MP3"/></a></li>
<li><a href="<%=path %>/img/apple_2_bigger.jpg" title="苹果ipod"><img src="<%=path %>/img/apple_2.jpg" alt="苹果ipod"/></a></li>
<li><a href="<%=path %>/img/apple_3_bigger.jpg" title="苹果iphone3GS"><img src="<%=path %>/img/apple_3.jpg" alt="苹果iphone3GS"/></a></li>
<li><a href="<%=path %>/img/apple_4_bigger.jpg" title="苹果iMAC"><img src="<%=path %>/img/apple_4.jpg" alt="苹果iMAC"/></a></li>
</ul>
</body>

</html>

jQurey代码

$(function(){

var x = 10;
var y = 20;

$("li a").live('click',function(event){
//alert("点击事件停用");
event.preventDefault();
});

$("li a").mouseover(function(e){
//将获取到的a标签title赋值新变量
this.myTitle = this.title;
//alert(this.myTitle);
this.title = "";
var imgTitle = this.myTitle? "<br/>"+this.myTitle : "";//如果获取到的title存在输出title
var tooltip = "<div id='tooltip'><img src='"+this.href+"' alt='产品预览图' />"+imgTitle+"</div>";
//向body中添加放大图片的div
$("body").append(tooltip);
$("#tooltip").css({"top" : (e.pageY+y)+"px","left" : (e.pageX+x)+"px"}).show('fast');
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({"top" : (e.pageY+y)+"px","left" : (e.pageX+x)+"px"}).show('fast');
});
});