<!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. 二分查找里的upper bound与lower bound的实现与分析

    1. 问题引入 最近参选了学堂在线的课程数据结构(2015秋).课程由清华大学的邓俊辉老师主讲,在完成课后作业时,遇到了这样一个题目范围查询.在这个题目中,我需要解决这样一个子问题:给定了一组已经排好 ...

  2. table-css

  3. [转]JS继承的5种实现方式

    参考链接: http://yahaitt.iteye.com/blog/250338 虽说书上都讲过继承的方式方法,但这些东西每看一遍都多少有点新收获,所以单独拿出来放着. 1. 对象冒充 funct ...

  4. ppt画笔标记在哪里|ppt中画笔工具功能怎么用?

    一.ppt中画笔工具功能在哪里? 这个画笔工具其实就相当于我们的一个标记工具,要实现标记功能首先将需要演示的PPT按住F5进入到放映状态,然后在右击ppt上的空白处就会弹出衣蛾对话框,在对话框中选择“ ...

  5. linux c redirect 重定向

    用execvp实现时,运行adb,如果adb 服务没有启动,会启动adb服务,启动adb服务时,pipe返回的管道在读的时候堵塞了. 查看了popen的源码,发现popen是用sh -c来执行的,避免 ...

  6. 【HDOJ】3400 Line belt

    三分. #include <cstdio> #include <cstring> #include <cmath> typedef struct { double ...

  7. SSH的内网穿透

    SSH的内网穿透 1.内网:     ssh -N -f -R 2222:127.0.0.1:22 lienzh@我的PC的IP2.外网:     ssh -p 2222 root@localhost ...

  8. 在sql语句中使用plsql变量

    示例代码如下: create or replace type ua_id_table is table of number; declare v_tab ua_id_table;begin v_tab ...

  9. Linux----硬连接和软连接

    一,概念 在Linux的文件系统中,保存在磁盘分区中的文件不管是什么类型都给它分配一个编号称为索引节点号(Inode Index). 硬链接 多个文件名指向同一个索引节点(一个文件有多个副本) 允许一 ...

  10. 如何给DropDownList控件设置样式（ASP.NET MVC）

    前话: 应学校领导要求,要给后台管理系统添加一个搜索功能,提供可选择选项.我选择使用DropDownList去实现,熟悉.net控件的都知道,DropDownList的样子非常丑,不论是边框长宽还是里 ...