文档章节

JavaScript实现换肤效果

liuvanl
 liuvanl
发布于 2017/04/23 21:29
字数 157
阅读 90
收藏 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js换肤效果</title>
    <!-- 开始书写css代码 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url(images/0.jpg) top center;
        }
        .box {
            text-align: center;
            padding-top: 50px;
            height: 150px;
            background: rgba(255,255,255,.3);
        }
        .box img {
            cursor: pointer;
        }
    </style>
    <!-- 开始书写js代码 -->
    <script>
        window.onload = function (){
            //  获取所有的img标签
             var imgs = document.getElementsByTagName("img");
             //  使用for循环进行遍历
             for( var i = 0 ; i < imgs.length ; i++ ){
                 //  获取索引值
                 imgs[i].index = i;
                 imgs[i].onclick = function (){
                     // 打印出索引值
                     // alert(this.index);
                     document.body.style.backgroundImage = 'url(images/'+this.index+'.jpg)';
                 }
             }
        }
    </script>
</head>
<body>
    <div class="box">
        <img src="images/0.jpg" alt="" width="150">
        <img src="images/1.jpg" alt="" width="150">
        <img src="images/2.jpg" alt="" width="150">
    </div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
liuvanl
粉丝 1
博文 4
码字总数 635
作品 0
巫山
前端工程师
私信 提问
如何解决在线网页挂载本地样式的问题

本文来自网易云社区 作者:孙有军 简单的说,用你的设计为已上线的网站换一套皮肤。在不改变结构的基础上,让自己赏心悦目。 新年新气象,KS效率控第1篇关于“视觉和前端”如何解决在线网页挂...

网易云
2018/09/25
0
0
KonaKart 6.0 发布,Java电子商务软件

KonaKart 是Java电子商务软件,KonaKart 包含以下若干主要特性 : 标准的购物车特性——支持订单状态,订单历史,客户帐号,产品审查,最佳卖主列表和产品搜索 轻松从osCommerce进行迁移——...

红薯
2012/01/31
1K
3
如何用js实现给textarea赋值或者粘贴赋值

我在做一个博客自动发送程序,遇到一个困难,当写博客的时候,几乎所有的博客都会提供一个html编辑器,如何用js给这个编辑器的textarea赋值呢?使用.value="" 没有效果的,那么该怎么做?是赋...

rayzhao
2012/12/13
4.5K
4
JS 做的tab选项卡 在一次点击之后CSS hover 就失灵了

用js做了一个简单的tab选项卡,一共8个DIV,4个卡,4个内容,然后用JS点击事件判断,点哪个哪个的tab卡变换图片,然后对应内容div显示,其他则隐藏,同时要实现一个类似导航的滑动效果,起初...

sea__blue
2011/06/14
1K
8
artDialog v6 发布,JavaScript 对话框组件

artDialog v6 发布,官方没有提及改进内容。 art.Dialog 是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验。 功能: 支持锁定屏幕(遮罩)、模拟alert...

oschina
2013/12/08
14.9K
23

没有更多内容

加载失败,请刷新页面

加载更多

day27:expect批量杀进程|

1、linux下当前目录有一个文件ip-pwd.ini,内容如下: [root@localhost_002 shell100]# cat ip-pwd.ini 10.111.11.1,root,xyxyxy10.111.11.2,root,xzxzxz10.111.11.3,root,12345610.......

芬野de博客
49分钟前
2
0
分布式之数据库和缓存双写一致性方案解析(二)

引言 该文是对《分布式之数据库和缓存双写一致性方案解析》,一文的补充。博主在该文中,提到了这么一句话 应该没人问我,为什么没有先更新缓存,再更新数据库这种策略。 博主当时觉得,这种...

hensemlee
54分钟前
3
0
druid安装与案例

druid 可以运行在单机环境下,也可以运行在集群环境下。简单起见,我们先从单机环境着手学习。 环境要求 java7 或者更高版本 linux, macOS或者其他unix系统(不支持windows系统) 8G内存 2核C...

hblt-j
今天
0
0
bejson上线 gif转帧工具。

说道这个工具,不得不提一句经典格言“色Q是推动科技发展的动力” 有人发了这个图,我和所有人一样想看到那个瞬间。 当然,我没有PS,有没有太好的转帧工具,但是这并不妨碍我是一个技术死肥...

废柴大叔
今天
0
0
详解利用clear清除浮动的一些问题解决

下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden;} Quest......

前端小攻略
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部