<!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. 一文教你用 Neo4j 快速构建明星关系图谱

    更多有趣项目及代码见于:DesertsX/gulius-projects 前言 本文将带你用 neo4j 快速实现一个明星关系图谱,因为拖延的缘故,正好赶上又一年的4月1日,于是将文中的几个例子顺势改 ...

  2. 几道splay

    hdu 1890 题意:每次将第i位到第i小数字所在的位置之间的位置翻转,每次输出第i小数字所在的位置 分析: 简单的splay处理区间翻转问题 有三点需要注意: 1.区间是1~n+2 2.此题里的查 ...

  3. LVS 源代码分析

    http://blog.chinaunix.net/uid/11207493.html http://zh.linuxvirtualserver.org/blog/3309

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

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

  5. HTML5：表格

    表格的作用是显示二维数据.在HTML5中不再同意用表格控制页面内容的布局.而是採用新增的CSS表格特性(这里不涉及CSS,将在后面介绍). 以下主要介绍用于制作表格的HTML元素. 构建表格 表格的基 ...

  6. 使用微信JSSDK实现图片上传

    近期做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发人员文档链接:微信开发人员文档 主要用到了: 引入JS文件 在须要调用JS接口的页面引入例如以下JS文件.(支持https) ...

  7. CocoaPods 的安装和使用介绍

    CocoaPods 的安装和使用介绍 安装 安装方式异常简单 , Mac 下都自带 ruby,使用 ruby 的 gem 命令即可下载安装: 1 2 $ sudo gem install cocoap ...

  8. JavaSE入门学习10：Java修饰符

    Java语言提供了非常多修饰符,主要分为下面两类: 訪问修饰符 非訪问修饰符 修饰符用来定义类.方法或者变量.通常放在语句的最前端.我们通过以下的样例来说明: <span style=" ...

  9. HDU - 3631 Shortest Path(Floyd最短路)

    Shortest Path Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u SubmitStat ...

  10. P3092 [USACO13NOV]没有找零No Change 状压dp

    这个题有点意思,其实不是特别难,但是不太好想...中间用二分找最大的可买长度就行了. 题干: 题目描述 Farmer John <= K <= ), each with value .., ...