照片查看器的制作代码

最新推荐文章于 2020-11-02 15:43:33 发布

weixin_30915275

最新推荐文章于 2020-11-02 15:43:33 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/winpin-li-home1001/p/7736812.html

本文介绍了一个简单的网页版照片查看器实现方案。该方案通过HTML、CSS和JavaScript完成，能够展示一组图片，并在点击图片时显示放大效果。此外，还提供了一个关闭按钮用于关闭放大显示的图片。

<!doctype html>

<html>

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

/*基础样式一定要记得清除，或者会对布局造成影响。*/

/*样式的设置根据自己的素材及布局来设置。*/

<style>

　　　　margin:0;

　　　　padding:0;

}

#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>

转载于:https://www.cnblogs.com/winpin-li-home1001/p/7736812.html