<!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. Minimum Sum LCM（uva 10791）

    题意(就是因为读错题意而wa了一次):给一个数字n,范围在[1,2^23-1],这个n是一系列数字的最小公倍数,这一系列数字的个数至少为2 例如12,是1和12的最小公倍数,是3和4的最小公倍数,是1 ...

  2. docker mysql 主从配置

    docker安装运行单实例的MySQL参考另一篇文档 http://www.cnblogs.com/manger/p/7611309.html 1.首先在/data/script下创建两个文件my-m ...

  3. 符号变换引擎（Symbol Transform Engine - STE）

    在写编译器的过程中.我意识到编译事实上是一种符号变换,比方C语言编译成机器码,事实上是C源代码文件里的符号变换成EXE的16进制符号,这和中文翻译成英语的语言翻译器没什么差别. 每一个程序猿都有自己喜 ...

  4. Linux进程空间分布 & 上下文

    Linux使用两级保护机制:0级供内核使用,3级供用户程序使用.从图中可以看出,每个进程有各自的私有用户空间(0~3G),这个空间对系统中的其他进程是不可见的.最高的1GB字节虚拟内核空间则为所有进程 ...

  5. [Vue @Component] Control Template Contents with Vue's Render Function

    Declaring templates and elements inside of templates works great for most scenarios. Sometimes you n ...

  6. Wireshark网络分析实战笔记（一）抓包过滤器

    抓包过滤器和显示过滤器的差别: 1.抓包过滤器配置在抓包之前,wireshark仅仅抓取抓包过滤器过滤的数据 2.显示过滤器配置在抓包后,wireshark已经抓取全部的数据包,显示过滤器让wires ...

  7. 行香子&#183;过尽千山

    <行香子·过尽千山> 文/天地尘埃2020 过尽千山.水瘦山寒. 思来路.地咽天玄. 千金散尽,欲补穹天. 但孟春暖,仲春炫.暮春喧. 三皇五帝,魏武挥鞭. 朴无欲.衡玉玑璿. 金生丽水, ...

  8. Android应用程序相关的文件文件夹具体解释

    一.方法介绍:         每一个Android应用程序都能够通过Context来获取与应用程序相关的文件夹,这些文件夹的功能各异,每一个文件夹都有自己的特点.有时候可能会搞混淆,本文结合andr ...

  9. cocos2d-x 执行在 genymotion上面

    1.jni/Application.mk加入红色圆圈内的參数 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl6aXhpYW5zaGVuZw==/fon ...

  10. 删除svn

    去掉文件下所有的.svn - CSDN博客  https://blog.csdn.net/arui_email/article/details/9055645 FOR /r  D:\testsvn\p ...