淘先锋技术网

首页 1 2 3 4 5 6 7

网站图片提示效果（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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="tooltip" title="11111111111111"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
        <li><a href="img2.jpg" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="tooltip" title="222222222222222"><img src="img2.jpg" alt="苹果" width="100" height="100"></a></li>
        <li><a href="img1.jpg" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="tooltip" title="33333333333333"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
        <li><a href="img2.jpg" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="tooltip" title="4444444444444"><img src="img2.jpg" alt="苹果" width="100" height="100"></a></li>
        <li><a href="img1.jpg" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="tooltip" title="55555555555555"><img src="img1.jpg" alt="苹果" width="100" height="100"></a></li>
        <li><a href="img2.jpg" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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
         });

     });   

转载于:https://www.cnblogs.com/qdmaomao/p/4520252.html