jQuery鼠标悬浮链接弹出跟随图片实例代码


Posted in Javascript onJanuary 08, 2016

本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>三水点靠木</title>
<style type="text/css">
body{
 margin:0;
 padding:40px;
 background:#fff;
 font:80% Arial, Helvetica, sans-serif;
 color:#555;
 line-height:180%;
}
a{
 text-decoration:none;
 color:#f30; 
}
p{
 clear:both;
 margin:0;
 padding:.5em 0;
}
img{border:none;}
#screenshot{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
this.screenshotPreview=function(){ 
 xOffset = 10;
 yOffset = 30;
 $("a.screenshot").hover(function(e){
 this.t = this.title;
 var c = (this.t != "") ? "<br/>" + this.t : "";
 $("body").append("<p id='screenshot'><img src='"+this.rel+"' />"+c+"</p>");   
 $("#screenshot")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px")
 .fadeIn("fast");  
 },
 function(){
 this.title = this.t; 
 $("#screenshot").remove();
 }); 
 $("a.screenshot").mousemove(function(e){
 $("#screenshot")
 .css("top",(e.pageY-xOffset)+"px")
 .css("left",(e.pageX+yOffset)+"px");
 }); 
};
$(document).ready(function(){
 screenshotPreview();
});
</script>
</head>
<body>
<a href="#" class="screenshot" title="蚂蚁部落" rel="mytest/demo/thesmall.jpg">蚂蚁部落</a>欢迎您
</body>
</html>

效果图:

jQuery鼠标悬浮链接弹出跟随图片实例代码

以上代码实现了我们的要求,下面简单介绍一下实现过程:
代码注释:
1.this.screenshotPreview=function(){ },声明一个函数用来实现跟随效果,在本效果中,this其实是可以省略,它指向window。
2.xOffset=10,声明一个变量,用来规定鼠标指针距离弹出图片的横向距离。
3.yOffset=30,声明一个变量,用来规定鼠标指针距离弹出图片的纵向距离。
4.$("a.screenshot").hover(function(e){},function(e){}),规定当鼠标移到链接和离开链接所要执行的函数。
5.this.t = this.title将链接的title属性值赋值给t属性,这里的this是指向当前鼠标悬浮的链接对象。
6.var c = (this.t != "") ? "<br/>" + this.t : "",如果this.t不为空,也就是存在title属性值,那么插入一个换行符并且连接当前标题内容,否则将c设置为空。
7.$("body").append("<p id='screenshot'><img src='"+ this.rel +"'/>"+ c +"</p>"),将图片和相关说明添加到body。
8.$("#screenshot").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast"),设置p元素的top和left属性值,并且采用淡入效果展现。
9.this.title=this.t,将title内容赋值给this.title,其实不要这一句也没有任何问题,有点多余。
10.$("#screenshot").remove(),移出p元素。
11.$("a.screenshot").mousemove(function(e){}),用来设置当鼠标指针移动时,图片能够跟随。
12.$("#screenshot").css("top",(e.pageY-xOffset)+"px") .css("left",(e.pageX+yOffset)+"px"),设置p元素的top和left属性值,能够实现跟随效果。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
javascript冒泡排序小结
Apr 10 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
微信小程序排坑指南详解
May 23 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
javascript中select下拉框的用法总结
Jan 07 #Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 #Javascript
js创建对象的方法汇总
Jan 07 #Javascript
JavaScript截取、切割字符串的技巧
Jan 07 #Javascript
js确认框confirm()用法实例详解
Jan 07 #Javascript
实例讲解jquery与json的结合
Jan 07 #Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 #Javascript
You might like
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
微信access_token的获取开发示例
2015/04/16 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP二维数组去重算法
2016/12/17 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python之list对应元素求和的方法
2018/06/28 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
django连接oracle时setting 配置方法
2019/08/29 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
怎样写好自我鉴定
2013/12/04 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
小学教师党员承诺书
2015/04/27 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android