《第41天：JQurey - 关灯效果》

tuomao 发布于2019-08-23 12:51 / 1823人阅读

摘要：源码下载地址链接提取码如果有赞就很幸福了今天要和你们分享的是我看了库的一款关灯效果，然后自已去实现它主要是鼠标移入移出它的状态发生改变开始讲解前，为大家做一些知识储备，在接下来的实操中会用到方法鼠标移入，会实现函数里的操作方法鼠标移出，会实

源码下载地址：
链接：https://pan.baidu.com/s/1OXkv...
提取码：0m80
如果有赞就很幸福了.

今天要和你们分享的是我看了JQuery库的一款关灯效果，然后自已去实现它.
主要是鼠标移入移出它的状态发生改变
开始讲解前，为大家做一些知识储备，在接下来的实操中会用到.

1.mouseover( function(){} )方法
鼠标移入，会实现函数里的操作

2.mouseleave(function(){})方法
鼠标移出，会实现函数里的操作

3.parent()方法
获取到父元素

4.animate()方法
添加动画

5.children()方法
获取到子元素

6.siblings（）方法
获取到兄弟元素

7.${this}
表示当前的选择元素

8.opacity：透明度属性

9.stop(stopAll,goToEnd)方法 > 重点
stopAll:可为true或false，停止该元素当前所有的animate动作
goToEnd:可为true或false，结束该元素当前的animate动作后停止

接下来分为三个模块跟大家来讲解：

Html模块




    
    关灯效果
    
    
    
    


    //装图片的盒子
            //第一张图片，接下来以此递增

Css模块

body{
    background-color: #000000;
    position: relative;
}
.wrap{//放图片盒子的高和宽以及定位，这个盒子wrap绝对定位是把父级的position作为参考的,当前是依据body来移动
//因为body是它的父级，同时带有position：relative属性.
    width: 624px;
    height: 468px;
    position: absolute;
    top:200px;
    left: 34%;
}
.wrap img{ //确定图片的大小
    width: 208px;
    height: 156px;
    vertical-align: top;
}
.left{
    float: left; //图片向左浮动，可以排在同一行上
}

JQuery模块

$(function(){
    $("div.box").mouseover(function() { //当鼠标移入时，当前box的透明度为1，兄弟元素的透明度变为0.2，耗时0.5秒
        $(this).stop(true,false);//停止该元素当前所有的animate动作
        $(this).animate({opacity:"1"}).siblings().animate({opacity:"0.2"},500)
    });
    $(".wrap").mouseleave(function(){//当鼠标移出wrap这个大盒子时，所有的图片透明度变成1
        $("div.box").stop(true,false);//停止该元素当前所有的animate动作
        $("div.box").siblings().stop(false,true).animate({opacity:"1"},500)
    });
})

这里重点讲stop()方法：
如果没有stop方法，则当前的动画不会停止，要按顺序执行完成后才执行下一步操作，如：

今天的分享就到这里了，我很喜欢罗振宇，更喜欢他所创造的得到APP,这个APP的态度就是要和你一起终身学习，是一种开放的形态，他想与所有的听众一起变得更好.
所以我想学习他，希望可以让看这篇博文的你，也越来越好.

云服务器 GPU云服务器第7天:CSS入门 JQurey jqurey?easy?ui 事件 41

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99052.html

《第41天：JQurey - 关灯效果》

摘要：源码下载地址链接提取码如果有赞就很幸福了今天要和你们分享的是我看了库的一款关灯效果，然后自已去实现它主要是鼠标移入移出它的状态发生改变开始讲解前，为大家做一些知识储备，在接下来的实操中会用到方法鼠标移入，会实现函数里的操作方法鼠标移出，会实 showImg(https://segmentfault.com/img/bVbjbc6?w=398&h=305); 源码下载地址：链接：http...

array_huang 2019-08-02 11:55 评论0 收藏0
《第41天：JQurey - 关灯效果》

摘要：源码下载地址链接提取码如果有赞就很幸福了今天要和你们分享的是我看了库的一款关灯效果，然后自已去实现它主要是鼠标移入移出它的状态发生改变开始讲解前，为大家做一些知识储备，在接下来的实操中会用到方法鼠标移入，会实现函数里的操作方法鼠标移出，会实 showImg(https://segmentfault.com/img/bVbjbc6?w=398&h=305); 源码下载地址：链接：http...

BearyChat 2019-08-29 17:10 评论0 收藏0
面试逻辑题

摘要：分享一下今天看到的几道逻辑题一群人开舞会，每人头上都戴着一顶帽子。根据题意可知，号码为的灯，拨开关的次数等于的约数的个数，约数个数是奇数，则一定是平方数。因为的平方等于，可知以内共有个平方数，即，最后关熄状态的灯共有盏，编号为。分享一下今天看到的几道逻辑题一群人开舞会，每人头上都戴着一顶帽子。帽子只有黑白两种，黑的至少有一顶。每个人都能看到其它人帽子的颜色，却看不到自己的。主持人先...

renweihub 2019-08-20 16:41 评论0 收藏0
猫头鹰的深夜翻译：使用组合模式来开关灯

摘要：为了挽救这一点，这篇博客将用一个简单有效的例子来解释组合模式。唯一需要记住的是组合模式通常用在一个树结构的递归操作上。这个接口我们命名为，对应于组合模式中的。这种多米诺骨牌效应也是组合模式的一个特点。前言设计模式可能是博客圈最热门的话题之一。但是，用来说明每个设计模式的例子通常不是很形象。为了挽救这一点，这篇博客将用一个简单有效的例子来解释组合模式。我们不会再重复解释这个模型的概...

elina 2019-08-15 14:17 评论0 收藏0
第一课:超级hello Arduino.使用多种知识串联一个入门小项目,很适合初学第一课哟.

摘要：开关旋钮电位器的实验视频已经购买开发版的同学开始上课来一场紧张刺激的之旅吧前言开发工具的下载安装使用都很简单我这里就不赘述了附上官方的说明跟着步骤来十分钟搞定相关连接下载官方为什么成为开发函数 ...

philadelphia 2021-09-06 15:00 评论0 收藏0