用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. 《LeetBook》leetcode题解(9):Palindrome Number[E]——回文数字

    我现在在做一个叫<leetbook>的开源书项目,把解题思路都同步更新到github上了,需要的同学可以去看看 地址:https://github.com/hk029/leetcode 这 ...

  2. python-生产者消费者模式

    #!/usr/bin/python #coding=utf-8 import threading,time lock=threading.Condition() product=0 class Mak ...

  3. PHP之string之str_shuffle()函数使用

    str_shuffle (PHP 4 >= 4.3.0, PHP 5, PHP 7) str_shuffle - Randomly shuffles a string str_shuffle - ...

  4. PTA (Advanced Level) 1010 Radix

    Radix Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? ...

  5. dll ocx cab IE 自动安装

    我们打开淘宝等网站时,IE浏览器会提示安装空间,这个控件便是用于对用户名密码进行加密的ActiveX控件.如何在我们的站点上安装如此控件,让用户可以通过简单的点击便可方便使用我们的空间呢? 下面是如何 ...

  6. ado.net中的 sqlconnection sqlcommand datareader dataset SqlDataAdapter之间的关系

    Connection: 和数据库交互,必须连接它.连接帮助指明数据库服务器.数据库名字.用户名.密码,和连接数据库所需要的其它参数.Connection对象会被Command对象使用,这样就能够知道是 ...

  7. C# 中的隐式类型转换(运算时的隐式转换)和显示类型转换

    区别: 隐式转换失败编译会报错. 显示转换有可能精度丢失. 根据项目的编译设置,显示转换溢出可能会报错,如果设置溢出且未使用checked检查,运行时如果发生溢出会产出未知的计算结果. 在数字运算时, ...

  8. c# 旋转图片 无GDI+一般性错误

    using (System.Drawing.Bitmap backgroudImg = System.Drawing.Bitmap.FromFile(DoubleClickPicInfo.FileNa ...

  9. protobuf简单测试应用

    protobuf是google推出的一种数据交换协议,比较适合应用于底层服务交互,nodejs提供protobufjs包的实现,下面是一个简单的测试demo: 首先是.proto文件: package ...

  10. nodejs搭建简易的rpc服务

    这里主要使用的是jayson包,使用jayson实现rpc server端十分简单,如下: var jayson = require('jayson') // create a server var ...