<!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. 完全用 GNU/Linux 工作(转）

    转自:http://www.chinaunix.net/old_jh/4/16102.html 看到一半,实在太长,但已觉得很好,转来分享一下. 完全用 GNU/Linux 工作 - 摈弃 Windo ...

  2. 使用xshell出现乱码

    用xshell链接Linux出现乱码: 解决方法: 先查看Linux支持的字符类型是否为如下类型 如果是,则找到菜单中的文件选项,并在选项中找到属性: 单击属性选项,找到终端,将编码设置为UTF-8: ...

  3. underscorejs-each学习

    2.1 each 2.1.1 语法: _.each(list, iteratee, [context]) 2.1.2 说明: 依次对集合的所有元素进行某种操作,原样返回list.接收3个参数,list ...

  4. 初涉JavaScript模式 (7) : 原型模式 【三】

    组合使用构造函数模式和原型模式 上篇,我们提到了原型模式的缺点,就是每个实例不能拥有自己的属性,因为纯原型模式所有的属性都是公开给每个实例的,故我们可以组合使用构造函数模式和原型模式.构造函数用来定义 ...

  5. 解决VS2010使用comboBox死机问题

    今天,在10下使用combobox总是不响应,原来是和翻译软件冲突,关掉有道立即解决.

  6. IE下的firebug调试利器

    1. 文件调用 把下面js代码,包含在要调试的页面中. <script src="https://getfirebug.com/firebug-lite.js">< ...

  7. 栈的顺序存储方式的C语言实现

    /* 编译器:Dev-c++ 5.4.0 文件名:stack.cpp 代码版本号:1.0 时间:2015-10-10 20:08:54 */ #include <stdio.h> #inc ...

  8. Egret 文本处理

    常规处理: private createGameScene():void { var shp = new egret.Shape(); shp.graphics.beginFill(0xff0000, ...

  9. java.util.concurrent并发包诸类概览

    java.util.concurrent包的类都来自于JSR-166:Concurrent Utilities,官方的描述叫做“The JSR proposes a set of medium-lev ...

  10. Color the ball

    hdu1556:http://acm.hdu.edu.cn/showproblem.php?pid=1556 题意:中文题. 题解:这一题当然可以直接用线段树来打,但是最近在学树状数组,所以用树状数组 ...