文档章节

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篇关于“视觉和前端”如何解决在线网页挂...

网易云
09/25
0
0
从小数学就不及格的我,竟然用极坐标系表白了我的女神!(附代码)

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由郭诗雅发表于云+社区专栏 在数学中,极坐标系(英语:Polar coordinate system)是一个二维坐标系统。该坐标系统中任意位置...

腾讯云加社区
09/20
0
0
iOS与JS交互之UIWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「UIWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
08/28
0
0
iOS与JS交互之UIWebView-JavaScriptCore框架

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「JavaScriptCore」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前...

QiShare
08/30
0
0
iOS与JS交互之WKWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
09/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python基础案例教程

一、超市买薯片 # 用户输入薯片的单价danjia = float(input("薯片的单价"))# 用户输入购买袋数daishu = int(input("购买的袋数"))# 计算总价zongjia = danjia * daishu# 输出结果...

linuxprobe16
49分钟前
0
0
采用CXF框架发布webservice

package cn.it.ws.cxf.a;import javax.jws.WebParam;import javax.jws.WebResult;import javax.jws.WebService;@WebService(serviceName="languageManager")public interface ......

江戸川
51分钟前
0
0
HashMap工作原理及实现

HashMap工作原理及实现 1. 概述 什么时候会使用HashMap?他有什么特点? 知道HashMap的工作原理吗? 知道get和put的原理吗? 知道hash的实现吗?为什么要这样实现? 如果HashMap的大小超过了...

傅小水water
59分钟前
1
0
swagger如何屏蔽某些接口,不对外公开--使用@ApiIgnore

@ApiIgnore@RestController@RequestMapping(value = "/i18nTest")public class I18nTestController {// @Resource// private LocaleMessageSourceService localeMessageSourceSe......

karma123
今天
1
0
大数据技术学习,大数据处理为何选择Spark,而不是Hadoop

大数据处理为何选择Spark,而不是Hadoop。 一.基础知识 1.Spark Spark是一个用来实现快速而通用的集群计算的平台。 在速度方面,Spark扩展了广泛使用的MapReduce计算模型,而且高效地支持更多...

董黎明
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部