图片查看器雏形，JS+CSS使用层模拟的代码

发布时间：2018-08-19 00:06:04 所属栏目：Asp教程来源：站长网

导读：一款图片查看器雏形，前端技术大牛使用JS+CSS使用层模拟的代码，也就是说使用层替代了图片，同样有图片查看器的效果，右侧有导航切换。测试时候请把li标签内的内容更换为图片，每次点击标题，即可载入对应图片，就像一款图片浏览器一样。示例： !DOCTYP

　　一款图片查看器雏形，前端技术大牛使用JS+CSS使用层模拟的代码，也就是说使用层替代了图片，同样有图片查看器的效果，右侧有导航切换。测试时候请把li标签内的内容更换为图片，每次点击标题，即可载入对应图片，就像一款图片浏览器一样。

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>Js图片查看器</title> </head> <style> *{margin:0;padding:0;} ul,li{list-style-type:none;} .all{width:600px;height:800px;border:1px red solid;margin:70px auto;} .big{float:left;width:400px;height:600px;border:1px blue solid;margin:50px;text-align:center;line-height:600px;font-size:40px;} .small{float:left;width:80px;border:1px black solid;margin-top:50px;} .small li{height:100px;text-align:center;line-height:100px;cursor:pointer;} </style> <body> <div class="all"> <div class="big" id="bp"> asde </div> <div class="small"> <ul id="sp"> <li>pic1</li> <li>pic2</li> <li>pic3</li> <li>pic4</li> <li>pic5</li> <li>pic6</li> </ul> </div> </div> <script type="text/javascript"> var li = document.getElementById("sp").getElementsByTagName("li"); var bp = document.getElementById("bp"); function change(){ for (i=0;i<li.length;i++){ if (li[i]==this){ bp.innerHTML=li[i].innerHTML; } } } function allli(){ for (i=0;i<li.length;i++){ li[i].onclick=change; } } allli(); </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!