<!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. CodeForces 370C

    这道题其实是挺简单的.首先很容易发现最多人用的颜色的人数如果大于n/2,就肯定不能让全部人都成功戴上两只不同颜色的手套.反过来想,如果这个人数小于等于n/2又如何呢?的确,这就能让全部人都能戴上两只不 ...

  2. T1462 素数和 codevs

    题目描述 Description 给定2个整数a,b 求出它们之间(不含a,b)所有质数的和. 输入描述 Input Description 一行,a b(0<=a,b<=65536) 输 ...

  3. W3School Redis教程（安装/基本操作/高级操作/命令/官方文档/官方集群教程）

    说明:Redis有自身的客户端连接软件,也可以使用Telnet进行连接操作. 来自W3School的Redis教程,基本上涵盖了从安装到状态监控的教程. W3School:https://www.gi ...

  4. css上下垂直居中方法总结

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

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

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

  6. 【翻译自mos文章】rman 标准版和企业版的兼容性

    rman 标准版和企业版的兼容性 来源于: RMAN Standard and Enterprise Edition Compatibility (文档 ID 730193.1) 适用于: Oracl ...

  7. hdu 2255奔小康赚大钱 KM算法模板

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=2255 一,KM算法:(借助这个题写一下个人对km的理解与km模板) KM算法主要是用来求解图的最优匹 ...

  8. ​网页图表Highcharts实践教程之标签组与加载动画

    ​网页图表Highcharts实践教程之标签组与加载动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但非常多时候,我们须要额外说明一些信息.这个时候借助原有的图表元素的标签功能就 ...

  9. HDUOJ--2121--Ice_cream’s world II【朱刘算法】不定根最小树形图

    链接:http://acm.hdu.edu.cn/showproblem.php? pid=2121 题意:n个顶点,m条边,求从某一点起建立有向图最小生成树而且花费最小.输出最小花费和根节点下标. ...

  10. U4687 不无聊的序列

    U4687 不无聊的序列 0通过 85提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 如果一个序列的任意一个连续的子序列中没有只出现一次的元素,辣么kkk就认为这个序 ...