照片查看器的製做代碼

時間 2019-11-24

標籤照片查看製做代碼欄目快樂工作简体版

原文原文鏈接

<!doctype html>html

<html>app

<title>照片查看器</title>ui

/*基礎樣式必定要記得清除，或者會對佈局形成影響。*/this

/*樣式的設置根據本身的素材及佈局來設置。*/spa

<style>htm

*{圖片

　　　　margin:0;ip

　　　　padding:0;utf-8

}

#box{　　

　　　　width:600px;height:300px;margin:100 auto;position:relative;

}

#box ul li{

　　　　　　width:200px;

　　　　　　height:150px;

　　　　　　list-style:none;

}

#box ul li img{

　　　　　　width:200px;

　　　　　　height:150px;

　　　　　　float:left;

}

.mark{

　　　　　　width:600px;

　　　　　　height:300px;

　　　　　　background-color:#000;

　　　　　　opacity:0.5;

}

.pho{

　　　　　　widht:400px;

　　　　　　height:200px;

　　　　　　position:absolute;

　　　　　　left:50%;

　　　　　　top:50%;

　　　　　　margin-left:-200px;

　　　　　　margin-top:-100px;

}

.close{

　　　　　　width:25px;

　　　　　　height:25px;

　　　　　　background-color:red;

　　　　　　text-align:center;

　　　　　　position:absolute;

　　　　　　left:500px;

　　　　　　top:50px;

　　　　　　cursor:pointer;

}

</style>

<body>

　　　　　　<ul>

　　　　　　</ul>

　　　　</div>

　　　　　　//先獲取元素

　　　　　　var box=document.getElementById("box");

　　　　　　var lis=document.getElementsByTagName('li');

　　　　　　//遍歷li中的圖片

　　　　　　for(var i=0,len=lis.length;i<len;i++){

　　　　　　　　lis[i].onclick=function(){

　　　　　　　　//建立一個新層，設爲模糊。

　　　　　　　　var newDiv=document.createElement('div').

　　　　　　　　newDiv.className='mark';

　　　　　　　　//追加到box中

　　　　　　　　box.appendChild(newDiv);

　　　　　　　　//建立新的圖片層，找到src屬性，追加到box中。

　　　　　　　　var newImg=document.createElement('img');

　　　　　　　　newImg.className='pho';

　　　　　　　　newImg.src=this.firstChild.getAttruibute('src');

　　　　　　　　box.appendChild(newImg);

　　　　　　　　//建立一個關閉span。

　　　　　　　　var newSpan=document.createElement(''span');

　　　　　　　　newSpan.className='close';

　　　　　　　　box.appendChild(newSpan);

　　　　　　　　//關閉圖層

　　　　　　　　newSpan.onclick=function(){

　　　　　　　　　　box.removeChild(newDiv);

　　　　　　　　　　box.removeChild(newImg);

　　　　　　　　　　box.removeChild(newSpan);

}

</script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。