用jquery实现  百度换肤的模式;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>百度换肤</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        body{

            /*width:100%;*/

            background:url('../js/2.jpg') no-repeat center 0; /*设置了body的背景图片 然后居中显示 然后只显示一次 */

            background-size:cover;   /*自适应屏幕大小*/

        }

            .box{

                width:100%;

                padding-top: 40px;

                background-color: rgb(255,0,0,0.3);

                text-align: center;

            }

        .box img{

            width:100px;

            /*height:20px;*/

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="../js/2.jpg" alt="" id="pic1" >

        <img src="../js/1.jpg" alt="" id="pic2" >

        <img src="../js/3.jpg" alt="" id="pic3">

        <img src='../js/4.jpg' alt="" id="pic4">

        <img src="../js/5.jpg" alt="" id="pic5">

    </div>

    <script type="text/javascript" src="../jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            $('.box img').click(function(){ //先获取  你的body下的img

                console.log($(this)); //打印这个你点击的图片

                var imgUrl = $(this)[0]['src'];  //因为你获取的this是一个对象  而且这个对象只有第一条数据是有效果的  所以你取到第一条数据中的图片的路径

                console.log($(this)[0]['src']);

                $('body').css('background',`url(${imgUrl})`); //把你点击的图片的路径给设置成body的背景图片 并且为了让它能识别出来就用字符串把它拼接起来

               $(this).css('width',200).siblings().css('width',100);

            })

        })

    </script>

</body>

</html>

百度换肤

jQuery 小案例的更多相关文章

  1. jQuery小案例

    Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> <head> <script ty ...

  2. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  3. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  4. 一个ssm综合小案例-商品订单管理----写在前面

    学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...

  5. 10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...

  6. 机械表小案例之transform的应用

    这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...

  7. Jquery:小知识；

    Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器   上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...

  8. shell讲解-小案例

    shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...

  9. 02SpringMvc_springmvc快速入门小案例（XML版本）

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

随机推荐

  1. 解决emacs配置tern报错`tern-reparse-on-idle':

    使用Nodejs安装完tern后,在/user/local/bin建立软连接

  2. 【LDAP】LDAP常用命令解析

    ldapadd -x   进行简单认证-D   用来绑定服务器的DN-h   目录服务的地址-w   绑定DN的密码-f   使用ldif文件进行条目添加的文件例子 ldapadd -x -D &qu ...

  3. 逻辑备份,mysqldump,SELECT…INTO OUTFILE,恢复

    逻辑备份 mysqldump mysqldump备份工具最初由Igor Romanenko编写完成,通常用来完成转存(dump)数据库的备份以及不同数据库之间的移植,例如从低版本的MySQL数据库升级 ...

  4. java的finally简单理解

    1. 大家都知道, 普通的try, catch, finally格式: try{ //有可能会抛出异常的代码 }catch{ //抛出异常时处理的代码 }finally{ //无条件执行的代码,就不管 ...

  5. Calendar介绍

    java.util.Calendar是一个抽象类,它定义了日历相关的一系列操作,使用java.util.Calendar除了可以表示日期和时间,还可以用它来对时期或时间进行算术运算,比如获取当前日期1 ...

  6. 【LeetCode题解】7_反转整数

    目录 [LeetCode题解]7_反转整数 描述 方法一 思路 Java 实现 类似的 Java 实现 Python 实现 方法二:转化为求字符串的倒序 Java 实现 Python 实现 [Leet ...

  7. Android四大组件--服务（Service）

    1. startService和bindService的区别 1. startService: 生命周期: onCreate---onStartCommand---onDestory 与服务的通讯: ...

  8. GridFS使用及配合nginx实现文件服务

    Mongodb下GridFS使用及配合nginx实现文件服务 一.GridFS简介 GridFS是mongodb下用来存储文件的一种规范,所有官方支持的驱动均实现了GridFS规范. Mongodb本 ...

  9. IO流实现模拟软件试用的功能

    import java.io.*; public class TryOut { /** * IO流模拟软件试用次数的功能 * 这里注意try里BufferedOutputStream不要和InputS ...

  10. mongdb启动报错

    2018-08-19T12:25:31.707+0800 I CONTROL [main] Automatically disabling TLS 1.0, to force-enable TLS 1 ...