跳至
[1]
[2]
[3]
[全屏预览]
@charset "utf-8";
/* CSS Document */
/* ljtips 1.0 */
/* lujun idche@qq.com*/
/* 2010-10-8*/
.lj-tipsWrap,.lj-in,.lj-close {
display: inline-block;
color: #fff
}
.lj-tipsWrap {
background: #000;
filter:alpha(opacity=60);-moz-opacity:0.6; -khtml-opacity:0.6;
opacity : 0.6;
line-height: 1.6em;
padding: 10px 15px;
position: absolute;
text-align: left;
text-align: left;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.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: #fff;
font-size: 14px;
height: 9px;
width: 9px;
overflow: hidden;
line-height: 0.5em;
right: 0;
top: 0;
}
.lj-close:hover {
color: red;
}
.lj-top {
border-top: 10px solid #000;
bottom: -20px;
left: 3px;
}
.lj-top span {
border-top: 10px solid #000;
margin: -11px 0 0 -10px;
}
.lj-right {
border-right: 10px solid #000;
left: -20px;
top: 3px;
}
.lj-right span {
border-right: 10px solid #000;
margin: -10px 0 0 -9px;
}
.lj-bottom {
border-bottom: 10px solid #000;
top: -20px;
left: 3px;
}
.lj-bottom span {
border-bottom: 10px solid #000;
margin: -9px 0 0 -10px;
}
.lj-left {
border-left: 10px solid #000;
right: -21px;
top: 3px;
}
.lj-left span {
border-left: 10px solid #000;
margin: -10px 0 0 -11px;
}
.lj-left ~ .lj-close {
left: 0;
}
/*css 3 渐进增强*/
.lj-tipsWrap {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
2. [文件] LJTIPS.html ~ 2KB 下载(0) 跳至 [1] [2] [3] [全屏预览]
<!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>简单提示框插件</title>
<link href="ljtips.css" type="text/css" rel="stylesheet" />
</head>
<body style="text-align:center;">
<input type="text" id="test" style="margin:50px auto;" /><br/>
<input type="button" value="左弹出" onclick="a.show({content:'Hello World! This is LJTIPS.',p:'left',clear:true,time:1000})" title="1秒消失" />
<input type="button" value="右弹出" onclick="a.show({content:'Hello World! This is LJTIPS.<br/>换行',p:'right',clear:true,closeBtn:true})" title="有关闭按钮" />
<script type="text/javascript" src="ljtips.js"></script>
<script type="text/javascript">
/* 实例化调用*/
var a = ljtips('test');
a.show({content:'这里是LJTIPS弹出的提示<br>hello word',p:'right',clear:true,closeBtn:true});
</script>
<div style="text-align:left;" >
必须文件：ljtips.css,<br/>ljtips.js(JS请在页面最后加载，也就是DOM元素载入完成以后)
</div>
<dl style="text-align:left;">
<dt>ljtips();</dt>
<dd>参数:String 页面DOM 元素ID<br/>
element 页面DOm元素对象
</dd>
<dd>返回值:Object
{show,hide}
</dd>
<dl>.show()</dl>
<dd>参数{conteng:String,
p:String,
clear:boolean,
closeBtn:boolean,
time:1000
}</dd>
<dd>
conteng:提示内容,可以是HTML片段<br/>
p:提示的位置。可选参数[top,bottom.left,right] 默认right<br/>
clear:强制清除他已经存在的提示 默认 false<br/>
boolean:是否有关闭按钮 默认false<br/>
time:提示显示时间，单位毫秒 默认不消失<br/>
<br/>
</dd>
<dl>.hide()</dl>
<dd>清除当前对象上的提示，无参数</dd>
<dd><a href="#" onclick="ljtips(this).show({content:'行内调用',closeBtn:true});">点击我</a></dd>
</dl>
</body>
</html>
3. [文件] ljtips.js ~ 3KB 下载(0) 跳至 [1] [2] [3] [全屏预览]
// JavaScript Document
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 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 && !obj.clear)return false;
if(obj.clear)_this.clear(dg(prefix + rand));
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);
w.attachEvent ? 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);
// try{
w.attachEvent ? w.detachEvent('onresize',func) : w.removeEventListener('resize', func, false);
// }catch(e){}
elem.lock = false;// 解除锁定
}
_this.hide = function(){
_this.clear(dg(prefix + rand));
}
return _this;
}
}();
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전ByDDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
