js小练习（五）：简易电子相册的制作

（一）核心思想：

（1）写一个占位模块作为展板，通过getattribute和setattribute来获取点击内容。a标签设置onclick事件return false,获取但不跳转。

（2）考虑到平稳退化，尽可能的不使用内嵌函数。

（3）布局基本使用flex盒子模型。

（二）实现代码：
（1）html部分：

 <!--照片列表-->
    <div>
        <ul id="imageGallery">
            <li><a href="../../images/albumImgs/1.jpg" title="tree" >图片1</a></li>
            <li><a href="../../images/albumImgs/2.jpg" title="clerk"  > 图片2</a></li>
            <li><a href="../../images/albumImgs/3.jpg" title="waterlemon"  >图片3</a></li>
            <li><a href="../../images/albumImgs/4.jpg" title="book">图片4</a></li>
        </ul>
    </div>



    <!--展示板-->
    <div class="box">
        <img id="placeHolder" src="../../images/albumImgs/3.jpg" alt="my album" >
        <p id="description"> 显示描述</div>
    </div>

（2）js部分：

    window.onload = function(){ 
    gallery();
    
    } 
    
    function showPic(whichPic){ 
    var source = whichPic.getAttribute("href");
    var placehoder = document.getElementById("placeHolder");
    placehoder.setAttribute("src",source);
    var text =whichPic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
    
    } 
    
    function gallery(){ 
    var gallery = document.getElementById("imageGallery");
    var arr = document.getElementsByTagName("a");
    for(var i=0; i<arr.length; i++){
        arr[i].onclick = function(){
            showPic(this);     
            return false;
    
        }
    }

}

（3）css部分：

.title{ 
display: flex;
justify-content: center;
color: red;
font-size: 50px;

} 

ul{ 
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: center;

} 

li{ 
list-style: none;
margin:50px;

} 
.box{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center; 
}
#placeHolder{ 
width:600px;
height:400px;
border: 2px black;
box-shadow: 2px 2px 1px grey;
animation: anim 1s linear;  
} 

@keyframes anim{
0%{transform: scale(0);}
50%{transform: scale(0.5);}
100%{transform: scale(1);} 
}

注意：
css这部分本来是设置了一个点击逐渐扩大的出现效果，但是后来用js控制onclick事件的时候发现改变样式后return false不生效了，也就是说a标签组织跳转功能失效。暂时还没想到好的解决办法，有点头疼。

（三）实现效果：

js小练习（五）：简易电子相册的制作

（四）参考资料：
JavaScript DOM 编程艺术（顺路一说，js的红皮书确实太枯燥了，我个人是比较喜欢这种带有实例训练的书籍）

（五）源码下载：
https://download.****.net/download/qq_36680300/10707081

js小练习（五）：简易电子相册的制作

相关推荐