这篇文章主要为大家详细介绍了 JavaScript 仿百度切换皮肤功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
js 仿百度切换皮肤效果:(换肤出来一个 div,选择你想要的图片,作为网页背景,保存)
要点:cookie 保存状态
html 代码:
- <body>
- <div id="header">
- <div id="header_con">
- <div class="dbg">
- <a href="javascript:;" onclick="showImgBox()">
- 换肤
- </a>
- </div>
- </div>
- </div>
- <div id="dimgBox">
- <div id="dimgtitle">
- <div id="imgtitle_con">
- <div id="title1">
- <a href="javascript:;">
- 热门
- </a>
- </div>
- <div id="title2">
- <a href="javascript:;" onclick="hideImgBox()">
- 收起
- </a>
- </div>
- </div>
- </div>
- <div id="imglist">
- <div class="imgitem">
- <img src="image/bg0.jpg" />
- </div>
- <div class="imgitem">
- <img src="image/bg1.jpg" />
- </div>
- <div class="imgitem">
- <img src="image/bg2.jpg" />
- </div>
- <div class="imgitem">
- <img src="image/bg3.jpg" />
- </div>
- <div class="imgitem">
- <img src="image/bg4.jpg" />
- </div>
- </div>
- </div>
- </body>
CSS 代码:
- * {
- margin:0px;
- padding:0px;
- }
- #header {
- height:40px;
- width:100%;
- background:#000000;
- }
- a {
- text-decoration:none;
- }
- .dbg {
- float:left;
- }
- #dimgBox {
- width:100%;
- height:140px;
- /*position:absolute;*/
- background:#ffffff;
- top:0px;
- left:0px;
- display:none;
- }
- #dimgtitle {
- height:40px;
- width:100%;
- border-bottom:solid 1px #ccc;
- }
- #imgtitle_con {
- width:1180px;
- height:40px;
- margin:0px auto;
- line-height:40px;
- }
- #title1 {
- float:left;
- }
- #title1 a {
- display:block;
- background:#04a6f9;
- height:40px;
- color:#ffffff;
- text-align:center;
- }
- #title2 {
- float:right;
- }
- #imglist {
- height:65px;
- width:1180px;
- margin: 0px auto;
- }
- .imgitem {
- float:left;
- margin-top:10px;
- margin-left:5px;
- }
- .imgitem img {
- width:100px;
- }
js 代码:
效果图:
来源: http://www.phperz.com/article/17/0328/264356.html