快捷导航
蚂蚁部落 网站首页 实例代码 jQuery实例 查看内容

jQuery大图跟随效果代码实例

2017-12-28 00:16| 发布者: antzone| 查看: 345| 评论: 0|来自: 蚂蚁部落

鼠标放在产品的小图上的时候,出现一个可以跟随鼠标指针移动的大图。

下面通过实例介绍一下如何实现此效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>大图跟随效果代码-蚂蚁部落</title>
<style type="text/css"> 
li{
  list-style:none;
  height:262px;
  width:350px;
  border:5px solid #F60;
} 
#tooltip{
  position:absolute;
} 
#newTip{
  text-align:center;
  font-size:12px;
}
</style> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script> 
$(function(){ 
  var x=10; 
  var y=20; 
  $("a.tooltip").hover(function(){ 
    var title=this.title; 
    var $div=$("<div id='newTip'><img src='"+this.href+"'/><br/>"+title+"</div>"); 
    $("body").append($div); 
    $div.css({"position":"absolute","background":"silver"}).show("fast"); 
  },function(){ 
    $("#newTip").remove(); 
  }).mousemove(function(e){ 
    var $div= $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}); 
  }); 
}) 
</script>
</head> 
<body> 
<ul> 
<li>
  <a href="mytest/jQuery/big.jpg" class="tooltip" title="自然风光">
    <img src="mytest/jQuery/small.jpg" border="0"/>
  </a>
</li> 
</ul> 
</body> 
</html>

当鼠标在小图中移动的时候,能够出现一个大图跟随鼠标移动,下面介绍一下实现过程。

一.实现原理:

当鼠标放在小图上的时候,能够动态创建一个div对象节点,此节点中包含有大图,当鼠标离开小图的时候,常见的节点对象会被删除。同时为小图注册mousemove事件处理函数,当鼠标在小图中移动的时候,能够将创建的div的left和top属性值设置为e.pageX+x和e.pageY+y,之所以要加x和y是为了让大图和鼠标指针之间有一定的距离。

二.代码注释:

(1).$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).var x=10,var y=20,用于规定鼠标指针和大图左上角的距离。

(3).$("a.tooltip").hover(function(){}),为class属性值为tooltip的链接注册hover事件处理函数。

(4).var title=this.title;,将链接的title属性赋值给变量title。

(5).var $div=$("<div id='newTip'><img src='"+this.href+"'/><br/>"+title+"</div>"),创建一个节点对象,里面包含有<img>,它的src属性就是链接的href属性值,并且在图片下面显示title值。

(6).$("body").append($div),在body中添加创建的此节点对象。[

(7).$div.css({"position":"absolute","background":"silver"}).show("fast"),将创建的div设置为绝对定位,并且背景色为silver。

(8).$("#newTip").remove(),移除创建的div节点对象。

(9).mousemove(function(e){}),注册mousemove事件处理函数,e为事件对象。

(10).var $div= $("#newTip").css({"left": (e.pageX+x)+'px',"top": (e.pageY+y)+'px'}).show("fast"),设置div的left和top属性值。

三.相关阅读:

(1).hover事件参阅jQuery hover事件一章节。

(2).append()参阅jQuery append()一章节。

(3).css()参阅jQuery css()一章节。

(4).remove()参阅jQuery remove()一章节。

(5).mousemove事件参阅jQuery mousemove事件一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-1-19 09:18 , Processed in 0.090084 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部