我们新增Dark Mode(暗模式),(只是在晚上)可以改变MAC OS&Windows系统的暗模式实现切换;安卓和苹果手机是一样的。
编程代码

使用Tooltip简单实现title浮动提示样式

gyue2345·2016-02-04·173 次阅读··

   2016-02-04 3:34 LJY2345    抢沙发   隐藏边栏   黑色模式    173 
   评分 1 次,平均分 5.0    抢沙发   隐藏边栏   黑色模式
[收起] 文章目录

当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 title 属性存储标题信息。

使用Tooltip简单实现title浮动提示样式

引入jQuery

这个Tooltip是我从别的网站上扒下来的,下面是代码。因为Tooltip是jQuery的控件,所以要在使用前引入jQuery库。

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

引入css

css样式表,如果是wordpress的话,你可以加到style.css里去。

#tooltip {
	background: #DDD;
	color: #000000;
	text-align: center;
	margin-right: 10px;
	position: absolute;
	z-index: 9999;
	display: none;
	box-shadow: 0 0 5px #666;
	border: 1px dashed #FFF;
	padding: 3px 8px;
	font-size: 12px;
}

引入JS

下面就是javascript代码

	$(function() {
    $("a").each(function(b) {//这里是控制标签
        if (this.title) {
            var c = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
            var a = 30; //设置提示框相对于偏移位置,防止遮挡鼠标
            $(this).mouseover(function(d) { //鼠标移上事件
                this.title = "";
                $("body").append('<div id="tooltip">' + c + "</div>"); //创建提示框,添加到页面中
                $("#tooltip").css({
                    left: (d.pageX + a) + "px",
                    top: d.pageY + "px",
                    opacity: "0.8"
                }).show(250) //设置提示框的坐标,并显示
            }).mouseout(function() { //鼠标移出事件
                this.title = c; //重新设置title
                $("#tooltip").remove() //移除弹出框
            }).mousemove(function(d) { //跟随鼠标移动事件
                $("#tooltip").css({
                    left: (d.pageX + a) + "px",
                    top: d.pageY + "px"
                })
            })
        }
    })
	});

这些添加完成之后,这个漂亮的Tooltip title浮动提示条就可以在你的博客上运行了。。。 :!:

 

 

赞赏

除特别注明外,本站文章均采用BY-NC-SA协议授权,转载请注明来自:https://www.ljy2345.com/2016/02/tooltip-simple-implementation-of-title-floating-prompt-style/

博 主作者: 关注:6    粉丝:1最后编辑于:2019年2月3日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

view comments - NOTHING
🌙
😃

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL