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 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python简易版停车管理系统
2019/08/12 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
求职自荐信范文格式
2013/11/29 职场文书
小摄影师教学反思
2014/04/27 职场文书
十八大宣传标语
2014/10/09 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
房产公证书
2015/01/23 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
HAM-2000摩机图
2021/04/22 无线电
Python实现简单得递归下降Parser
2022/05/02 Python