[ javascript ] 司徒正美的fadeOut-fadeIn效果!

首先感谢司徒正美的文章!

在司徒大神的博客看到一个简单的渐入渐出的效果。全然採用js实现。

例如以下:

<!doctype html>
<html dir="ltr" lang="zh-CN" ><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=8">      <title>相冊</title></head><body><div id="album" ><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" /><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" /><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" /><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" /></div><style type="text/css">#album{position:relative;border:10px solid #000;width:85px;height:120px;overflow:hidden;}#album img{position:absolute;top:0;left:0;opacity:0;filter:alpha(opacity=0);}</style><script type="text/javascript">var album = function(el){var node = (typeof el == "string")? document.getElementById(el):el;var images = node.getElementsByTagName("img");var length = images.length;for(var i=1;i<length;i++){images[i].opacity = 0;//为全部图片设置一个自己定义属性opacity} images[0].opacity = 0.99;images[0].style.display = "block";var current = 0;(function(){setTimeout(function(){var cOpacity = images[current].opacity,next = images[current+1]?

current+1:0;//下一张图片的索引。假设没有就回到第一张 var nOpacity = images[next].opacity; cOpacity-=.05; nOpacity+=.05; images[current].opacity = cOpacity; images[next].opacity = nOpacity; images[next].style.display = "block";//确保肯定有一张图片是可见的 setOpacity(images[current]); setOpacity(images[next]); if(cOpacity<=0) { images[current].style.display = "none"; current = next; setTimeout(arguments.callee,1000); }else{ setTimeout(arguments.callee,50); } },100); })() } var setOpacity =function(obj) { if(obj.opacity>.99) { obj.opacity = .99; } obj.style.opacity = obj.opacity; obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")"; } window.onload = function(){ var el = document.getElementById("album"); album(el); } </script> <p>请稍等4秒………………</p> </body> </html>


我一直非常明确,为什么这里的图片的效果一定须要等待4秒才会出现。于是。研究之,

发现。原来一切都是因为positon所造成的。因为定位是採用的absolute,所以导致了,最后一张图片会覆盖前面的图片。

那么在改变前面的图片的opacity的时候。全部的效果都会被最后的一张图给挡住.

如须要改变这样的情况,仅仅须要在初始化的时候,将全部的图的opacity都重置为0.

例如以下:

 #album img{position:absolute;top:0;left:0;opacity:0;filter:alpha(opacity=0);}

这样重置之后,发现这个世界又開始清静了。

整体来说效果还是蛮简单的。


是的。非常多人会说,干嘛不用jquery。jquery可能就是一句话的问题。

对于这个。不做解释。


偶有所得,以记录之,谨防忘记!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261981.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

玩转博客园的5个小技巧

转载自:http://www.cnblogs.com/lloydsheng/archive/2010/05/17/1737267.html 写博客也有几年了&#xff0c;现在能找到的第一篇博文发布时间是2007年11月11日&#xff0c;那还是在百度空间里面的&#xff0c;其实更早的是在csai&#xff0c;不过帐号&#xff0c;密码&#xff…

业务层勿用继承,不要为了方便舍弃了性能。TʌT不好意思我错了

很多人喜欢在action 或service或dao层继承一些公共的东西 比如jdbc或一些其他的东西 我看过一些小源码也经常这样 废话不多说 直入正题 直入正题前先科普一下TheardLocal类 懂的人直接跳 线程不安全指的是一个带有类成员变量&#xff08;状态&#xff09;的类的单列被多个线程访…

python棋盘最短路径_【leetcode】64. Minimum Path Sum 棋盘最短路径

1. 题目 Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which minimizes the sum of all numbers along its path. Note: You can only move either down or right at any point in time. 2. 思路 从右下往左上移动&#x…

linux kvm安装win7,ubuntu14.04 使用kvm安装win7系统

办公电脑从win7换成ubuntu已经有几个月了..环境:ubuntu 14.04kvm 2.0.0需要的各种软件也都安装的差不多了.. 迅雷 qq office vmware 等 这些我常用的软件也都安装上了..我的电脑配置也算可以了(thinkpad E 系列 i5 8G内存 )但是vmware这个东西在ubuntu上的表现不是那么让人满意…

Python 18.4 aiohttp

aiohttpasyncio可以实现单线程并发IO操作。如果仅用在客户端&#xff0c;发挥的威力不大。如果把asyncio用在服务器端&#xff0c;例如Web服务器&#xff0c;由于HTTP连接就是IO操作&#xff0c;因此可以用单线程coroutine实现多用户的高并发支持。asyncio实现了TCP、UDP、SSL等…

python函数和模块有什么特性_python-函数包和模块

python函数的作用&#xff1a; 在Python代码段中如果有一段几十行的代码&#xff0c;需要多次重复使用这几十行代码时&#xff0c;为了提高代码的可用性&#xff0c;将代码段放进函数体内&#xff0c;以后在使用中直接调用该函数模块即可&#xff0c;函数是一个独立的函数体或是…

hibernate继承映射之每个具体类一张表

数据模型 表person 表student 表worker 对象模型 Person private String id;private String name;private int age;private String sex; Student extends Person private String school; Worker extends Person private String factory; xml配置&#xff1a; <?xml version…

linux系统下安装qgis,深度操作系统 deepin 15.11安装 QGIS 3.4

深度操作系统是基于Linux内核&#xff0c;以桌面应用为主的开源 GNU/Linux 操作系统&#xff0c;支持笔记本、台式机和一体机。深度操作系统(deepin)包含深度桌面环境(DDE)和近30款深度原创应用&#xff0c;及数款来自开源社区的应用软件&#xff0c;支撑广大用户日常的学习和工…

读取并修改App.config文件(转载)

1. 向项目添加app.config文件&#xff1a;右击项目名称&#xff0c;选择“添加”→“添加新建项”&#xff0c;在出现的“添加新项”对话框中&#xff0c;选择“添加应用程序配置文件”&#xff1b;如果项目以前没有配置文件&#xff0c;则默认的文件名称为“app.config”&…

No resource found that matches the given name 'android:Widget.Material.A解决方案

1&#xff1a;首先新建空白工作区 2&#xff1a;先import appcompat_v7 appcompat_v7在一个类似这样的地方&#xff0c; C:\mywork\android\android-sdk-windows\extras\android\support\v7\appcompat 然后用import进来&#xff0c;像如下操作&#xff1a; 确保sdk是5.0及以上 …

python easygui进度条_Python _easygui详细版

1. msgbox msgbox(msg(Your message goes here), title , ok_buttonOK, imageNone, rootNone) msgbox() 显示一个消息和提供一个"OK"按钮&#xff0c;你可以指定任意的消息和标题&#xff0c;你甚至可以重写"OK"按钮的内容。 import easygui as g g.msgbox…

linux ubuntu bionic,尝试在Linux Ubuntu 18.04 Bionic上安装Docker CE时出现错误?

阅读包裹清单......完成构建依赖树阅读国家信息......完成将安装以下新软件包&#xff1a;docker-ce0升级&#xff0c;1新安装&#xff0c;0删除&#xff0c;0未升级 .需要获得 0 B/33 &#xff0c; 8 MB 的档案 .执行此操作后&#xff0c;将使用 181 MB 的额外磁盘空间 . (Rea…

数据库完整性约束1

SQL的安全机制:完整性定义约束&#xff0c;视图机制&#xff0c;对用户进行授权控制 完整性约束分类: 1).根据数据对象的状态可分为: 静态约束与动态约束 a.静态约束: 隐式约束和显式约束 隐式约束&#xff1a;隐含于数据模型中的完整性约束。关系模型的隐式约束有域约束和表约…

python入门文件读取与写入_初学者Python:读取和写入同一文件

每个打开的文件都有一个隐式指针&#xff0c;该指针指示将在何处读取和写入数据。通常&#xff0c;它默认为文件的开头&#xff0c;但是如果您使用a&#xff08;追加&#xff09;模式&#xff0c;则默认为文件的结尾。还值得注意的是&#xff0c;w即使您添加到该模式&#xff0…

swappiness

2019独角兽企业重金招聘Python工程师标准>>> swappiness参数位于&#xff1a;/etc/sysctl.cof swappiness0表示最大限度使用物理内存&#xff0c;然后才是swap空间。swappiness100的时候表示积极的使用swap分区&#xff0c;并把内存上的数据及时地搬运到swap空间…

宏基笔记本4740 Linux,宏基4740g拆机【教程详解】

笔记本电脑 使用久了内部会累积有灰尘&#xff0c;这些灰尘可能会影响到正常的使用;还有些人觉得笔记本电脑内存不够&#xff0c;想要加装个内存条;亦或想要帮助笔记本电脑换cpu等&#xff0c;这些都是需要将笔记本电脑拆卸下来&#xff0c;然后才能够完成好相关的工作。宏基47…

[Codeforces Round #165 (Div. 2)]D. Greenhouse Effect

地址&#xff1a;http://codeforces.com/contest/270/problem/D 这题看过别人代码&#xff0c;理解了好久 本来觉得这题和USACO里的三值的排序是一样的&#xff0c;但是USACO里通不过......看来还得想 1 #include <iostream>2 #include <algorithm>3 using namespa…

如何正确创建DLL和使用DLL

如何正确创建DLL和使用DLL 本文将通过一个简单的实例来说明&#xff0c;如何正确的导出DLL中的类、对象、函数&#xff0c;并如何通过静态加载或动态加载的方式来使用DLL。 一、DLL中导出类、函数、对象 1. 创建一个空的Win32 Dynamic-Link Library项目Test 2. 在项目中添加一个…

C语言求35 45的最大公约数,C语言怎么求最大公约数和最小公倍数

#3段梦超2009-12-20 21:31输入两个正整数m和n, 求其最大公约数和最小公倍数. <1> 用辗转相除法求最大公约数 算法描述: m对n求余为a, 若a不等于0 则 m 最小公倍数 两个数的积 / 最大公约数#include int main(){int m, n; int m_cup, n_cup, res; /*被除数, 除数, 余数*/…

mysql-5.7.11-winx64.zip 安装配置

1、下载 http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.11-winx64.zip 2.解压缩zip包&#xff1b; D:\Program Files\mysql-5.7.11-winx64 3.配置环境变量&#xff0c; 3.1 添加path路径&#xff0c; D:\Program Files\mysql-5.7.11-winx64\bin 3.2.修改mysql-default.…