时间:2021-05-26
超链接提示效果:
复制代码 代码如下:
<script type="text/javascript">
//<![CDATA[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/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>
图片提示效果:
复制代码 代码如下:
<script type="text/javascript">
//<![CDATA[
$(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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JQuery实现超链接鼠标提示效果的方法。分享给大家供大家参考。具体分析如下:浏览器其实已经自带了超链接提示,只需在超链接中加入title属性就可
自带的title的提示效果的响应速度是非常缓慢的,使用jQuery自制提示tooltip!HTML:提示1提示2自带超链接提示1自带超链接提示2CSS:pa{d
本文实例讲述了JQuery鼠标移到小图显示大图效果的方法。分享给大家供大家参考。具体分析如下:这里的显示大图功能类似上一篇《JQuery实现超链接鼠标提示效果的
本文实例讲述了jquery实现鼠标滑过后动态图片提示效果。分享给大家供大家参考。具体如下:这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图
本文实例讲述了jQuery实现行文字链接提示效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:一行文字的提示效果$(function(){$