用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. [转]分布式锁-RedisLockRegistry源码分析

    前言 官网的英文介绍大概如下: Starting with version 4.0, the RedisLockRegistry is available. Certain components (f ...

  2. rpm: error while loading shared libraries: libgcc_s.so.1: cannot open shared object file: No such file or directory解决办法

    不多说,直接上干货! 问题详情 [root@bigdatamaster app]# rpm -qa | grep gcc rpm: error : cannot open shared object ...

  3. sizeof数组名和字符指针是有区别的

    sizeof数组名和字符指针是有区别的. #include <stdio.h> #include <stdlib.h> void change(char url[]); int ...

  4. HighCharts理解与总结

    摘自:http://www.highcharts.com/docs/getting-started/installation Installation Highcharts requires two ...

  5. Scrum 冲刺博客第三篇

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 基本的页面设计 各个页面之间的跳转 背景音乐模块设计 今天计划完成的工作 ...

  6. js 列表选择

    首选定义数组,然后进行操作时遍历数组获取选中值 function getSelect(userId) { //var userId = userCheckBox.value; //标记删除还是添加 v ...

  7. RabbitMQ---5、远程 IP 访问

    刚刚安装的RabbitMQ-Server-3.3.7,并且也已经开启了Web管理功能,但是现在存在一个问题: 出于安全的考虑,guest这个默认的用户只能通过http://localhost:1567 ...

  8. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  9. log4php使用及配置

    log4php使用及配置 1.在项目中加入log4php包 2.log4php配置 在项目配置包中添加logger_config.xml配置文件: logger_config.xml配置文件添加代码如 ...

  10. Golang把所有包括底层类库，输出到stderr的内容， 重新定向到一个日志文件里面？

    不论应用是如何部署的,我们都期望能扑捉到应用的错误日志, 解决思路: 自己写代码处理异常拦截,甚至直接在main函数中写异常拦截. stderr重定向到某个文件里 使用 syscall.Dup2 第一 ...