美女相册的 js 实现代码
划重点拉！ 先来解释一下子标题
这个所谓的美女相册呢 并不是和你们想的一样龌龊
当然了 好像看起来也很龌龊 但是很多的版面都能用到这个功能的
然后在此处 我要为我的my$函数来进行一个诠释 就是为了多次使用getElementById带来的麻烦封装成了一个函数
function my$(id) {
return document.getElementById(id);
}
我来简单举个例子：
在一个网页里 这上面有三个图 如果你点击任意一个 下边的空白处就会展示出那个图的放大版本 话不多说 上图
很多很龌龊的网站就是这种结构 看图片哦 很多人应该看过把哈哈哈哈哈
好了好了 我要说这个具体怎么写 怎么实现的了
我要再说一下 这个呢为什么没放美女图片呢
因为当时这个我是在教室里码出来的哈哈哈哈 周围都是人不好意思
~~~~stop
我直接把html和css 代码粘上 不去讲了因为我主要想总结一下 关于js的部分
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><style>#caca {margin: 0 auto;overflow: hidden;}* {margin: 0;padding: 0;}#caca img {width: 200px;height: 200px;vertical-align: middle;}#caca ul {margin: 0 auto;width: 600px;height: 200px;}#caca li {float: left;}li {list-style-type: none;}#caca ul {width: 600px;}#display {width: 600px;height: 600px;margin: 0 auto;}#display img {width: 600px;height: 600px;}style>
head>
<body><div id="caca" ><ul><li><a href="11.jpg"><img src="11.jpg" alt="">a>li> //这里可是有讲究的哦 如果不把a的href设置成和图片一样 那么你操作起来会很麻烦 可能是我学的还不够厉害<li><a href="1.jpg"><img src="1.jpg" alt="">a>li> //我就以我的理解告诉你们 不要笑话我哦哈哈 在下面我先给你们看我如果不设置a的href是怎么实现的<li><a href="pic1.png"><img src="pic1.png" alt="">a>li>ul>div><div id="display"><img id="test" src="" alt="">div>