tooltip和title美化网站提示教程

美化演示

tooltip和title美化网站提示教程 网络技术与安全 第1张

教程简介

浏览器自带的alt和title提示太丑了,所以我们需要美化一下,百度有许多,不过对我们这些小白来说很难。

第一步

放以下js到公用js里面

varsweetTitles={ x:10, y:20, tipElements:"a,span,img,div", noTitle:false, init:function(){ varb=this.noTitle; $(this.tipElements).each(function(){ $(this).mouseover(function(e){ if(b){ isTitle=true }else{ isTitle=$.trim(this.title)!='' } if(isTitle){ this.myTitle=this.title; this.title=""; vara="<divclass='tooltip'><divclass='tipsy-arrowtipsy-arrow-n'></div><divclass='tipsy-inner'>"+this.myTitle+"</div></div>"; $('body').append(a); $('.tooltip').css({ "top":(e.pageY+20)+"px", "left":(e.pageX-20)+"px" }).show('fast') } }).mouseout(function(){ if(this.myTitle!=null){ this.title=this.myTitle; $('.tooltip').remove() } }).mousemove(function(e){ $('.tooltip').css({ "top":(e.pageY+20)+"px", "left":(e.pageX-20)+"px" }) }) }) }};$(function(){ sweetTitles.init()});

第二步

css也是

/*tips*/ .tooltip{ font-size:12px; position:absolute; padding:5px; z-index:100000; opacity:.8; font-family:MicrosoftYahei}.tipsy-arrow{ position:absolute; width:0; height:0; line-height:0; border:6pxdashed#000; top:0; left:20%; margin-left:-5px; border-bottom-style:solid; border-top:0; border-left-color:transparent; border-right-color:transparent}.tipsy-arrow-n{ border-bottom-color:#666}.tipsy-inner{ background-color:#666; color:#FFF; max-width:200px; padding:5px8px4px8px; text-align:center; border-radius:3px}

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

为TA充电
人已赞赏
网络技术与安全

几行代码网站设置成灰色

2020-10-17 16:36:48

网络技术与安全

利用.htaccess设置你的WordPress网站

2020-10-19 23:19:10

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
搜索