동적 전환 그림
// JavaScript Document
pop = {
triggerClass:'picturepop',
openPopupLinkClass:'popuplink',
popupClass:'popup',
displayPrefix:'Hide',
popContainer:null,
init:function(){
if(!document.getElementById || !document.createTextNode){
return;
}
var allLinks = document.getElementsByTagName('a');
for(var i=0;i<allLinks.length;i++){
if(!DOMhelp.cssjs('check',allLinks[i],pop.triggerClass)){
continue;
}
DOMhelp.addEvent(allLinks[i],'click',pop.openPopup,false);
allLinks[i].onclick = DOMhelp.safariClickFix;
allLinks[i].preset = allLinks[i].innerHTML;
}
},
openPopup:function(e){
var t = DOMhelp.getTarget(e);
if(t.nodeName.toLowerCase() != 'a'){
t = t.parentNode;
}
if(!pop.popContainer){
t.innerHTML = pop.displayPrefix + t.preset;
pop.popContainer = document.createElement('div');
DOMhelp.cssjs('add',pop.popContainer,pop.popupClass);
DOMhelp.cssjs('add',t,pop.openPopupLinkClass);
var newimg = document.createElement('img');
newimg.setAttribute('src',t.getAttribute('href'));
pop.popContainer.appendChild(newimg);
document.body.appendChild(pop.popContainer);
pop.positionPopup(t);
}else{
pop.killPopup();
t.innerHTML = t.preset;
DOMhelp.cssjs('remove',t,pop.openPopupLinkClass);
}
DOMhelp.cancelClick(e);
},
positionPopup:function(o){
var x=0;
var y=0;
var h=o.offsetHeight;
while(o!=null){
x += o.offsetLeft;
y += o.offsetTop;
o = o.offsetParent;
}
pop.popContainer.style.left = x + 'px';
pop.popContainer.style.top = y + h + 'px';
},
killPopup:function(e){
pop.popContainer.parentNode.removeChild(pop.popContainer);
pop.popContainer=null;
DOMhelp.cancelClick(e);
}
}
DOMhelp.addEvent(window,'load',pop.init,false);<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example: Replacing image popups with layer ads</title>
<style type="text/css">
@import 'style/picturepopu.css';
</style>
<!-- <script type="text/javascript" src="js/DOMhelp.js"></script>
<script type="text/javascript" src="js/picturepopu.js"></script> -->
<script type="text/javascript" src="js/DOMhelp.js"></script>
<script type="text/javascript" src="Chapter6/picturePopup.js"></script>
</head>
<body>
<p>Sometimes it is better not to wake a
<a class="picturepop" href="Chapter6/pictures/thumbs/dog7.jpg">Sleeping Dog</a>.</p>
</body>
</html>/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
DOMhelp={
//
cssjs:function(a,o,c1,c2){
switch(a){
case 'swap':
if(!DOMhelp.cssjs('check',o,c1)){
o.className.replace(c2,c1);
}else{
o.className.replace(c1,c2);
}
break;
case 'add':
if(!DOMhelp.cssjs('check',o,c1)){
o.className += o.className ? ' '+c1 : c1;
}
break;
case 'remove':
var rep = o.className.match(' '+c1) ? ' '+c1 : c1;
o.className = o.className.replace(rep,'');
break;
case 'check':
var found = false;
var temparray = o.className.split(' ');
for(var i=0;i<temparray.length;i++){
if(temparray[i]==c1){
found = true;
}
}
return found;
break;
}
},
safariClickFix:function(){
return false;
},
//Find the last sibling of the current node
lastSibling:function(node){
var tempObj = node.parentNode.lastChild;
while(tempObj.nodeType != 1 && tempObj.previousSibling != null){
tempObj = tempObj.previousSibling;
}
return (tempObj.nodeType==1) ? tempObj : false;
},
//Find the first sibling of the current node
firstSibling:function(node){
var tempObj = node.parentNode.firstChild;
while(tempObj.nodeType != 1 && tempObj.nextSibling != null){
tempObj = tempObj.nextSibling;
}
return (tempObj.nodeType==1) ? tempObj : false;
},
//Retrieve the content fo the first text node sibling of the current node
getText:function(node){
if(!node.hasChildNodes()){
return false;
}
var reg=/^\s+$/;
var tempObj = node.firstChild;
while(tempObj.nodeType != 3 && tempObj.nextSibling != null || reg.test(tempObj.nodeValue)){
tempObj = tempObj.nextSibling;
}
return (tempObj.nodeType == 3) ? tempObj.nodeValue:false;
},
//Set the content of the first text node sibling the current node
setText:function(node,txt){
if(!node.hasChildNodes()){
return false;
}
var reg = /^s+$/;
var tempObj = node.firstChild;
while(tempObj.nodeType != 3 && tempObj.nextSibling != null || reg.test(tempObj.nodeValue)){
tempObj = tempObj.nextSibling;
}
if(tempObj.nodeType == 3){
tempObj.nodeValue = txt;
}else{
return false;
}
},
//Find the text pr previous sibling that is an element
//and not a text node or line break
//
//1 ，-1
closestSibling:function(node,direction){
var tempObj;
if(direction == -1 && node.previousSibling != null){
tempObj = node.previousSibling;
while(tempObj.nodeType != 1 && tempObj.previousSibling != null){
tempObj = tempObj.previousSibling;
}
}else if(direction==1 && node.nextSibling != null){
tempObj=tempObj.nextSibling;
while(tempObj.nodeType != 1 && tempObj.textSibling != null){
tempObj = tempObj.nextSibling;
}
}
return tempObj.nodeType==1 ? tempObj : false;
},
//Create a new link containing the given text
createLink:function(to,txt){
var tempObj = document.createElement('a');
tempObj.appendChild(document.createTextNode(txt));
tempObj.setAttribute('href',to);
return tempObj;
},
//Create a new element containing the given text
createTextElem:function(elm,txt){
var tempObj = document.createElement(elm);
tempObj.appendChild(document.createTextNode(txt));
return tempObj;
},
//Simulate a debugging console to avoid the nees for alerts
initDebug:function(){
if(DOMhelp.debug){
DOMhelp.stopDebug();
}
DOMhelp.debug = document.createElement('div');
DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
},
setDebug:function(bug){
if(!DOMhelp.debug){
DOMhelp.initDebug();
}
DOMhelp.debug.innerHTML += bug+'
';
},
stopDebug:function(){
if(DOMhelp.debug){
DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
DOMhelp.debug = null;
}
},
//Cross-browser event handing for IE5+ ,NS6+ and Mozilla/Gecko
//By Scott Andrew
addEvent:function(elm,evType,fn,useCapture){
if(elm.addEventListener){
elm.addEventListener(evType,fn,useCapture);
return true;
}else if(elm.attachEvent){
var r = elm.attatchEvent('on' + evType,fn);
return r;
}else{
elm['on' + evType] = fn;
}
},
// ie target srcElement
//button
getTarget:function(e){
var target;
if(window.event){
target = window.event.srcElement;
}else if(e){
target = e.target;
}else{
target = null;
}
if(target.nodeName.toLowerCase() != 'a'){
target = target.parentNode;
}
return target;
},
// Safari stopPropagation ， ，
stopDefault:function(e){
if(window.event && window.event.returnValue){
window.event.cancelBubble = true;
}
if(e && e.preventDefault){
e.preventDefault();
}
},
// stopPropagation() preventDefault()
cancelClick:function(e){
if(window.event && window.event.cancelBubble && window.event.returnValue){
window.event.cancelBubble = true;
window.event.returnValue = false;
return ;
}
if(e && e.stopPropagation && e.preventDefault){
e.stopPropagation();
e.preventDefault();
}
}
} *{
margin:0;
padding:0;
}
body{
font-size:.8em;
font-family:arial,sans-serif;
color:#333;
background:#fff;
padding:.5em;
}
h1{
font-size:1.2em;
}
p{
margin-top:.5em;
}
.popup{
padding:.5em;
background:url(indicator_medium.gif) center center no-repeat #eee;
border:1px solid #999;
position:absolute;
top:0;
left:0;
}
a.popuplink{
background:#eee;
padding:0 .5em;
border:1px solid #999;
text-decoration:none;
font-weight:bold;
color:#666;
margin-bottom:-1px;
}그림은 스스로 바꿀 수 있습니다. css에서 그림을 교체해야 합니다. html 코드를 합치면 그림을 교체해야 합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
