javascript 的动画效果（显示动态时间，动态图片，动态text，图片切换）

最新推荐文章于 2020-06-11 17:49:06 发布

iteye_3270

最新推荐文章于 2020-06-11 17:49:06 发布

阅读量551

点赞数

文章标签： JavaScript Exchange prototype HTML ViewUI

<%@page contentType="text/html;charset=GBK" language="java" pageEncoding="GBK"%>

<html>
<head>
<style>
</style>

</head>

<script type="text/javascript" src="<%=request.getContextPath()%>/prototype-1.6.0.3.js" >
</script>

<body >
<table width="100%">
<tr ><td colspan="3" align="center" class="greenText">动漫效果展示</td></tr>
<tr ><td colspan="3" align="center" class="redText">动漫效果展示</td></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td width="20%"></td>
<td>
<h1><input TYPE="text" id ="one" name="notice"value="hi1" size="60" style="background-color: rgb(192,192,192)"></h1>
</td>
<td width="20%"></td>
</tr>
<tr>
<td width="40%"></td>
<td align="center">
<h1><input TYPE="text" id ="time" name="notice"value="hi2" size="24" style="background-color: rgb(192,192,192)"></h1>
</td>
<td width="40%"></td>
</tr>
</table>
<p align="center" οnmοuseοver="changeColor(this);" οnmοuseοut="changeColor(this);" οnclick="MoveStamp();">用鼠标单击这里一下会有效果出现，再单击一下则效果消失，如此反复……</p>

<p align="center"><img height="200" width="700"
id="Img" alt="淡入，淡出效果" src="1.jpg" style="filter:blendTrans(duration=7)" ></p>

<div id="stamp" class="move"><p valign="middle" align="center"><br><b>此山是我开，此树是我栽，要想过此路，留下买路财！<b></p></div>
<script type="text/javascript">
var obj =document.getElementById('one');
var spacelen=60;
var msg = '这是一个真实的故事';
var seg = 0;
var space0 = ' ';
var interval = 100;

//动态text
function scroll(){
var len = msg.length;
obj.value = msg.substring(0,seg+1);
seg++;
if(seg>=len){
seg = spacelen;
window.setTimeout('dd()',interval);
}else{
window.setTimeout('scroll()',interval);
}
}
function dd(){
var out ='';
for(var i=0;i<spacelen/space0.length;i++){
out = out+space0;
}
out = out + msg;
var len = out.length;
obj.value = out.substring(seg,len);
seg++;
if(seg>=len){seg = 0;}
window.setTimeout('dd()',interval);
}

scroll();
//显示时间
function setTime(){
var newDate = new Date();
var hour = newDate.getHours();
var min = newDate.getMinutes();
var sec = newDate.getSeconds();
var timeObj = document.getElementById('time');
var str = '';
if(str<10)str='0'
str = str+ ((hour<=12)?hour:hour-12);
str = str +((min<10)?':0':':')+min;
str = str+((sec<10)?':0':':')+sec;

if(hour<12)
str = str+' AM on ';
else
str = str+' PM on ';
var mon = newDate.getMonth()+1;
//document.write(mon);
str = str+mon+'-'+newDate.getDate()+'-'+newDate.getYear();

//str = str+ 'on'+(newDate.getMonth+1);
timeObj.value = str;
window.setTimeout('setTime()',1000);
}
setTime();

//显示动态的text再屏幕中移动
var all=document.all;
var flag=1;//变量flag用来控制“执行或终止执行函数Move()”
var act;
var xhd=0;//变量xhd为信号灯，用于控制“层”的移动方向
function MoveStamp(){
all.stamp.style.top=document.body.offsetTop;//对象stamp的top属性等于对象body的offsetTop值
all.stamp.style.left=document.body.offsetLeft;
all.stamp.style.visibility = "visible";
if(flag==1)
{
act = window.setInterval("Move()",50);//执行函数Move()
flag=0;
}
else
{
window.clearInterval(act);//终止执行函数Move()
all.stamp.style.visibility = "hidden";//隐藏对象stamp
flag=1;
}//if
}//function
function Move(){
if(all.stamp.style.pixelLeft>=document.body.offsetLeft+350) xhd=1;
if(all.stamp.style.pixelLeft<=document.body.offsetLeft) xhd=0;
if(xhd==0)
{
//对象stamp往右下方移动
all.stamp.style.pixelLeft+=5;
all.stamp.style.pixelTop+=5;
}
else {

//对象stamp往左上方移动
all.stamp.style.pixelLeft-=5;
all.stamp.style.pixelTop-=5;
}
}
//改变字体颜色
function changeColor(obj){
if(obj.style.color=='blue'){
obj.style.color = 'green';
}else
obj.style.color = 'blue';
}
//图片淡入，淡出交替
var flagg = 0;
var act;
function show(){
act = window.setInterval("exchange()",9500);
}
function exchange(){
if(flagg ==0){
flagg = 1;
Img.filters.blendTrans.Apply();
Img.src ='2.jpg';
Img.filters.blendTrans.Play();
}else{
flagg = 0;
Img.filters.blendTrans.Apply();
Img.src = '1.jpg';
Img.filters.blendTrans.Play();
}
}
show();
</script>
</body>
</html>