html5实现关灯效果,《第41天：JQurey

今天要和你们分享的是我看了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的态度就是要和你一起终身学习，是一种开放的形态，他想与所有的听众一起变得更好.

所以我想学习他，希望可以让看这篇博文的你，也越来越好.

html5实现关灯效果,《第41天：JQurey - 关灯效果》相关推荐

如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果
今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...
php仿微信语音条,html5的audio实现高仿微信语音播放效果
前言之前做过一个微信的项目,专家回复可以录音,然后储存成mp3格式,前台可以获取mp3,客户可以在线试听mp3录音效果,今天就简单分享一下这个效果如何实现,及实现思路和方法! 效果图前台大体呈现效 ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
html5的audio实现高仿微信语音播放效果
效果图前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...
html5 打字机效果,使用JavaScript制作打字机文本效果
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介.我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打 ...
html5 放鞭炮效果,flash制作鞭炮的爆炸效果（不需AS）
本教程是向大家介绍利用flash制作鞭炮的爆炸效果,不用AS,就可以实现一串鞭炮爆炸,教程实用性还不错,推荐给大家,希望对大家有所帮助! 要过年了,少不了想放鞭炮,生活中的事儿,网上的也全要有.怎么让 ...
html5水下泡泡效果,PS制作水下气泡文字效果
这篇教程教飞特的朋友们用PS制作水下气泡文字效果,教程制作的文字效果很漂亮的,是一篇来自国外的翻译教程,界面上的文字都是英文的,需要大家对PS的界面比较熟练.我们先来看看效果图吧: 具体的制作步骤如下 ...
Java中实现六种图像处理的效果（灰度化、马赛克效果、去背景实现、珠纹化实现、黑白版画效果、油画效果）
** Java中实现六种图像处理的效果(灰度化.马赛克效果.去背景实现.珠纹化实现.黑白版画效果.油画效果) ** 本文的编程的思想: 先将实现这六种效果的方法写入一个名为pic_performanc ...
android 3d渲染动画效果吗,Android如何实现3D效果
前言前段时间读到一篇文章,作者通过自定义View实现了一个高仿小米时钟,其中的3D效果很是吸引我,于是抽时间学习了一下,现在总结出来,和大家分享. 正文想要在Android上实现3D效果,其实并没 ...
php产品效果图,jQuery_基于JQuery制作的产品广告效果，效果图.如下：动画效果介绍 - phpStudy...
基于JQuery制作的产品广告效果效果图.如下: 动画效果介绍:这组广告效果是打开页面后图片会自动播放,从1-5共计5张图片,如果属标放到右下角的1.2.3.4.5列表上,可以自由进行切换到自己想看 ...

html5实现关灯效果,《第41天：JQurey - 关灯效果》

html5实现关灯效果,《第41天：JQurey - 关灯效果》相关推荐

最新文章

热门文章