文档章节

JavaScript实现换肤效果

liuvanl
 liuvanl
发布于 2017/04/23 21:29
字数 157
阅读 89
收藏 0
点赞 0
评论 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
巫山
前端工程师
浏览器加载和渲染html的顺序

前阵子,在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享,这里再总结一下吧。 浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染...

凯文加内特
2014/03/19
0
0
好的javascript程序员

这段时间一直在使用JS进行开发,其实我挺喜欢JS的,一个主要的原因就是自由。JS限制较少可以容易的实现自己的一些思想。或者换种说法,就是可以写出极其精简的代码,虽然精简不到LISP的水平,...

崔钢
2014/10/25
0
0
JavaScript中call()与apply()有什么区别?

今天读《JavaScript权威指南》时发现其中有段代码用到了apply方法用于递归实现数组的展开。可是我不懂这个函数的用法,因此查了一下,将资料整理如下。 Javascript的每个Function对象中有一个...

小微
2012/08/27
0
1
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5
JQuery中操作Css样式的方法

获取和设置样式 追加样式 移除样式 切换类名 判断是否含有某项样式 获取css样式中的样式 设置单个样式 设置多个样式 offset()方法 它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含...

Bery
2017/10/20
0
0
面试 | Ajax进阶----jQuery中的Ajax(下)

剩下的两个API: 1.$.getScript()是动态获取js代码的 有时候我们看到在网上看到的一些效果,找不到对应js文件,那就说明有可能是动态获取js代码了。 $.getScript(url,callback) - 动态读取脚...

一个敲代码的前端妹子
06/28
0
0
Bootstrap JS插件使用实例(6)-折叠(手风琴效果)

本篇文章讨论Bootstrap的js插件的折叠效果(bootstrap-collapse.js),即控制页面某一区域内容的显示和隐藏。通过将多个这样的折叠元素组合起来,我们就可以实现诸如手风琴或是导航栏这样的复杂...

doliangzhe
2013/05/19
0
2
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
JavaWeb03-HTML篇笔记(五)

1.1 案例四:使用JS完成后台数据展示的隔行换色的表格:1.1.1 需求: 在后台展示数据的页面上,通常使用表格标签进行数据的展示.没有背景的表格比较难看的,可以使用JS控制表格的隔行换色. 1...

我是小谷粒
05/04
0
0
【转】这些年,我收集的JavaScript代码(二)

以下内容来自,真心不错的系列博文,希望原楼主继续分享: http://7788a.iteye.com/blog/1610177 一、JavaScript跨平台事件   对于跨平台事件我们一般这么写(只例举添加事件): function a...

王小明123
2012/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你!

前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据。 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 HashMap,没有它...

crossoverJie
7分钟前
1
0
OSChina 周一乱弹 —— 你的朋友圈有点生锈了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Devoes :分享Trademark的单曲《Only Love (电视剧《妙手仁心 II》插曲)》: 《Only Love (电视剧《妙手仁心 II》插曲)》- Trademark 手机党少...

小小编辑
今天
204
9
【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
今天
1
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
1
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
2
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
AB 压力测试

Ubuntu 安装AB apapt-get install apache2-utils 使用AB 压力测试 -c 并发数 -n请求总数 ab -c 3000 -n 10000 http://localhost/test/index.php AB只能测试localhost 返回结果 This is Apac......

xiawet
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部