<!DOCTYPE html>
<html>
<head>
<title>baidu</title>
<meta charset="utf-8">
<style type="text/css">
.box{
position: relative;
left: 500px;
}
body{
background-image: url(1.jpg);
}
</style>
</head>
<body>
<div class="box">
<img src="1.jpg" alt="" width="150" id="pic1"/>
<img src="2.jpg" alt="" width="150" id="pic2"/>
<img src="3.jpg" alt="" width="150" id="pic3"/>
</div>
<script type="text/javascript">
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var pic3 = document.getElementById("pic3");
pic1.onclick = function(){
document.body.style.backgroundImage = "url(1.jpg)";
}
pic2.onclick = function(){
document.body.style.backgroundImage = "url(2.jpg)";
}
pic3.onclick = function(){
document.body.style.backgroundImage = "url(3.jpg)";
}
</script>
</body>
</html>

百度背景画面切换效果，js做的更多相关文章

  1. jQuery plugin : bgStretcher 背景图片切换效果插件

    转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...

  2. 旋转木马幻灯片切换效果JS源码详解

    首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...

  3. Tab选项卡 延迟切换效果js实现

    try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. Google street、Google satellite 、百度地图Iframe切换桥接JS

    1.地图切换方法 注意:父页面访问Iframe页面JS方法需根据Iframe的名字来调用如:named "mapIfame" 即 mapIfame.window.iframeFun ...

  5. Tab选项卡 自动切换效果js实现

    try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  7. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  8. WPF 页面切换效果

    原文:WPF 页面切换效果 最近做一个有页面切换的吧.. 我觉得这个功能是比较基础的吧.. 在网上百度了一下.. 用NavigationWindow的比较好.. 因为Demo中是带了淡入淡出的页面效果 ...

  9. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

随机推荐

  1. Extjs之combobox联动

    Ext.Loader.setConfig({ enabled : true }); Ext.Loader.setPath('Ext.ux', '../extjs/ux'); Ext.require([ ...

  2. border做箭头的例子

    <style> .test{ margin:0 auto; width:100px; height:100px; background:lightskyblue; position:rel ...

  3. cocos2d-x把json数据解析到数组或字典中（libjson库）

    以前在cocos2d-x项目中用到json解析,集成了libjson库后发现网上提供的解析方法大多是在解析过程中取得值,并没有将解析结果有效的保存起来,于是摸索一番,把解析结果根据数据格式存到数组或字 ...

  4. how to count uv area

    先放着,空了再整理.... fn getModeUvVolumetric mode chang= ----得到UV使用率( --global facesNumSum = meshop.getnumfa ...

  5. SAE、搜狐云景和百度云之初见

    近期有需求将我们的应用部署到公有云的服务平台上,于是找了几家公有云服务做了一下调研, 首先对比一下他们提供的功能: 功能 SAE 搜狐云景 百度云 版本控制工具 svn  GIT,和百度云的比起来,用 ...

  6. h.264全搜索以及快速全搜索算法

    Full Search 全搜索算法是最简单暴力的一种搜索算法,对搜索范围内的所有像素点都进行匹配对比,选出最合适的运动向量,以下就是一个搜索范围为4的全搜索范围(单个像素点) /*! ******** ...

  7. KEIL C51中的_at_关键字

    绝对位置变量 变量可以在你的C程序中的绝对内存地址位于源模块使用_at_关键字.此功能的用法是: 类型 _ memory_space _ 变量名 _at _  常数 ; 其中:memory_space ...

  8. moveToThread的最简单用法（依葫芦画瓢即可）（使得线程也更偏向于信号槽的使用方法）

    /*! * \file main.cpp * * Copyright (C) 2010, dbzhang800 * All rights reserved. * */ #include <QtC ...

  9. 三个QT咨询公司以及QT5.0的主要特点

    三个咨询公司(他们也贡献代码):http://www.kdab.com/http://v-play.net/http://www.ics.com/qt 一个论坛:http://forum.qt.io/ ...

  10. 使用 CustomScript 扩展程序自动执行 Linux 虚拟机自定义任务

    NingKuangWSSC WS ARD 高级项目经理 您可能已经从Windows扩展程序博客中了解了针对 Windows 虚拟机的 CustomScript扩展程序,现在的好消息是,这一扩展程序也已 ...