图片查察器雏形，JS+CSS行使层模仿的代码

发布时间：2018-08-18 09:29:55 所属栏目：编程来源：站长网

导读：一款图片查察器雏形，前端技能大牛行使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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE