博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery tips 提示层
阅读量:6246 次
发布时间:2019-06-22

本文共 1664 字,大约阅读时间需要 5 分钟。

 <html>
 <head>
 <meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8">
 <title> jquery</title>
<script type="text/javascript" src=" >
<style type="text/css">
#tip   {position:absolute;color:#333;display:none;}
#tip s   {position:absolute;top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip s i   {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip .t_box   {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
#tip .t_box div  {position:relative;background-color:#FFF;border:1px solid #ACA899;background:#FFF;padding:1px;top:-3px;left:-3px;}

.tip   {width:82px;height:82px;border:1px solid #DDD;}

</style>
<script type="text/javascript">
$(function(){
   $('.tip').mouseover(function(){
      var $tip=$('<div id="tip"><div class="t_box"><div><s><i></i></s><img src="'+this.src+'" /></div></div></div>');
      $('body').append($tip);
      $('#tip').show('fast');
   }).mouseout(function(){
      $('#tip').remove();
   }).mousemove(function(e){
      $('#tip').css({"top":(e.pageY-60)+"px","left":(e.pageX+30)+"px"})
   })
})
</script>
<body>
<p> </p>
<a href="" ><img class="tip" src="" /></a>
<a href="" ><img class="tip" src="" /></a>
<a href="" ><img class="tip" src="" /></a>

 </body>

 </html>

 

 

-精品推荐:

1、

2、

3、

4、

5、

6、

7、

8、

9、

10、

11、

12、

13、

14、

15、

转载于:https://www.cnblogs.com/it20120227/archive/2011/07/15/2370742.html

你可能感兴趣的文章
Ubuntu 10.04安装水晶(Mercury)无线网卡驱动
查看>>
我的友情链接
查看>>
ElasticSearch 2 (32) - 信息聚合系列之范围限定
查看>>
VS2010远程调试C#程序
查看>>
windows查看端口占用
查看>>
Yii用ajax实现无刷新检索更新CListView数据
查看>>
App 卸载记录
查看>>
JavaScript变量和作用域
查看>>
开源SIP服务器加密软件NethidPro升级
查看>>
Apache Pulsar中的地域复制,第1篇:概念和功能
查看>>
南京大学周志华教授当选欧洲科学院外籍院士
查看>>
计算机网络与Internet应用
查看>>
oracle在线迁移同步数据,数据库报错
查看>>
linux性能剖析工具
查看>>
flutter中的异步
查看>>
计算机高手也不能编出俄罗斯方块——计算机达人成长之路(16)
查看>>
# 2017-2018-1 20155224 《信息安全系统设计基础》第七周学习总结
查看>>
scikit-learn预处理实例之一:使用FunctionTransformer选择列
查看>>
Oracle11G 卸载步骤
查看>>
Mars说光场(3)— 光场采集
查看>>