<!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. Docker website

    https://github.com/docker/labs/  (nguo123gmail  Cooooos123!) Docker Tutorials and Labs At this time ...

  2. Win32编程API 基础篇 -- 3.消息处理 根据英文教程翻译

    消息处理 例子:窗口点击 好的,现在我们已经得到一个窗口了,但我们什么也做不了除了DefWindowProc()允许窗口大小被调整,最大最小化等...这不是很激动人心啊 在接下来的一小节中我将向你展示 ...

  3. Ubuntu中PPA源是什么

    以下内容转自https://imcn.me/ppa: PPA是Personal Package Archives首字母简写.翻译为中文意思是:个人软件包文档 只有Ubuntu用户可以用,而所有的PPA ...

  4. Android: 清除View跳转的历史记录

    Intent intent = new Intent(); intent.setClass(SetActivity.this, RegisterLoginActivity.class); intent ...

  5. CI 日志类

    开发ci的过程中,使用log能直观的看出代码运行到哪,还可设置代码查看数据接口的发送情况.日志类: <?php defined('BASEPATH') OR exit('No direct sc ...

  6. MVC之ActionFilterAttribute

    1.登录页面代码: @{ ViewBag.Title = "会员登录"; Layout = "~/Views/Shared/_LayoutDialog.cshtml&qu ...

  7. ES6 一些常用使用

    //1.解构数组 let arr1 = ['apple', 'coffee', 'cake']; let [fruit, drink, dessert] = arr1; console.log(fru ...

  8. MySQL5.6 GTID方式，配置主从

    迁移数据到从库 数据导出: mysqldump -uroot -p111111 -h127. -P3306 -q --single-transaction -R -E --triggers --def ...

  9. git命令颜色设置

    + $ git config --global color.status auto + $ git config --global color.diff auto + $ git config --g ...

  10. open_basedir restriction in effect，解决php引入文件权限问题 lnmp

    1.配置了虚拟域名 vim /usr/local/nginx/conf/vhost/siemens.conf server { listen 80; #listen [::]:80 default_s ...