javascript 的卡通效果（显示动态时间，动态图片，动态text，图片切换）
日期：2014-05-16 浏览次数：20336 次
javascript 的动画效果（显示动态时间，动态图片，动态text，图片切换）
<%@page contentType="text/html;charset=GBK" language="java" pageEncoding="GBK"%>
<html>
<head>
<style><!--
body {font-size:9pt}
.move {
cursor:hand;
position:absolute;
visibility:hidden;
height:80;
width:80;
color:yellow;
border:blue 1px solid;
background-color:rgb(147,0,0);
}
.greenText{
font-size:18pt;
height:50;
width:801;
color:green;
position:absolute;
}
.redText{
font-size:18pt;
height:53;
width:805;
color:red;
position:absolute;
}
-->
</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" onmouseover="changeColor(this);" onmouseout="changeColor(this);" onclick="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
<%@page contentType="text/html;charset=GBK" language="java" pageEncoding="GBK"%>
<html>
<head>
<style><!--
body {font-size:9pt}
.move {
cursor:hand;
position:absolute;
visibility:hidden;
height:80;
width:80;
color:yellow;
border:blue 1px solid;
background-color:rgb(147,0,0);
}
.greenText{
font-size:18pt;
height:50;
width:801;
color:green;
position:absolute;
}
.redText{
font-size:18pt;
height:53;
width:805;
color:red;
position:absolute;
}
-->
</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" onmouseover="changeColor(this);" onmouseout="changeColor(this);" onclick="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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
