IT狗

"美女相册"的 js 实现代码

划重点拉!  先来解释一下子标题

这个所谓的美女相册呢  并不是和你们想的一样龌龊

当然了 好像看起来也很龌龊 但是很多的版面都能用到这个功能的

我来简单举个例子:

在一个网页里  这上面有三个图  如果你点击任意一个  下边的空白处就会展示出那个图的放大版本 话不多说 上图

很多很龌龊的网站就是这种结构 看图片哦  很多人应该看过把哈哈哈哈哈

好了好了  我要说这个具体怎么写 怎么实现的了

我要再说一下  这个呢为什么没放美女图片呢 

因为当时这个我是在教室里码出来的哈哈哈哈 周围都是人不好意思

~~~~stop

我直接把html和css 代码粘上  不去讲了因为我主要想总结一下 关于js的部分

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <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>
</body>
</html>

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论