自定义title(两种,跟随和不跟随)

最新推荐文章于 2023-02-10 20:58:14 发布
最新推荐文章于 2023-02-10 20:58:14 发布
阅读量481 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws379374000/article/details/92794503
版权 
<html>
<head>
		<script src="1.9.1/jquery.min.js"></script>
<style>
        body{
            background-color: #ccc;
            text-align: center;
            padding-top: 200px;
        }
        a{
            text-decoration: none;
            color: #555;
        }
        [deta-title]{
            position: relative;
            margin: 0 20px;
        }
        [deta-title]:after{
            content: attr(deta-title);
            position: absolute;
            left: 50%;
            bottom: 100%;
            transform: translate(-50%,0);
            color: #fff;
            text-shadow: 0 -1px 0px black;
            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
            background: #383838;
            border-radius: 2px;
            padding: 3px 10px;
            font-size: 12px;
            white-space: nowrap;
            transition:all .3s;
            opacity: 0;
            visibility: hidden;
        }
        [deta-title]:hover:after{
            transition-delay: 100ms;
            visibility: visible;
            transform: translate(-50%,-6px);
            opacity: 1;
        }
    </style>
<script type="text/javascript">
/*function detaTitle(){
    var deta_title = document.querySelectorAll("[deta-title]");
    for (var i = 0; i < deta_title.length; i++){
        deta_title[i].setAttribute("deta-title",deta_title[i].getAttribute("title"));
        deta_title[i].removeAttribute("title");
    }
}
detaTitle();*/
$(document).ready(function(){
   $("div").bind('mouseover mouseout mousemove', function (event) {
            var left = event.pageX, top = event.pageY;
            var ele = event.target;
            var title = ele.getAttribute('deta-title');
            if(title=="" || title==null ){
                title= ele.parentElement.getAttribute('deta-title');
            }
            if(title=="" || title==null){
                title= ele.parentElement.parentElement.getAttribute('deta-title');
            }
             event.stopPropagation();
            var type = event.originalEvent.type;
            if (type == 'mouseover'&& title!="" && title!=null) {
              
                if (title != null && title!="" && title!="null") {
                    var showEle = $('<div></div>', {text: title, class: 'showTitleBox'}).css({
                        'position': 'absolute',
                        'top': top-10,
                        'left': left+15,
                        'border': '0px solid #CCC',
                        'border-radius': '3px',
                        'background-color': "#333333ba",
                        'font-size': '14px',
                        'fontFamily': 'Arial',
                        'padding': '5px 5px 5px 5px',
                        'color':'#FFF'
                    })
                    showEle.appendTo('body');
                }else{

                }
            } else if (type == 'mouseout') {
                // ele.title = oldTitle;
                $('.showTitleBox').remove();
            } else if (type == 'mousemove') {
                 $('.showTitleBox').css({
                     top: top - 10,
                     left: left + 15
                 })
            }
        })
});
</script>
</head>
<body>
<div>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="111">111</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="222">222</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="333">333</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="444">444</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="555">555</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="666">666</p><p style="background-color:#E9E9E4;height: 50px;" deta-title="111">111</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="222">222</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="333">333</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="444">444</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="555">555</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="666">666</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="111">111</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="222">222</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="333">333</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="444">444</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="555">555</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="666">666</p><p style="background-color:#E9E9E4;height: 50px;" deta-title="111">111</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="222">222</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="333">333</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="444">444</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="555">555</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="666">666</p><p style="background-color:#E9E9E4;height: 50px;" deta-title="111">111</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="222">222</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="333">333</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="444">444</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="555">555</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="666">666</p><p style="background-color:#E9E9E4;height: 50px;" deta-title="111">111</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="222">222</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="333">333</p>
<p style="background-color:#E9E9E4;height: 50px;" deta-title="444">444</p>
</div>
</body>
</html>

 

 'top': top-10, 'left': left+15,两个地方不一致,,导致在有滚动条的时候滚鼠标滚轮,tooltip一直闪!!!

找了半天才发现是这个问题!!!!!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

KK凯凯
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
『番外篇八』SwiftUI 脑洞大开实现“另类”视图跟随方法
享受开发，颠倒银河
12-31 1071
在本篇博文中，我们讨论了在 SwiftUI 中如何脑洞大开“另类”实现视图跟随的方法。相信看完本篇，大家会对 SwiftUI 视图的布局有着更深刻的领悟。
一篇文章彻底理解自定义View
龚礼鹏的博客
12-02 1485
对应标签。容易引起oom继承系统的TextView，实现在文字中间加一条横线}}}}) {canvas?}}可以看见文字中间是有一条横线的①.简单实现一个矩形的绘制}}}}) {canvas?}}添加自定义属性，添加自定义背景色先在values目录下面创建attrs.xml，添加自定义属性然后在代码中获取自定义属性，注意获取的资源要回收}//获取自定义属性对应的组名称//获取自定义属性//注意资源需要回收}}}
自定义的title
03-24
NULL 博文链接：https://landy-sun.iteye.com/blog/1022672
自定义title
大道至简，开发由我！
04-04 1053
ecshop商品页面的title信息是“商品名->栏目名->上级栏目名->网店名“这个规则来自动生成的，有时这样的title可能不符合SEO的需要，那么就需要自定义title。 思路： 前台：首先在商品表增加title字段；然后在商品页面的.php文件中,读取此字段并赋给smarty；然后再展示到模板上。 后台：发布商品时，表单中应有自定义title表单项,并能提交入库；修改商品
自定义标题Title
Liu_Anny的博客
03-28 782
支持 左侧返回按钮（图标） 中间标题（文本） 右侧图标文本 代码实现 布局文件 &lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;!--1号：标题栏布局：右侧有一个返回按钮，中间有一个居中的单行标题--&gt; &lt;RelativeLayout xmlns:android="http://schemas.android....
自定义Title
№悟◇
07-12 814
来源：http://hi.baidu.com/adverse/blog/item/b1cc9758b416eddf9c8204c7.html自定义Title自定义Title(IE & FireFox...)：把鼠标放在下面的文字上查看效果默认效果www.azhong.com" altbg="red" altcolor="yellow" altborder="yellow">滚动字幕" altb
Jetpack Compose中的绘制流程和自定义布局
川峰的博客
02-10 2535
与大多数其他界面工具包一样，Compose 会通过几个不同的“阶段”来渲染帧。如果我们观察一下 Android View 系统，就会发现它有 3 个主要阶段：测量、布局和绘制。Compose 和它非常相似，但开头多了一个叫做“组合”的重要阶段。 Compose 有 3 个主要阶段： 组合：要显示什么样的界面。Compose 运行Composable可组合函数并创建LayoutNode视图树。 布局：要放置界面的位置。该阶段包含两个步骤：测量和放置。对于视图树中的每个LayoutNode节点进行宽高尺寸测
G6自定义节点的不完全指北
大转转FE
01-14 3338
前言 前段时间有个好玩的需求：把人、货、场的整个流程通过一个个节点有序排列出来。一开始觉得这很简单呀，用G6一条线搞定。接着，需要把不同领域拆分开来，那也简单，按照规则拆出几份出来就好了。...
自定义Title标题栏
RKGG爱吃鱼
06-23 522
最近需要写一个自定义的标题栏，本来想把自带的style改改的，但是又感觉太麻烦，所以干脆自己来写一个，简单的实现中间文字标题，两侧Button点击事件。 先放个效果图： 代码如下： <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_
自定义title--2
qq_40285497的博客
07-19 313
这回这个自定义title增加了碰撞检测，三角尖是根据class来变化的，js检测到位置后给元素加上相应类名就可以，代码如下 js代码如下 var zQui = {}; // 自定义title；ele:需要浮窗的元素，str：显示的内容 zQui.title = function (opt) { // 现在界面上加入一个浮窗元素，之后只要显示隐藏就可以了 let title...
自定义title指令
qq_44187211的博客
03-29 205
自定义title指令，当字数超过才显示
自定义Title标题样式
hilary3113的博客
04-25 596
我们在开发中，会对标题进行操作，全屏操作，改变标题样式等等。我们可以通过requestWindowFeature(featrueId)来实现，它的功能是启用窗体的扩展特性。参数是Window类中定义的常量。 枚举常量 1.DEFAULT_FEATURES：系统默认状态，一般不需要指定 2.FEATURE_CONTEXT_MENU：启用ContextMenu，默认该项已启用，一般无需指定 3...
html中实现自定义title属性
kakakaluka的博客
07-31 475
可以使用 tooltip
自定义title样式
Ueaner
09-27 231
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; body {font:normal 12px Verdana} a#tip {position:relative;left:75px; font-weight:bold;} a#tip:link,a#tip:hover...
APP自定义标题栏——并对标题栏中的控件实现监听和响应 源代码下载
SDBX_lyp的博客
04-23 1172
通常的APP标题栏是这样的：当然这样的标题栏也不是说一无是处，还是很方便用的。不过如果你想做一个更好看一些的标题栏，那就要自定义一个标题栏了，像这个样子：如果你想做一个漂亮的标题栏，有无从下手，那就跟着本文一起学习一下吧。1.分析一下如何实现的：       首先你要写一个布局文件，这个布局文件里面就只有你想要的标题栏的布局，像步骤2里面的那样，然后你在代码里面将默认的标题栏屏蔽掉，再把刚才自己写...
h5 修改title 微信_微信h5网页自定义分享（标题、描述、图标）
weixin_28716443的博客
02-15 1249
$this->appId =$appId;$this->appSecret =$appSecret;}publicfunction getSignPackage() {$jsapiTicket= $this->getJsApiTicket();//注意 URL 一定要动态获取，不能 hardcode.$protocol = (!empty($_SERVER['HTTPS']) &...
自动跟随导航栏js+css
wx_1998的博客
02-13 583
&lt;!DOCTYPE html&gt; &lt;html lang=zh-cn&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;title&gt;一个不带CSS样式的HTML5布局&lt;/title&gt; &lt;meta name=description content=一个不带CSS样式的HTML5布局&gt;
高德地图自定义marker如何跟随地图旋转
最新发布
06-07
如果想要高德地图上的Marker跟随地图旋转，可以使用MarkerOptions的setFlat属性和setRotateAngle属性来实现。 setFlat属性可以设置Marker的图标是否贴地显示，如果设置为true，则Marker的图标会始终保持水平朝上的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值