关闭

图片展示JQ

80人阅读 评论(0) 收藏 举报
分类:

<style type="text/css">
body,ul,li{ margin:0px; padding:0px;}
ul{
list-style-type: none;
border:1px solid #ccc;
width:1040px;
height: 250px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
z-index:1;
}
li{ float:left;
height: 250px;
width: 250px; margin:0px 5px;
}
#tooltip {

width:auto !important;width:100%;
text-align:center; z-index:2; top:0px; background:url(images/bg.png) repeat;
}
</style>
<script src="jquery-1.11.3.js" type="text/javascript" /></script>
<script>
$(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>";
$("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" 
});
});
})
</script>





<body>

<ul>
  <li><a href="images/xlszrp_big.jpg" class="tooltip" title="香辣水煮肉片"><img src="images/xlszrp.jpg" alt="香辣水煮肉片"></a></li>
  <li><a href="images/szrp_big.jpg" class="tooltip" title="水煮肉片"><img src="images/szrp.jpg" alt="水煮肉片"></a></li>
  <li><a href="images/szrp2_big.jpg" class="tooltip" title="水煮肉片"><img src="images/szrp2.jpg" alt="水煮肉片"></a></li>
  <li><a href="images/sgszrp_big.jpg" class="tooltip" title="私房水煮肉片"><img src="images/sgszrp.jpg" alt="私房水煮肉片"></a></li>
</ul>
</body>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:21629次
    • 积分:356
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:34篇
    • 译文:0篇
    • 评论:0条
    文章分类