码迷,mamicode.com
首页 > Web开发 > 详细

jQuery鼠标移到小图显示大图效果

时间:2017-11-19 12:39:55      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:image   log   query   .com   cti   border   mouseover   func   pen   

首先需要引入jQuery

<script type="text/javascript" src="js/jquery.js"></script>

使用到的CSS样式

.show_tooltip li {
 list-style:none;
 display:inline;
 padding:5px 5px 5px 5px;
}
/* tooltip */
#tooltip{
 position:absolute;
 border:1px solid #333;
 background:#f7f5d1;
 padding:3px 3px 3px 3px;
 color:#333;
 display:none;
}

用到的JavaScript:

<script type="text/javascript">
$(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>

 调用实例:

<ul class="show_tooltip">
  <li><a href="image/slide1.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide1.png" width="150" alt="化无语 战场原黑仪"></a></li>
  <li><a href="image/slide2.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide2.png" alt="化无语 战场原黑仪" width="150"></a>
</li>
  <li><a href="image/slide3.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide3.png" width="150" alt="化无语 战场原黑仪"></a></li>
</ul>

效果图:

技术分享图片

 

jQuery鼠标移到小图显示大图效果

标签:image   log   query   .com   cti   border   mouseover   func   pen   

原文地址:http://www.cnblogs.com/xynetstudio/p/7859259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!