<!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. 在IE6/7/8下识别html5标签

    识别html5标签: html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article>< ...

  2. Windows下Apache部署Django过程记录

    Win7/Apache/Python2.7/Django1.9部署Web   环境: Windows7 Apache httpd-2.4.16-win64-VC14 Python2.7.11 Djan ...

  3. python序列化之pickle

    来自引用: 1.什么东西能用pickle模块存储? 所有Python支持的 原生类型 : 布尔, 整数, 浮点数, 复数, 字符串, bytes(字节串)对象, 字节数组, 以及 None. 由任何原 ...

  4. centos+nginx+uwsgi+virtualenv+flask 多站点环境搭建

    环境: centos x64 6.6 nginx 1.6.2 python 2.7.9 uwsgi 2.0.9 virtualenv 12.0.5 flask 0.10.1 正文: 1.安装nginx ...

  5. Python中函数参数传递问题

    先上两个例子: http://python.jobbole.com/85231/ a = 1 def fun(a): a = 2 fun(a) print a # 结果为1 fun(a)中的a,可以看 ...

  6. Scut 进阶：网络模型拓扑

    处理消息流程: 关于是否能用 json 串作为 response? 在最后写消息的时候要加上控制选项,将Response类型,事直接以字节流,还是转json串再转字节流的方式进行编码了,如果要转jso ...

  7. Ant快速入门(二)-----使用Ant工具

    使用Ant非常简单,当正确安装Ant后,只要输入ant或ant.bat即可. 如果运行ant命令时没有指定任何参数,Ant会在当前目录下搜索build.xml文件.如果找到了就以该文件作为生成文件,并 ...

  8. Solr4.8.0源码分析(1)之Solr的Servlet

    Solr是作为一个Servlet运行在Tomcat里面的,可以查看Solr的web.xml. 1.web.xml配置 由web.xml可以看出,基本上所有Solr的操作都是在SolrDispatchF ...

  9. 作了点有意义 的事，加入CLOUDSTACK官方文档的中文翻译工作

    https://www.transifex.com/ 昨天到今天,作了个部署构架方面的翻译.

  10. ASP.NET 查询客户端请求IP地址

    public class CheckIP      {          #region 获取浏览器版本号             /// <summary>          /// 获 ...