程序博客网 > 美工陈列是做什么

架构（HTML）样式（CSS）行为（JavaScript）三者分离

来源：互联网发布：美工陈列是做什么编辑：程序博客网时间：2024/06/05 23:51

三者分离有什么好处我就不说了，直接上代码，有不甚解的地方，评论里咨询，好了，直接上代码：

TEST.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JPG</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="StyleSheet.css" media="screen"/>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="jpg/1.jpg" title="onePic" >可爱</a>
</li>
<li>
<a href="jpg/2.jpg" title="twoPic" >活泼</a>
</li>
<li>
<a href="jpg/3.jpg" title="threePic" >清纯</a>
</li>
<li>
<a href="jpg/4.jpg" title="fourPic" >性感</a>
</li>
</ul>
<script src="example.js"></script>
</body>
</html>

StyleSheet.css

body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}

#imagegallery li {
display: inline;
}

#imagegallery li a img {
border: 0;
}

example.js

function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;

var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder")
placeholder.setAttribute("src", "jpg/5.jpg");
placeholder.setAttribute("alt", "my image gallery");

var description = document.createElement("p");
description.setAttribute("id", "description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);

var gallery = document.getElementById("imagegallery")
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}

function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;

var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}

function showPic(whichpic) {
if (!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");

if (placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src", source);
if (document.getElementById("description")) {
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";

var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return false;
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

阅读全文

0 0

美工陈列是做什么

美工陈列是做什么

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子真能量的句子正能量是什么意思正能量演讲正能量成语正能量的话励志正能量作文生活正能量语录有关正能量的句子早晨正能量积极正能量的句子经典语句正能量歌曲排行榜传递正能量的事例有关向日葵正能量的句子正能量的段子销售正能量运动正能量语录正能量语激人励志正能量语录正能量图早安正能量图片正能量小故事分享生活正能量的句子正能量的人正能量语录集正能量句子正能量的故事励志小故事正能量故事正能量的意思是什么人生正能量有正能量的励志语句每日分享的正能量语录正能量句子大全阳光正能量的句子销售正能量语录正能量事例正能量系统正能量的话语正能量激励人的好句子每日正能量的段子正能量的句子经典正能量故事分享早晨正能量语录