一个很简单的淡入淡出相册 (转)
不知题目是否妥当,总之就是在相册中使用fade效果,让图片切换变得非常自然舒服。
1.
<
div
id
=
"album"
>
2.
<
img
src
=
"http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg"
/>
3.
<
img
src
=
"http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg"
/>
4.
<
img
src
=
"http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg"
/>
5.
<
img
src
=
"http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg"
/>
6.
</
div
>
<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>
运行代码
添加样式,目标是让所有图片像叠罗汉一样摞在一起。
01.
#album{
02.
position:relative;
03.
border:10px solid #000;
04.
width:90px;
05.
height:120px;
06.
overflow:hidden;
07.
}
08.
#album img{
09.
position:absolute;
10.
top:0;
11.
left:0;
12.
}
<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:90px; height:120px; overflow:hidden; } #album img{ position:absolute; top:0; left:0; } </style>
运行代码
下面详细讲解一下淡入谈出相册的运作。尽管相册有许多相片,每次运行都是执行两张相片的透明度设置。并且当上面一张(我们看到的那张)正准备淡出时,下面那张已淡入得差不多。换言之,我们要想办法错开两张图片的出场时间。由于淡入淡出(fade)其实是透明特效加display的切换,如何取得opacity样式值呢?要知道,设置样式与获取样式,完全不是一回事。获取样式远比设置样式复杂,如果不是内联样式,在IE中就要调用currentStyle加遍历父级元素。一个取巧的办法,就是不要在获取opacity中下工夫,直接设置一个自定义属性opacity(非style.opacity),每次执行透明度设置时用这个opacity赋值,并每次一点点改变这个opacity的值。正在淡出的图片对象的opacity呈递减状态,反之亦然。
01.
var
album =
function
(el){
02.
var
node = (
typeof
el ==
"string"
)? document.getElementById(el):el;
03.
var
images = node.getElementsByTagName(
"img"
);
04.
var
length = images.length;
05.
for
(
var
i=1;i<length;i++) images[i].opacity = 0;
//为所有图片设置一个自定义属性opacity
06.
images[0].opacity = 0.99;
07.
var
current = 0;
08.
(
function
(){
09.
setTimeout(
function
(){
10.
var
cOpacity = images[current].opacity,
11.
next = images[current+1]?current+1:0;
//下一张图片的索引,如果没有就回到第一张
12.
var
nOpacity = images[next].opacity;
13.
cOpacity-=.05;
14.
nOpacity+=.05;
15.
images[current].opacity = cOpacity;
16.
images[next].opacity = nOpacity;
17.
images[next].style.display =
"block"
;
//确保肯定有一张图片是可见的
18.
setOpacity(images[current]);
19.
setOpacity(images[next]);
20.
if
(cOpacity<=0) {
21.
images[current].style.display =
"none"
;
22.
current = next;
23.
setTimeout(arguments.callee,1000);
24.
}
else
{
25.
setTimeout(arguments.callee,50);
26.
}
27.
},100)
28.
})()
29.
}
30.
var
setOpacity =
function
(obj) {
31.
if
(obj.opacity>.99) {
32.
obj.opacity = .99;
33.
}
34.
obj.style.opacity = obj.opacity;
35.
obj.style.filter =
"alpha(opacity="
+ (obj.opacity*100) +
")"
;
36.
}
<!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; } </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>
运行代码
ablum函数中的闭包相当于:
01.
var
repeat =
function
(){
02.
setTimeout(
function
(){
03.
//*************略*************
04.
if
(cOpacity<=0) {
05.
images[current].style.display =
"none"
;
06.
current = next;
07.
setTimeout(repeat,1000);
08.
}
else
{
09.
setTimeout(repeat,50);
10.
}
11.
},100)
12.
repeat();
闭包让我们少写许多东西,程序变得更紧凑。我们甚至可以搞个点击停顿效果,不过说实话,只是个假象而已,只能让它多停留两秒。你多点击几下,这张图片就静止久一点。我可不想点击一下整个相册就不动了。
01.
var
album =
function
(el){
02.
var
node = (
typeof
el ==
"string"
)? document.getElementById(el):el;
03.
var
images = node.getElementsByTagName(
"img"
);
04.
var
length = images.length;
05.
var
current = 0;
06.
for
(
var
i=1;i<length;i++){
07.
images[i].opacity = 0;
//为所有图片设置一个自定义属性opacity
08.
images[i].onclick = (
function
(i){
//点击停顿效果
09.
return
function
(){
10.
current = i + 1;
11.
if
(current > 3)
12.
current = 3
13.
}
14.
})(i);
15.
}
16.
images[0].opacity = 0.99;
17.
(
function
(){
18.
setTimeout(
function
(){
19.
var
cOpacity = images[current].opacity,
20.
next = images[current+1]?current+1:0;
//下一张图片的索引,如果没有就回到第一张
21.
var
nOpacity = images[next].opacity;
22.
cOpacity-=.05;
23.
nOpacity+=.05;
24.
images[current].opacity = cOpacity;
25.
images[next].opacity = nOpacity;
26.
images[next].style.display =
"block"
;
//确保肯定有一张图片是可见的
27.
setOpacity(images[current]);
28.
setOpacity(images[next]);
29.
if
(cOpacity<=0) {
30.
images[current].style.display =
"none"
;
31.
current = next;
32.
setTimeout(arguments.callee,1000);
33.
}
else
{
34.
setTimeout(arguments.callee,50);
35.
}
36.
},100)
37.
})()
38.
}
39.
var
setOpacity =
function
(obj) {
40.
if
(obj.opacity>.99) {
41.
obj.opacity = .99;
42.
}
43.
obj.style.opacity = obj.opacity;
44.
obj.style.filter =
"alpha(opacity="
+ (obj.opacity*100) +
")"
;
45.
}
<!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; } </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; var current = 0; for(var i=1;i<length;i++){ images[i].opacity = 0;//为所有图片设置一个自定义属性opacity images[i].onclick = (function(i){ return function(){ current = i + 1; if(current > 3) current = 3 } })(i); } images[0].opacity = 0.99; (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> </body> </html>
运行代码
好了本文就到止了,简单的结构层与表现层注定了行为层不会有多大作为。相册如果要做得很漂亮,通常需要动用到定义列表与伪类,随之而来的是几百行javascript代码,显然这与我的题目不符。另,基于时间轴来编写代码太考验人的思维能力,没有可视化界面吓跑一堆人,都跑去做Flash了。
一个很简单的淡入淡出相册 (转)相关推荐
- 一个很简单的淘宝优惠券搜索助手 大家看看有没有用吧
一个很简单的淘宝优惠券搜索助手 大家看看有没有用吧 下载地址:http://pan.baidu.com/s/1skRHTDF 转载于:https://www.cnblogs.com/devgis/p/ ...
- 一个很简单的淘宝优惠券搜索助手 大家看看有没有用吧 下载地址:http://pan.baidu.com/s/1skRHTDF
一个很简单的淘宝优惠券搜索助手 大家看看有没有用吧 下载地址:http://pan.baidu.com/s/1skRHTDF
- 一个很简单的基于栈式过程虚拟机的实现,它运行目标平台【x86】的原生代码。
本文提供的 "栈式过程虚拟机" 的实现,挂在本人的 github 上面,对想要深入了解 "栈式过程虚拟机" 的人,它或许可以起到一个不错的作用,但是本人建议一般 ...
- python写一个很简单的Atm机系统,使用pickle模块和json模块来保存数据
我做的是一个很简单的Atm系统,很多都没约束条件 目的: 用面向对象思维来处理 运用文件的读写 文件的读写用pickle模块和json模块来处理 pickle模块: pickle模块处理数据功能很强大 ...
- html案例:模拟一个很简单的聊天框
html案例:模拟一个很简单的聊天框 实现的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- 64位游戏找call_网络小游戏怎么修改技能满级,满血?教大家一个很简单的修改方法!...
最近去忙着给小弟培训,都忘记上来发文章了,刚好小弟找了个小游戏练练逆向数据分析,下面就给大家讲讲他是怎么做到修改数据后,达到无限满血,全技能升级完的. 首先介绍几个概念: 网络游戏的变态功能的一般实现 ...
- 【每天一个JQuery特效】淡入淡出显示或隐藏窗口(1)
为什么80%的码农都做不了架构师?>>> 我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记. 本特效主要采用fa ...
- 一个很简单的问题:遍历int数组并删掉所有偶数
一开始想的很简单,使用for循环和if判断进行遍历,如果是偶数则remove.后来发现和arraylist记混了,数组删除的话必须依次向前移一位,然后去掉最后一位. int[] line = {1,2 ...
- 简单php会员注册代码,用PHP实现一个很简单的,会员登记系统
最近很忙没什么东西可写,之前找了点时间自己研究了一下php,但是离精通还有很远的距离啊.但是还是参考网上一些代码,自己做了一个简单的会员登记系统,主要是用于社团之类的登记人数,增删改查这四个基本要素只 ...
最新文章
- 后台的代理nginx部署方法
- 南京大学教授施斌及其团队—— 光纤变“神经” 大地能感知
- C语言程序设计第一节课作业
- Swift之深入解析访问控制权限
- CodeForces - 1553E Permutation Shift(暴力+置换群求环)
- 资源 | 深度学习课程入门与介绍
- python matplotlib画图遇到的问题——标题重叠问题
- 怎样备份和恢复SAV企业版服务器的设置
- Vue-Less的自动和手动引入
- 纹理特征描述之灰度差分统计特征(平均值 对比度 熵) 计算和比较两幅纹理图像的灰度差分统计特征 matlab代码实现
- mysql id 不连续_MySQL中自增主键不连续之解决方案。(20131109)
- docker rabbitmq_RabbitMQ消息中间件快速入门
- xml文件导入wps_Office12使用XML格式存储文件回击WPS
- Visio Viewer 打开vsd文件
- 让XP系统也支持微软雅黑字体
- 互联网常见域名后缀含义
- 快速制作机房3D效果图教程
- 【Python计量】内生性问题、工具变量法与二阶段最小二乘法2SLS
- 几个新的H5标签介绍
- 谷歌 draco学习 一 压缩格网信息
热门文章
- Leetcode-第 73 场双周赛
- Python 工具链让你写的代码更规范
- delphi中exit,abort,break,continue,halt,runerro 的区别
- 系统架构设计师视频教程免费下载
- Winform中设置ZedGraph曲线图的字体样式是避免出现边框
- VS开发C#窗体应用时怎样设置窗体属性
- Webservice开发之xsd中开发list请求参数的接口
- Atom中安装atom-terminal插件来打开命令行运行vue项目
- springboot-嵌入式Servlet容器(Tomcat)源码分析以及容器切换
- 【爬虫笔记】Scrapy爬虫技术文章网站