网站图片提示效果(jQuery)
效果图如下:
代码如何下:
CSS代码:
*{ margin:0; padding:0; }
ul{list-style: none;}
ul li{ display:block; float:left; width: 100px; height: 100px; margin-left:10px; border:1px solid #666;}
#tooltip { position: absolute; top: 200px; left:200px;}
#tooltip img { width: 200px ; height:200px;}
.s{ background: red;}
<body>
<ul>
<li><a href="img1.jpg" class="tooltip" title="11111111111111"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img2.jpg" class="tooltip" title="222222222222222"><img src="img2.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img1.jpg" class="tooltip" title="33333333333333"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img2.jpg" class="tooltip" title="4444444444444"><img src="img2.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img1.jpg" class="tooltip" title="55555555555555"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
<li><a href="img2.jpg" class="tooltip" title="666666666666"><img src="img2.jpg" alt="苹果" width="100" height="100"></a></li>
</ul>
</body>
JQ代码:
$(function(){
$("a.tooltip").mouseover(function(e){
this.myTitle=this.title;//添加一个行的myTitle属性,并把title的值传给这个属性
this.title="";//清空属性title的值
var imgTitle=this.myTitle? + this.myTitle :""; //判断this.myTitle是否为“”时,用的三元运算
var tooltip="<div id=‘tooltip‘><img src=‘" + this.href +"‘ alt=‘产品预览图‘ /><div class=‘s‘>"+ imgTitle + "</div></div>"; //创建新的div元素
$(this).append(tooltip);//把它追加到文档中
$("#tooltip").show("fast");//让dis 显示
}).mouseout(function(){
this.title=this.myTitle;// 鼠标滑出把myTitle属性值赋给属性title
$("#tooltip").remove();//移除dis
});
});
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。