<!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. jquery ajax（4）.getjson（）

    .getJSON()实例 .each()实例 $(function(){ $('#send').click(function() { $.getJSON('test.json', function(d ...

  2. HTTP协议学习-03

    浏览器访问一个网站,的原理图

  3. iPhone 被同步到 Mac上后 如果不希望更新到Mac上在哪里删除？

    前往文件夹   /Users/用户名/Library/Application Support/MobileSync  直接删除  就行了(同时要倾倒废纸篓). 目前iPhone链接Mac 后  不让 ...

  4. The app icon set named "AppIcon" did not have any applicable content.

    Develop Tools: xCode 5.1 I write a demo for app settings feature. The tutorial url is here. When I a ...

  5. kd树的构建以及搜索

    构建算法 k-d树是一个二叉树,每个节点表示一个空间范围.表1给出的是k-d树每个节点中主要包含的数据结构. 表1 k-d树中每个节点的数据类型 域名 数据类型 描述 Node-data 数据矢量 数 ...

  6. Java中new关键字和newInstance方法的区别

    在初始化一个类,生成一个实例的时候,newInstance()方法和new关键字除了一个是方法一个是关键字外,最主要的区别是创建对象的方式不同.newInstance()使用类加载机制,new是创建一 ...

  7. PBOC规范研究

    一.ISO14443协议和PBOC关于CID的约定 看过协议的人其实都明白,RATS命令中参数字节的低半字节是CID,期中,CID不能为15. ISO14443协议中要求当RATS命令的CID等于0时 ...

  8. Windows 7 mklink命令详解

    mklink是Windows 7下的一个类似于linux下In的命令,其作用是在NTFS文件系统中创建文件或目录的链接(类似于桌面快捷方式).如果加以利用其发挥的作用是非常的大的,不仅可以帮助我们节省 ...

  9. LD1-K(求差值最小的生成树)

    题目链接 /* *题目大意: *一个简单图,n个点,m条边; *要求一颗生成树,使得其最大边与最小边的差值是所有生成树中最小的,输出最小的那个差值; *算法分析: *枚举最小边,用kruskal求生成 ...

  10. 开源src镜像

    开源src镜像: http://download.savannah.gnu.org/releases/