首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
substring
frameworks
config
future
hashcode
jsp
input
window
include
cPlusPlus
bash
string
javascript
copy
js
uml
cpython
blob
dll
post
select
byte
emoji
php5
import
java
iostream
php
fetch
sum
datetime
express
vba
object
schema
php7
buffer
version
runtime
callback
go
tree
install
yaml
list
erlang
md5
nodejs
get
lua
shell
httpclient
integer
subset
python3
usb
hashtable
web
int
heatmap
instance
typescript
bit
perl
hook
audio
flutter
timestamp
utf-8
netty
const
hash
vbscript
split
format
process
main
text
header
当前位置:
开发笔记
>
编程语言
> 正文
javascript淡入淡出效果的实现思路_javascript技巧
作者:橙色kop | 来源:互联网 | 2018-06-18 18:51
这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了
如题,只有思路,没有代码。
这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了。
比如写一个图片切换类,切换效果是淡入淡出,通常我们会这样写:当切换发生的时候,当前显示的图片淡出(渐渐隐藏),将要显示的图片淡入(渐渐出现),通常两张图片的动画速度是一致的,以便实现当前图片完全隐藏之时就是下一张图片完全显示之日。
我们来列一个简单的步骤:
当前图片渐隐,透明度由100%变成90%;同时下一张图片渐显,透明度由0变成10.
当前图透明度80%,下张图透明度20%
当前图70%,下张图30%。
。。。。
当前图10%,下张图90%
完成切换
其实,这样做完全是一种浪费!
我们想一想,如果下张图zIndex位于当前图之上,当它渐显的时候,因为越来越不透明,所以视觉上,他下层的当前图片看起来就越来越透明!
比如,下张图透明度为20%的时候,因为他覆盖在当前图上,所以当前图片看起来透明度就是100%-20%=80%!
所以,在制作淡入淡出切换效果的时候,其实只需要淡入效果即可,淡入的同时,淡出就发生着;淡入结束时,就是淡出终结。这样一来,永远不用担心淡入与淡出不同步的问题。
关键是,这样一来只用同时循环设置一张图片的透明度(即下张图),不用管被挡住的这张(即当前图),节约了一半的运算。这也算是优化了Javascript的执行效率吧?
所以,我实现淡入淡出切换效果的思路就是:
将下一张图片的zIndex设置于当前图片之上
下一张图片进行淡入(渐显)循环;当前图片不操作。
淡入进行时,淡出同步发生;淡入完成,淡出同时完成。
注:此思路只适合于当前图与下一张图重叠的情况(大部分时候都是这样)。
javascript
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
java
Javascript中带有加号 - 减号(±)的极坐标曲线方程 - Polar curve equation with plus-minus sign (±) in Javascript
IamtryingtodrawpolarcurvesonHTMLcanvasusingJavascript.WhatshouldIdowhenIwanttoco ...
[详细]
蜡笔小新 2023-12-11 18:14:13
java
如何在输入字段中使用默认值的方法及代码
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
java
javascript入门·表单与表单元素总结(表单验证)
表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ...
[详细]
蜡笔小新 2023-10-15 18:44:55
java
Google Contacts API未返回输出 - Google Contacts API not returning output
Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ...
[详细]
蜡笔小新 2023-10-15 16:40:16
java
JavaScript基础---Math对象
该对象中的属性方法和数学有关.abs(x)返回数的绝对值。exp(x)返回e的指数。floor(x)对数进行下舍入。log(x)返回数的自然对数(底为e)。 ...
[详细]
蜡笔小新 2023-10-14 20:27:26
java
es6 javascript的Proxy 方法
get()方法用于拦截某个属性的读取操作,如果没有该属性的时候会报一个undefined的,如果结果get处理会返回对应的错误信息varperson{name:张三 ...
[详细]
蜡笔小新 2023-10-14 11:04:09
java
[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑
[JavaScript]多数前端工程师都没注意到的一个关于console.log()的坑请阅读以下代码并猜测结果:functiontest(){le ...
[详细]
蜡笔小新 2023-10-13 19:00:52
java
JavaScript - let和var区别
前提ES5只有函数作用域和全局作用域,var属于ES5。let属于ES6,新增块级作用域。目的是可以写更安全的代码。Theletstatementdeclaresablocks ...
[详细]
蜡笔小新 2023-10-13 18:33:54
java
用JavaScript实现的太空人手表
用JavaScript实现的太空人手表-JS写的太空人手表,没有用canvas、svg。主要用几个大的函数来动态显示时间、天气这些。天气的获取用到了AJAX请求。代码中有详细的注释 ...
[详细]
蜡笔小新 2023-10-13 17:21:38
java
javascript如何判断值是否为undefined
这篇文章主要介绍“javascript如何判断值是否为undefined”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ja ...
[详细]
蜡笔小新 2023-10-13 12:56:32
java
使用粘性页眉和页脚切换侧栏 - Toggle Sidebar with sticky header and footer
Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ...
[详细]
蜡笔小新 2023-10-13 12:28:22
java
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法:一:跳转到新页面,并且是在新窗口中打开时:复制代码代码如下:fu ...
[详细]
蜡笔小新 2023-10-13 12:25:13
java
字符串作为javascript数组的键 - Strings as keys of array in javascript
Whyusingstringsaskeysofarray,consoleisshowingthatarraywithoutthesedeclaredvaluesand ...
[详细]
蜡笔小新 2023-10-13 11:19:56
java
javascript函数中参数传递问题示例探讨
javascript函数中参数传递问题示例探讨-相信每一位刚接触javascript的同学在函数参数传递上都会很疑惑,原因无他,那就是它的语法太怪异了,你定义一个函数例如funct ...
[详细]
蜡笔小新 2023-10-13 11:07:33
java
用JavaScript实现《铁甲无敌奖门人》“开口中”猜数游戏
JavaScript在常人看来都是门出不了厅堂的小语言,仅管它没有明星语言的闪耀,但至少网页的闪耀还是需要它的,同时它是一门很实用的语言,本人平时就喜欢拿它来写点实用工具或应用,本文演示用JavaSc ...
[详细]
蜡笔小新 2023-10-13 09:49:41
橙色kop
这个家伙很懒,什么也没留下!
Tags | 热门标签
substring
frameworks
config
future
hashcode
jsp
input
window
include
cPlusPlus
bash
string
javascript
copy
js
uml
cpython
blob
dll
post
select
byte
emoji
php5
import
java
iostream
php
fetch
sum
RankList | 热门文章
1
移动硬盘无法打开的解决方法,急需帮助!
2
c++二叉树的层序遍历_C#实现二叉树四种遍历(顺序存储结构)
3
PB调用EXCEL的操作不失为一种好的报表输出方式
4
使用3DSMAX制作具有逼真质感的玻璃杯
5
window计算的chk在linux下可以读,Linux系统命令从入门到完全忘记(四)
6
iOS 两款你可能会用到的弹出框
7
【洛谷4251】 [SCOI2015]小凸玩矩阵(二分答案,二分图匹配)
8
BZOJ 1112 POI2008 砖块Klo
9
IntelliJIDEA插件阿里巴巴Java开发手册(AlibabaJavaCodingGuidelines)
10
php表单中文本框怎么用(表单中的文本框)
11
在Ubuntu 18.04.3中的鱼壳conda源错误中
12
Hibernate调用存储过程
13
npm install 命令的参数顺序应该是怎样的?
14
linux:对文件权限的设置
15
path环境变量的配置
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有