jQuery实现ToolTip元素定位显示功能示例
记录下,以备将来用到
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>无标题页</title>
<script type=
"text/javascript"
src=
"jquery-1.4.2.min.js"
></script>
<script type=
"text/javascript"
>
function
ShowTip(event,obj,message)
{
var
xOffset = -10;
// x distance from mouse
var
yOffset = 10;
// y distance from mouse
//obj.style.top = (event.clientX + yOffset)+"px";
//obj.style.left = (event.clientY + xOffset)+"px";
//获取元素width: $(obj).width();
//获取元素height:$(obj).height()
//获取元素位置:$(obj).position().top和$(obj).offset().top
$(
'body'
).append(
'<div id="tipmessage">'
+message+
'</div>'
);
$(
'div#tipmessage'
).css(
"top"
, $(obj).position().top+$(obj).height() +
"px"
).css(
"left"
, $(obj).position().left+
"px"
).fadeIn(
"slow"
);
}
function
HideTip()
{
$(
"div#tipmessage"
).fadeOut(
"slow"
).remove();
}
</script>
<style type=
"text/css"
>
#tipmessage
{
display:none;
z-index:1000;
border:1px solid
#448833;
position:absolute;
background:
#ffffff;
max-width:200px;
max-height:30px;
padding:5px 10px;
}
</style>
</head>
<body>
<a href=
"#"
onmouseover=
"ShowTip(event,this,'欢迎访问脚本之家')"
onmouseout=
"HideTip()"
>Tip</a>
</body>
</html>
jQuery实现ToolTip元素定位显示功能示例的更多相关文章
- 利用Xpath和jQuery进行元素定位示例
利用Selenium在做前端UI自动化的时候,在元素定位方面主要使用了XPATH和jQuery两种方法.XPATH作为主要定位手段,jQuery作为补充定位手段.因为在通过XPATH进行定位的时候,S ...
- Selenium2学习-002-Selenium2 Web 元素定位及 XPath 编写演示示例
此文主要对 Selenium2 的 Web 元素定位及 XPath 编写示例,敬请各位亲们参阅,共同探讨.若有不足之处,敬请各位大神指正,不胜感激! 通过 Firefox(火狐)浏览器的插件 Fire ...
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
- Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载
元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...
- java selenium (五) 元素定位大全
页面元素定位是自动化中最重要的事情, selenium Webdriver 提供了很多种元素定位的方法. 测试人员应该熟练掌握各种定位方法. 使用最简单,最稳定的定位方法. 阅读目录 自动化测试步骤 ...
- 史上最全!Selenium元素定位的30种方式
Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...
- selenium8中元素定位方式
Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...
- selenium元素定位篇
Selenium webdriver是完全模拟用户在对浏览器进行操作,所有用户都是在页面进行的单击.双击.输入.滚动等操作,而webdriver也是一样,所以需要我们指定元素让webdriver进行单 ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
随机推荐
- java工具类POI导出word
1.新建一个word,里面填写内容,如: 2.导出wordjava类 /** * POI导出word测试 * @throws Exception */ @RequestMapping(value=&q ...
- php阿里云oss文件上传
php的文件上传 文件上传 php的文件上传放在了$_FILES数组里,单文件和多文件上传的区别在于$_FILES['userfile']['name']是否为数组, 不熟悉的可以读一下官方文档 单文 ...
- Tomcat配置JMX远程监控(Windown7 Linxu)
一:Window7下配置方式. 1.配置catalina.bat 在第一行加入下面配置 注意下面这些配置要在一行,注意包含空格. set JAVA_OPTS=-Dcom.sun.management. ...
- HTTP1.0/1.1/2.0特性对比_转
转自:HTTP1.0 HTTP1.1 HTTP2.0 主要特性对比 https://segmentfault.com/a/1190000013028798 HTTP1.0 早先1.0的HTTP版本, ...
- mac安装docker,显示无效的命令
mac安装完docker后,显示无效的命令. 在应用程序中找到docker安装的路径,将该路径写到/etc/paths里面
- (转)spark日志配置
一.第一部分 1.spark2.1与hadoop2.7.3集成,spark on yarn模式下,需要对hadoop的配置文件yarn-site.xml增加内容,如下: <property> ...
- awk mysql
mysqlbinlog --no-defaults --base64-output=decode-rows -v -v mysql-bin.000002 |awk '/###/{if($0~/UPDA ...
- 给初学者的20个CSS实用建议
英文原文:20-useful-css-tips-for-beginners,编译:杨礼鑫 过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被 ...
- Java中static、final、static final的区别(转)+transient
说明:不一定准确,但是最快理解. final: final可以修饰:属性,方法,类,局部变量(方法中的变量) final修饰的属性的初始化可以在编译期,也可以在运行期,初始化后不能被改变. final ...
- chromedriver与chrome版本映射表(更新至v2.30)
在 chrome://help/ 查看浏览器版本号 看到网上基本没有最新的chromedriver与chrome的对应关系表,便兴起整理了一份如下,希望对大家有用: chromedriver版本 支持 ...