Javasript实现照片墙

最新推荐文章于 2022-05-03 17:51:28 发布

Al_assad

最新推荐文章于 2022-05-03 17:51:28 发布

阅读量1.2k

点赞数

分类专栏： Javascript 文章标签： javascript 图片

本文链接：https://blog.csdn.net/Al_assad/article/details/52881395

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

网页链接：http://htmlpreview.github.io/?https://github.com/Al-assad/front-end-Web-repositoy/blob/master/snapshots.html

<!-- 解决图片库的js模块，在不借助body标签的background-image属性的情况下，可以解决使用同一src属性显示图片缩略图展示图和背景图的问题；  
    背景图是一个定位在底层的div块，可以更灵活地修改属性和添加特效；  
-->  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
		
<html>
<head>
    <meta charset="utf-8">
    <title>snapshots_2</title>
    <style type="text/css">
        div.bottom{
            z-index:-1;
            position:fixed;
            margin:0;
            padding:0;
            left:0px;
            top:0px;
			width:100%;
			height:100%;
        }
        div.up{
            z-index:0;
        }
        img.show{
            width:700px;
            height:auto;
            margin:30px;
            border:1px solid #ffdb90;
        }
        img.background{
            opacity:0.8; 
			height:100%;
			width:100%;
        }
        img.list{
            width:80px;
            height:auto;
            border:1px solid #ffdb90;
        }
        ul{
            margin:20px;
            padding:20px;
            width:600px;;
        }
        li{
            float:left;
            list-style-type:none;
            width:80px;
            height:1.5em;
            margin:10px 5px 5px 5px;;
            opacity:0.7;
        }
        li:hover{
            opacity:1;
        }
           p{
            text-align:center;
        }
        div.small{
            width:700px;
            margin-left:auto;
            margin-right:auto;
        }
    </style>
    <script type="text/javascript">
        function showPic(whichPic){
            var source = whichPic.getAttribute("href");
            document.getElementById("placeholder").setAttribute("src",source);
            document.getElementById("picBackground").setAttribute("src",source);
            var txt = whichPic.getAttribute("title");
            document.getElementById("decoration").innerHTML = txt ;
        }
    </script>
</head>
<body>

<div class="up">
    <h1 style="text-align:center;background-color:#6c8fff;height:50px;color:white;opacity:0.85">Snapshots</h1>
    <div class="small">
        <ul>
            <li><img class="list" href="snapshots/1.jpg" src="snapshots/1.jpg" οnclick="showPic(this);return false"
                      title="water,water,water" /></li>
            <li><img class="list" href="snapshots/2.jpg" src="snapshots/2.jpg" οnclick="showPic(this);return false"
                  title="red mountion" /></li>
            <li><img class="list" href="snapshots/3.jpg" src="snapshots/3.jpg" οnclick="showPic(this);return false"
                      title="mountion and water" /></li>
            <li><img class="list" href="snapshots/4.jpg" src="snapshots/4.jpg" οnclick="showPic(this);return false"
                      title="wow,waterfall" /></li>
            <li><img class="list" href="snapshots/5.jpg" src="snapshots/5.jpg" οnclick="showPic(this);return false"
                      title="sun and mountion" /></li>
        </ul>
    </div>
    <div style="clear:both"></div>
    <div class="small">
        <img class="show" id="placeholder" src="snapshots/white.jpg" />
    </div>
    <p id="decoration">choose picture</p>
</div> 
<div class="bottom">
    <img class="background"  src="snapshots/white.jpg" id="picBackground" />
</div>
</body> 
</html>

Al_assad

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javasript实现照片墙

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:
复制链接

扫一扫

专栏目录