PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
|
积分获取
|
给我留言
|
tag标签
首页
开发编程
PHP教程
ASP.NET教程
Jquery教程
Unity3D教程
JavaScript教程
HTML+CSS
ThinkPhp教程
Smarty教程
正则表达式
编程杂谈
HTML5+CSS3教程
HBuilderX教程
AngularJS教程
Laravel教程
iOS开发教程
Java教程
小程序开发
提供网页设计教程和后台编程技术
CMS教程
phpcms教程
dedecms教程
wordpress教程
ecshop教程
帝国cms教程
discuz教程
齐博cms教程
ShopNc教程
提供主流cms教程
数据库
MySQL教程
SQL Server教程
NoSql数据库
提供数据库教程和设计
JS特效
HTML5+CSS3特效
焦点图
菜单导航
广告特效
对联广告
在线客服
相册特效
图片特效
悬浮漂浮
滚动特效
Tab选项卡
瀑布流
手机js特效
弹出层(框)
日期时间
网页模板
其它特效
提供各种常见网页js代码
网页特效
HTML5+CSS3
鼠标特效
文字特效
导航菜单
表格图层
Tab选项卡
图片特效
时间日期
网站常用
提供常用的JS特效代码及在线演示
Jquery插件
jQuery日期时间
jQuery弹出层
jQuery筛选排序
jQuery滚动插件
jQuery工具提示
jQuery音频视频
jQuery选项卡
jQuery图片裁剪
jQuery常用插件
jQuery导航菜单
提供jQuery插件教程及插件下载
服务器
Linux教程
Web服务器
提供服务器常见问题及教程
站长学院
seo技巧
建站经验
网络营销
站长资讯
好文分享
网络推广
互联网资讯
提供站长技术、站长资讯等内容
工具&手册
Base64编码加密
正则测试工具
Css压缩/格式化
jQuery手册
md5加密
CSS3
帝国cms开发手册
DEDE5.7使用手册
配色词典
C语言库
提供常用开发手册和开发工具
全站搜索
搜索
关键字:
备份技术
管理系统
日期计算
数据
图片放大
js代码特效
文件上传
读取
您现在的位置:
首页
>
网页特效
>
文字特效
> 正文
js 文章标题文字tips提示效果
作者:w634381967
来源:网络
浏览:
次
时间:2020-10-24 21:11:49
我要评论
分享到
内容介绍
js 文章标题文字tips提示效果
,这款js 文章标题文字tips提示效果,需要的朋友可以复制后修改即可使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tips,带三角可关闭的文字提示</title> </head> <body> <style type="text/css"> body{ font-size:12px;} .lj-tipsWrap,.lj-in,.lj-close{display:inline-block;} .lj-tipsWrap{background:#F4FBFF;line-height:1.5em;padding:5px 15px;border:1px solid #2192D3;position:absolute;text-align:left;} .lj-in{position:absolute;zoom:1;border:10px dashed transparent;width:0px;height:0px;} .lj-in span{zoom:1;width:0px;height:0px;overflow:hidden;} .lj-close{position:absolute; text-decoration:none;color:#000;font-size:14px; height:9px; width:9px; overflow:hidden;line-height:0.5em; right:0; top:0;} .lj-close:hover{color:#39F;} .lj-top{border-top:10px solid #2192D3;bottom:-20px; left:3px;} .lj-top span{border-top:10px solid #F4FBFF;margin:-11px 0 0 -10px;} .lj-right{border-right:10px solid #2192D3;left:-20px; top:3px;} .lj-right span{border-right:10px solid #F4FBFF;margin:-10px 0 0 -9px;} .lj-bottom{border-bottom:10px solid #2192D3;top:-20px; left:3px;} .lj-bottom span{border-bottom:10px solid #F4FBFF;margin:-9px 0 0 -10px;} .lj-left{border-left:10px solid #2192D3;right:-20px; top:3px; } .lj-left span{border-left:10px solid #F4FBFF;margin:-10px 0 0 -11px;} .lj-left ~ .lj-close{left:0;} /*css 3 渐进增强*/ .lj-tipsWrap{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:2px 2px 3px #eee;-moz-box-shadow:2px 2px 3px #eee;} </style> <script type="text/javascript"> window.ljtips=function(){var i=document.body,j=document.documentElement,n=/msies([d.]+)/.test(navigator.userAgent.toLowerCase()),k=window;return function(l){var c=l?typeof l=="string"?document.getElementById(l):l:this,d=null,s=c.offsetWidth,t=c.offsetHeight,m=0,g=null,e={},o={left:function(a){return{top:d.top,left:d.left-a-15}},top:function(a,h){return{top:d.top-h-15,left:d.left}},right:function(){return{top:d.top,left:d.left+s+15}},bottom:function(){return{top:d.top+t+15,left:d.left}}};e.show= function(a){if(c.lock)c.lock=false;else{c.lock=true;d=c.getBoundingClientRect();var h=i.scrollTop+j.scrollTop,f=i.scrollLeft+j.scrollLeft;a.p=a.p||"right";var b=e.append(a.p,a.closeBtn||false);b.getElementsByTagName("DIV")[0].innerHTML=a.content;var p=o[a.p](b.offsetWidth,b.offsetHeight);b.style.top=p.top+h+"px";b.style.left=p.left+f+"px";a.time&&setTimeout(function(){e.clear(document.getElementById("lj"+m))},a.time);a.fn&&a.fn.call(c,document.getElementById("lj"+m));g=function(w,q){return function(){var u= i.scrollTop+j.scrollTop,v=i.scrollLeft+j.scrollLeft;d=c.getBoundingClientRect();var r=o[a.p](b.offsetWidth,b.offsetHeight);q.style.top=r.top+u+"px";q.style.left=r.left+v+"px"}}(c,b);n?k.attachEvent("onresize",g):k.addEventListener("resize",g,false)}};e.append=function(a,h){var f=m=Math.floor(Math.random()*1E4),b=document.createElement("DIV");b.id="lj"+f;b.innerHTML='<div class="lj-tipsWrap" id="tipsWrap-<%=r%>"><div></div><span class="lj-in lj-<%=p%>"><span class="lj-in"></span></span><a href="javascript:void(0)" id="ljClose<%=r%>" class="lj-close">x</a></div>'.replace("<%=p%>", a).replace(/<%=r%>/g,f);document.body.appendChild(b);if(h)document.getElementById("ljClose"+f).onclick=e.hide;else document.getElementById("ljClose"+f).style.display="none";return document.getElementById("tipsWrap-"+f)};e.clear=function(a){a&&a.parentNode&&a.parentNode.removeChild(a);n?k.detachEvent("onresize",g):k.removeEventListener("resize",g,false);c.lock=false};e.hide=function(){e.clear(document.getElementById("lj"+m))};return e}}(); </script> <!--这里是没有压缩的代码 window.ljtips = function(){ var html = "<div class="lj-tipsWrap" id="tipsWrap-<%=r%>"> <div></div> <span class="lj-in lj-<%=p%>"><span class="lj-in"></span></span> <a href="javascript:void(0)" id="ljClose<%=r%>" class="lj-close">x</a> </div>"; var dg = function(id){return document.getElementById(id);}; var dt = function(parent, nodeName){return parent.getElementsByTagName(nodeName);}; var db = document.body; var dd = document.documentElement; var of = 15;// 偏移量 var prefix = 'lj';// 前缀 var isie = /msies([d.]+)/.test(navigator.userAgent.toLowerCase()); var w = window; var lock = true;// 锁定同一对象 多次弹出提示 return function(id){ var elem = id ? typeof id == "string" ? dg(id) : id : this; var offset = null; var width = elem.offsetWidth; var height = elem.offsetHeight; var rand = 0;// 随即值 var func = null;// 窗口变化绑定的函数 var _this = {}; var pos = { left : function(w, h){return {top:offset.top , left:offset.left - w - of}}, top : function(w, h){return {top:offset.top - h - of, left:offset.left}}, right : function(w, h){return {top:offset.top , left:offset.left + width + of}}, bottom : function(w, h){return {top:offset.top + height + of , left:offset.left}} }; _this.show = function(obj){ if(elem.lock){ elem.lock=false;return; }else elem.lock=true; offset = elem.getBoundingClientRect(); var top = db.scrollTop + dd.scrollTop; var left= db.scrollLeft + dd.scrollLeft; obj.p = obj.p || 'right'; var wrap = _this.append(obj.p, obj.closeBtn || false); dt(wrap, "DIV")[0].innerHTML = obj.content; var p = pos[obj.p](wrap.offsetWidth,wrap.offsetHeight); wrap.style.top = p.top + top + "px"; wrap.style.left = p.left + left + "px"; obj.time && setTimeout(function(){_this.clear(dg(prefix+rand));}, obj.time); obj.fn && obj.fn.call(elem, dg(prefix+rand)); //--检测窗口发生变化 func = function(a, b){ return function(){ var top = db.scrollTop + dd.scrollTop; var left= db.scrollLeft + dd.scrollLeft; offset = elem.getBoundingClientRect(); var c = pos[obj.p](wrap.offsetWidth, wrap.offsetHeight); b.style.top = c.top + top + 'px'; b.style.left = c.left + left + 'px'; } }(elem, wrap); isie ? w.attachEvent('onresize', func) : w.addEventListener('resize', func, false); } _this.append = function(p,closeBtn){ var r = rand = Math.floor(Math.random() * 10000); var x = document.createElement("DIV"); x.id = prefix + r; x.innerHTML = html.replace("<%=p%>",p).replace(/<%=r%>/g,r); document.body.appendChild(x); if(closeBtn){ dg("ljClose"+r).onclick = _this.hide; }else{ dg("ljClose"+r).style.display = "none"; } return dg("tipsWrap-" + r); } _this.clear = function(a){ a && a.parentNode && a.parentNode.removeChild(a); isie ? w.detachEvent('onresize',func) : w.removeEventListener('resize', func, false); elem.lock = false;// 解除锁定 } _this.hide = function(){ _this.clear(dg(prefix + rand)); } return _this; } }(); --> <h2>请划过或点击下面带框的文本</h2> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test1">看我这里一个DIV</span><br> <input style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" value="点击我" id="test2"><br> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test3">提示在我的下面出现</span><br> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test4">提示在左边出现</span><br> <span style="display:inline-block; padding:5px; border:1px solid #CCC;margin:30px 30px 30px 100px;" id="test5">提示出现2秒后会自动消失</span><br> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test6">提示可以有关闭按钮</span><br> <div style="text-align:center;"> <span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test7">不同担心页面放大缩小会位置会偏移哦</span><br> </div> <h2>优点</h2> <ul> <li>1:兼容 各种浏览器</li> <li>2:自己定义TIPS样式(颜色),CSS3渐进增强</li> <li>3:多方向弹出提示</li> <li>4:纯CSS+javascript(不包含任何图片)</li> <li>5:体积超级小 CSS+js = 3k</li> </ul> <h2>参数配置</h2> <ul> <li>ljtips(object).show(JSON)</li> <li>object: DOM对象ID(test1), DOM对象</li> <li><pre> json:{ content:提示的消息内容(必须), p:提示框位置(可选值top left bottom right),默认为right(可选), closeBtn:是否有关闭按钮(true false) 默认值(false)(可选), time:多少毫秒提示框消失(可选) } </pre></li> </ul> <h3>使用说明</h3> <ul> <li>主要方法 .show(); .hide();.clear(); 一般你只需要使用show,hide;</li> <li>使用1</li> <li>首先实例化一个ljtips(var tips=ljtips('test1')); 然后使用tips.show(JSON)</li> <li>使用2</li> <li>在行内调用提示框"<div onclick=" ljtips(this).show(JSON); "></div>"</li> <li>使用3</li> <li>在JS里调用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧!没有关闭按钮!",p:'right'})};</li> </ul> <script type="text/javascript"> var test1 = ljtips('test1'); document.getElementById("test1").onmouseover = function(){test1.show({content:"鼠标划过时候的TIPS...<br>兼容主流浏览器 IE 6 7 8 chorme Firefox Opera Safari"})}; document.getElementById("test1").onmouseout = function(){test1.hide();}; document.getElementById("test2").onfocus = function(){ljtips(this).show({content:"这个提示会在<br>input的上方!有个关闭按钮哦",p:'top',closeBtn:true})}; document.getElementById("test3").onmouseover = function(){ljtips(this).show({content:"我在下面出现了!不要认为会用到图片哦!",p:'bottom',closeBtn:true})}; document.getElementById("test4").onmouseover = function(){ljtips(this).show({content:"我可以在4个方向上",p:'left',closeBtn:true})}; document.getElementById("test5").onmouseover = function(){ljtips(this).show({content:"提示出现2秒后会自动消失",p:'bottom',time:2000})}; document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧!没有关闭按钮!",p:'right'})}; document.getElementById("test7").onmouseover = function(){ljtips(this).show({content:"您可以放大或者缩小浏览器窗口!<br>他会跟随这个绝对位置,不会有丝毫偏差。",p:'right',closeBtn:true})}; </script> </body> </html>
本站所有特效都是站长亲自测试后发布的,如果运行代码无效果,请复制到您的本机运行
运行代码
复制代码
另存代码
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
转载请注明(B5教程网)原文链接::
https://b5.mxunkeji.com/content-68-92-1.html
相关热词搜索:
js文字特效
js网页特效
jquery特效
上一篇:
网站内容页字体大中小代码或字号缩放代码
下一篇:
js实现文本框里打字机效果
最新推荐
[
网络推广
]
24h无人值守共享自助洗车解
[
网络推广
]
微信小程商家wifi码是什么?
[
网络推广
]
企业光伏数据对接碳达峰系统
[
互联网资讯
]
CentOS官方已计划停止维护Ce
[
PHP教程
]
PHP 主力开发因生活压力不
[
网络营销
]
抖音自动关注、自动点赞、自
[
网络推广
]
阿里云优惠券|阿里云代金券|
[
网络推广
]
阿里云 ECS实例升级、续费
[
互联网资讯
]
我名下有几张移动电话卡?有
[
互联网资讯
]
互联网平台相互屏蔽网址链接
本周排行
[
文字特效
]
DIV+CSS实现鼠标经过悬停在图片上时图片下方显示文字说明
[
文字特效
]
用css获取一串文字的第一个字,并将其定义为指定大小特效
[
文字特效
]
让一组数字随机显示位置
[
文字特效
]
javascript滚动公告板效果
[
文字特效
]
js文字特效篇--闪动的文字
[
文字特效
]
jquery-打字机效果
[
文字特效
]
旋转的文字
[
文字特效
]
简易的单数字随机抽奖,抽取随机数的js特效代码_文字特效
[
文字特效
]
文本向上滚动效果
[
文字特效
]
js文字提示效果
关于我们
关于我们
赞助我们
加入我们
版权声明
联系我们
联系我们
QQ技术群
合作方式
广告服务
业务合作
常见问题
意见反馈
网站地图
在线投稿
积分获取
在线充值
本站不承担任何版权问题,如果我们侵犯了您的利益,请来信
告知(634381967@qq.com),我们会在第一时间处理!
© 苏ICP备20040182号
B5教程网 版权所有