<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        body{

            background-image: url("image/1.jpg");

        }

        div{

            margin-top: 10px;

            padding-top: 50px;

            height: 150px;

            text-align: center;

            background: rgba(255,255,255,0.3);

        }

        img{

            width: 150px;

            margin: 0 10px;

            cursor: pointer;

        }

    </style>

</head>

<body>

<div>

    <img src="data:image/1.jpg">

    <img src="data:image/2.jpg">

    <img src="data:image/3.jpg">

    <img src="data:image/4.jpg">

    <img src="data:image/5.jpg">

</div>

<script>

var imgArr=document.getElementsByTagName("img");

for (var i = 0; i < imgArr.length; i++) {

    imgArr[i].onclick=function () {

        document.body.style.backgroundImage="url("+this.src+")";

    }

}

</script>

</body>

</html>

JS——百度背景图的更多相关文章

  1. JS实现背景图按时切换或者每次更新

    首先要有一个添加背景图片的div <div  id="myDiv"></div> css样式中添加背景tu图 body{height:100%;} #myD ...

  2. JS编写背景图切换

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. hammer.js实现背景图手势缩放调整位置

    <!DOCTYPE html> <html> <head> <script> function getxy(e){ var a=new Array() ...

  4. CSS 实现背景图尺寸不随浏览器缩放而变化

    <!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...

  5. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  6. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

  7. js 动态生成背景图 GeoPattern

    以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...

  8. JS判断图片是否加载完成 背景图404 快到碗里来

    面对这个问题 我最多做到表面笑嘻嘻 …… 真不知道测试怎么那么…… 啥都能给你测出来 有的没的都能给你测出来 算了算了  谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵 ————————————正 ...

  9. Node JS爬虫： 阮老师网站背景图

    小白,轻喷,本文教你三分钟入门爬虫 前言 有一天发现,阮一峰老师的博客图片很好看,想收藏一下,因为几百张,一张张下载太慢,朋友推荐了个谷歌插件(Fatkun)确实挺好用的,这之后就对爬虫有了兴趣,这个 ...

随机推荐

  1. MyBatis 3判断不为null

    <if test="type!=null and type!=''"> AND type = #{type} </if>

  2. yum 源本地化 (two)

    之前写过一个yum源本地化的文章. 后来发现那个方法有些缺陷, yum install --downloadonly --downloaddir=/tmp/atomicdownload memcach ...

  3. 小议C#错误调试和异常处理

    在程序设计中不可避免地会出现各种各样的错误,在编写代码时须要尽量避免. 在处理错误时,首先应该分析错 误的类型,找出出错的原因才干解决错误. 错误的分类 watermark/2/text/aHR0cD ...

  4. 一致性哈希server的数据维护

    本文是实例说明一致性哈希server的数据维护用途. 理论说明參考:http://blog.csdn.net/chenjiayi_yun/article/details/41624603 例如以下图所 ...

  5. Gradle学习之创建Task的方法

    请通过下面方式下载本系列文章的Github演示样例代码: git clone https://github.com/davenkin/gradle-learning.git     Gradle的Pr ...

  6. Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群

    Redis总结(五)缓存雪崩和缓存穿透等问题   前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...

  7. Zookeeper01

    ZooKeeper数据模型Znode

  8. java使用poi读取doc和docx文件（maven自动导入依赖包）

    java使用poi读取doc和docx文件(maven自动导入依赖包) 于是在网上搜寻了一阵之后才发现原来doc文档和excel一样不能用普通的io流的方法来读取,而是也需要用poi,于是进行了一番尝 ...

  9. 第二周 Leetcode 493. Reverse Pairs（HARD）

    leetcode 493跟经典的逆序对问题没有什么区别, 首先考虑对数组前半部和后半部求逆序对数,若能保证两段数组都有序,则显然可以在线性时间内求出对数. 所以我们采用归并排序的方法,一方面让数组有序 ...

  10. Spark 机器学习------逻辑回归

    package Spark_MLlib import javassist.bytecode.SignatureAttribute.ArrayType import org.apache.spark.s ...