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

本文共 1666 字,大约阅读时间需要 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/javaEEspring/archive/2011/07/15/2523273.html

你可能感兴趣的文章
Oracle体系结构之oracle密码文件管理
查看>>
【leetcode】Remove Element (easy)
查看>>
mysql多表查询及其 group by 组内排序
查看>>
alsa的snd_pcm_readi()函数和snd_pcm_writei()
查看>>
Android学习网站推荐(转)
查看>>
嵌入式根文件系统的移植和制作详解
查看>>
MEF部件的生命周期(PartCreationPolicy)
查看>>
LCD的接口类型详解
查看>>
nginx 基础文档
查看>>
LintCode: Unique Characters
查看>>
Jackson序列化和反序列化Json数据完整示例
查看>>
.net 中的DllImport
查看>>
nyoj 517 最小公倍数 【java睑板】
查看>>
include与jsp:include区别
查看>>
ftp的20 21端口和主动被动模式
查看>>
MySQL存储引擎选型
查看>>
Java中的statickeyword具体解释
查看>>
Linux车载系统的开发方向
查看>>
并发编程之五--ThreadLocal
查看>>
摄像头驱动OV7725学习笔记连载(二):0V7725 SCCB时序的实现之寄存器配置
查看>>