设置图片在网页中的时间变换

最新推荐文章于 2021-06-07 13:06:09 发布
最新推荐文章于 2021-06-07 13:06:09 发布
阅读量154 收藏
点赞数
原文链接：http://www.cnblogs.com/yingfeng/archive/2009/11/02/1594493.html
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片效果 </title>
</head>

<body>

<style>
.a1{ FILTER: alpha(opacity=100); width:100%; height:100%}
.a2{ FILTER: alpha(opacity=90); width:80%; height:80%}
.a3{ FILTER: alpha(opacity=80); width:70%; height:70%}
.a4{ FILTER: alpha(opacity=70); width:60%; height:60%}
.a5{ FILTER: alpha(opacity=60); width:50%; height:50%}
.a6{ FILTER: alpha(opacity=50); width:40%; height:40%}
.a7{ FILTER: alpha(opacity=40); width:30%; height:30%}
.a8{ FILTER: alpha(opacity=30); width:20%; height:20%}
.a9{FILTER: alpha(opacity=20); width:10%; height:10%}
.a10{ FILTER: alpha(opacity=0); width:0; height:0}

</style>


<body>
<div id="fu">
<div  style="POSITION: relative; width:100px; height:100px" id="banner" >
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style=" POSITION: absolute;  DISPLAY: none "  /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"  /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"  /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"  /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"  /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"  /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"  /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"  /> </a>


</div>

</div>
<a href="#" οnclick="(fu.style.display=='none')?fu.style.display='block':fu.style.display='none';" >隐藏或显示 </a>
</body>

<script>
var banner=document.getElementById("banner");//获得父容器
var img=banner.getElementsByTagName("IMG");//得到容器下的IMG
var i=0;//标记当前展示的IMG
displayFlag=true;//标记最外层容器是否被隐藏
function checkDisplay(obj){//循环banner的父元素，有任意一层隐藏则退出方法
while(obj.parentNode.tagName!="BODY"){
obj=obj.parentNode;
if(obj.style!=null)
if(obj.offsetWidth==0||obj.style.display=="none"||obj.style.visibility=="hidden"){
var imagesss=document.getElementById("banner").getElementsByTagName("IMG");

for(var fr=0;fr <imagesss.length;fr++){
imagesss[fr].style.visibility="hidden";
}
return displayFlag=false;
}
else
return displayFlag=true;
}
}
function change(){
img=banner.getElementsByTagName("IMG");//得到容器下的IMG
c=1;//定义className
var t=null;//定义计时器
t=setInterval(function(){
checkDisplay(banner);//运行前先判断一次是否被隐藏
if(c==10||!displayFlag)//一次循环结束，或者被隐藏了，则清空计时器
{
return clearInterval(t);//同时退出方法
}
if(c!=9)//目前只10个样式，循环到9则结束
{
img[i].className="a"+c;//定义新的CLASSNAME
img[i].style.display='inline';//把图片定义为显示状态
img[i].style.visibility='visible';
img[i].style.left=banner.offsetWidth - img[i].offsetWidth;//将图片居右
}
else{
img[i].style.left=0;//此时要隐藏图片，先将图片居左
img[i].className="a1";//再还原CLASSNAME
img[i].style.display="none";//最后隐藏
img[i].style.visibility='hidden';
}
if(i==img.length-1){//当图片循环到最后一张时的处理
img[0].style.left=0;
img[0].style.display="inline";//控制第1个图片显示
img[0].style.visibility='visible';
img[0].className="a"+(10-c);//定义第1个图片的CLASSNAME
}
else{
//否则改变i的下一张图片
img[i+1].style.left=0;
img[i+1].style.display="inline";
img[i+1].style.visibility='visible';
img[i+1].className="a"+(10-c);
}

c++;//样式标记

},100);//0。1秒变动一次
i++;
if(i>=img.length){//循环到最后一张则将i归0
i=0;
}
}
change();
setInterval(change,2000);//计时器

</script>
<!--图片变换效果结束-->
</body>
</html>

转载于:https://www.cnblogs.com/yingfeng/archive/2009/11/02/1594493.html

ailiantan8181
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据时间变换页面背景
weixin_30493401的博客
06-15 689
1.概述 有些时侯为了丰富页面的显示效果，将页面制作成根据时间变换页面背景的样式，这样会使浏览者对此网站不会感觉厌倦，同时也会觉得网站制作的非常新颖。本实例通过Date对象的getHours()方法获得当前系统时间的小时，然后根据不同的时间段来改变页面的背景图片。 2.技术要点 主要使用JavaScript中的Date对象的getHours()方法得到当前系统时间的小时...
js用图片显示现在时间
Amily_an的博客
01-13 1044
js用图片显示现在时间 话不多说，直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用图片显示现在时间</title> <link rel="stylesheet" href="css/index.css"/> ...
html 固定某个时间替换图片
leng0920的博客
01-07 617
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="HandheldFriendly" content="true"/> <meta http-equiv="X-UA-Compatible" cont...
根据时间自动切换网页背景颜色或图片代码-附带教程
06-15
有些时侯为了丰富页面的显示效果，将页面制作成根据时间变换页面背景的样式，这样会使浏览者对此网站不会感觉厌倦，同时也会觉得网站制作的非常新颖。 本文通过 Date 对象的 getHours() 方法获得当前时间，然后根据...
基于JS代码实现图片在页面中旋转效果
10-22
在网页中实现图片旋转，主要是通过JavaScript动态调整图片的位置，模拟出旋转的视觉效果。这种效果通常需要用到数学知识，特别是三角函数，如正弦（sin）和余弦（cos），它们可以帮助计算出图片在不同角度下的位置。...
js实现input框文字动态变换显示效果
10-23
在HTML中，我们可以创建一个`<input>`元素，并通过JavaScript来设置它的`value`属性，使其随着时间推移不断更新，展示动态效果。例如，可以在`<body>`标签内添加`<script>`标签，将上述JavaScript代码放入其中，并在...
网页设计与制作理论试题.pdf
04-09
6. **变形动画**：在Flash中，Transform（变换）动画可以实现不同图形之间的平滑转换。 7. **网页排版**：Dreamweaver的主要排版工具包括表格和CSS（层叠样式表），这两种方式可以创建和调整网页布局。 8. **Flash...
使图片旋转的3种解决方案
09-04
图片旋转在网页设计和开发中是一项常见的需求，特别是在处理用户上传的照片或图像展示时。本文主要探讨了三种针对不同浏览器的图片旋转解决方案，并对这些方法进行了对比。 首先，第一种解决方案是利用CSS3的`...
web开发中图片及日期格式显示问题
a1091220321的专栏
07-23 586
1.日期显示      在开发中，如果直接从数据库里面把Date取出来赋值给相应的实体类的属性，然后去前台显示，那么显示的日期格式往往不能如我们所愿。 这个时候我们可以在后台进行转化，转成字符串类型，然后去前台显示此字符串。比如我们需要在前台显示present的startTime类型。这个时候我们可以这样： SimpleDateFormat dateFormat = new
纯css3实现图片自动切换
热门推荐
HL141916的博客
05-25 2万+
实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容。 大致思路是这样的： 1、将图片设置为li的背景图片； 2、规定一个@keyframes的规则使得图片按照这个规则进行切换； 3、设置每张图片出现的时间； 4、添加轮播焦点； 一、用li标签的background-image是为了实现纯CSS的动态切换。 二、规定一个@keyframes的规则，使图片按照这个规则进行切换
html+javaScript--制作显示当前页面时间。
weixin_46409887的博客
03-04 340
//先上传一个图片 //html代码 //js代码
div带图片定时切换详解
java_yuan的专栏
10-24 2521
我们在页面，有4个div，分别都带图片，我想实现定时切换，下面我来描述下需求。       总共4个div，每个div带一个图片，div下面是序号，我要实现的效果是定时的到下一个图片，显示下一个图，然后我鼠标点击上去，div不动，然后我鼠标拿走，div在继续执行。。。    下面我们来看看，我是怎么样实现的。 先看一个效果图，看你自己怎么切图了： 4 小时前 上传 下
HTML页面中显示时间
qq_43285445的博客
12-04 6717
在HTML页面中显示当前时间 1.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> span{ display: inline-block; /*border: 1px solid black;*/ /*background-color:
js实现图片时间
qq_38259997的博客
12-30 429
js实现图片时间 话不多说上代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onlo...
html 图片缓存时间,css,js,图片资源都应该明确的指定一个缓存时间
weixin_33252423的博客
06-07 874
设置静态内容缓存时间，指标解释：css,js,图片资源都应该明确的指定一个缓存时间。指标解释：css,js,图片资源都应该明确的指定一个缓存时间。评估标准：如果有静态文件的过期时间设置小于30天，将会得到警告。nginx做为web服务器的情况下，我们有时候需要让浏览器缓存(BrowserCaching) 是为了加速浏览并节约网络资源，浏览器在用户磁盘上对最近请求过的文档进行存储。nginx可以通过...
HTML+JS实现点击可以换图片和获取文本时间
cyrrgt的博客
10-13 434
第一次写博客，有写的不清晰的的地方还请告知； 一：先看效果图 1：点击随便一张图片都可以变变量；还用出现系统时间 2：在一次点击效果也会改变，当时间也会改变 二：代码 1：这是Html的代码 2：这是要实现的效果方法 1：这是要用的变量和点击之后会发生的效果 2：这是获取时间的方法 //时间的获取 最后,谢谢观看，又不足的望一定要告知，我会改进的！ ...
使用C#程序语言，实现图片在窗体中随机变换位置。
最新发布
06-02
可以通过以下步骤实现图片在窗体中随机变换位置： 1. 在窗体中添加一个PictureBox控件，用于显示图片。 2. 在窗体的Load事件中加载图片，可以使用以下代码： ``` private void Form1_Load(object sender, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值