用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. PHP 导入数据库 sql 文件

    使用PHP 可以导入sql来建立数据库.代码如下: <?php $hostname = 'localhost'; $dbname = 'test'; $username = 'root'; $p ...

  2. php 使用 rabbitmq

    1,配置好rabbitmq 服务器 (参照 http://www.cnblogs.com/spicy/p/7017603.html)(我是linux) 2,新增了一个用户 并点击该用户 增加权限如下

  3. mock时忽略不必要的初始化

    PowerMockito.mockStatic时忽略加载类的静态field,比如想PowerMockito.mockStatic(ClassA.class),ClassA如下 public class ...

  4. vue实现非路由跳转以及数据传递

    定义一个父组件 <template> <v-layout> <v-card contextual-style="dark" v-if="sh ...

  5. memcached 学习笔记 4

    memcached真实项目中的应用 1 缓存式的Web应用程序架构 有了缓存的支持,我们可以在传统的app层和db层之间加入cache层,每个app服务器都可以绑定一个mc, 每次数据的读取都可以从m ...

  6. Java责任链模式

    责任链模式 顾名思义,责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计 ...

  7. ASP.NET MVC Core的ViewComponent

    MVC Core新增了ViewComponent的概念,直接强行理解为视图组件,用于在页面上显示可重用的内容,这部分内容包括逻辑和展示内容,而且定义为组件那么其必定是可以独立存在并且是高度可重用的. ...

  8. 【原】jQuery easyUI 快速搭建前端框架

    jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...

  9. RabbitMQ入门教程系列

    https://blog.csdn.net/column/details/18247.html

  10. TRUNCATE TABLE 与 DELETE的区别

    delete from aatruncate table aa 区别1.delete from后面可以写条件,truncate不可以2.delete from记录是一条条删的,所删除的每行记录都会进日 ...