↓↓选择一款你喜欢的背景皮肤吧!↓↓
{WEB前端技术分享,APP开发,PHP编程学习}
jquery仿title跟随鼠标提示效果:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><style type="text/css"> *{margin:0;padding:0;} ul li{ list-style:none;} img {border:0 none;} body {padding:100px;} input[type='button']{width:100px; height:38px;display:block;position:fixed;right:20%; top:50px;} .tooltip{position:absolute;display:none;border:1px solid #333; border-radius:8px; box-shadow:0 0 3px rgba(000,000,000,0.8);background:rgba(247,245,209,0.5);padding:3px;color:#333;display:none;}/* border-radius,box-shadow ie9以下都不兼容 */ </style> <input type="button" value="点击测试"/> <script type="text/javascript"> $(document).ready(function() { var x=10; var y=20; $(".link").mouseover(function(e){ //alert(e.pageX); if(typeof($(this).attr('title'))!='undefined'){ // 判断标签中是否有定义title属性 this.my_tit=this.title; this.title=''; var tooltip="<div class='tooltip'>"+this.my_tit+"</div>"; $("body").append(tooltip); $(".tooltip").css({ display:'block', left: e.pageX+x, top: e.pageY+y }) }; }).mouseout(function(){ if(typeof($(this).attr('title'))!='undefined'){ this.title=this.my_tit; $(".tooltip").remove(); }; }).mousemove(function(e){// 鼠标移动时跟随 $(".tooltip").css({ left: e.pageX+x, top: e.pageY+y }) }) }); </script> <div class="test"> <a href="#" class="link" title="自定义TITLE提示111!!!!">自定义链接提示</a> <a href="#" class="link">默认title提示</a> <a href="#" class="link" title="自定义TITLE提示2222!!!!">自定义链接提示</a> <a href="#" title="原始链接TITLE提示!">默认title提示</a> </div>
提示:你可以先修改部分代码再运行。
如果你觉得本站文章不错,阅读完有所收获,欢迎捐赠赞助:
(*必填)
(选填)
[ 请确保填写正确的邮箱地址,您的留言审核通过会收到邮件通知! ]
[请申请gravatar头像,木有头像的评论可能不会被回复]
【查看更多】提示:发表说说,请登录
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}