Javascript开发之十一:案例:

案例一:滚动的文字

<html>
<head>
<title>实例-滚动的文字</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">

//定义一类面对象
function ScrollText(text,fn,t){
this.text=text;
this.fn=fn;
this.t=t || 300 ;//如果为空则设置为300毫秒
}

// ScrollText.prototype.start //给这个对象添加两个方法
// ScrollText.prototype.stop //给这个对象添加两个方法

//给这个对象添加两个方法
ScrollText.prototype={
start:function(){
//alert(this);
var s=this.text;//this指向的是:ScrollText
var fn=this.fn;//this指向的是:ScrollText
this.interval= setInterval(function(){
//alert(this);//this指向的是: window对象
s=s.push(s.shift());
fn(text.join(''));
},this.t);//this指向的是:ScrollText
},
stop:function(){
clearInterval(this.interval);
}
};


window.onload=function(){

var st=new ScrollText('helle wolrd',function(t){
p.innerHTML=t;
});
st.start();
//Demo1 设置在标题上的动文字
var btnStart=document.getElementById("btnStart");
var btnStop=document.getElementById("btnStop");
var flag;
var t;
btnStart.onclick=function(){
flag=true;
var s=document.title.split("");
clearInterval(t);//作用：清除，让每个开始都是1秒钟
t=setInterval(function(){
if(flag){
s.push(s.shift());//清除数组中第一个数，并返回这个数，同时加入到数组s结束位置
document.title=s.join("");
}
},1000);
this.disabled=true;
btnStop.disabled=false;
};

btnStop.onclick=function(evt){
flag=false;
clearInterval(t);//作用：清除，让每个开始都是1秒钟
this.disabled=true;
btnStart.disabled=false;
};

//Demo2 设置在一个对象上的滚动文字
var p=$("scrollText");

scrollText("hello world!!!",p,'innerHTML',1000);
//给一个对象在某一个属性设置文字,t表明时间；
function scrollText(text,o,attr,t){
//o[attr]=text;
text=text.split('');
setInterval(function(){
text.push(text.shift());
o[attr]=text.join('');
},t);
}

function $(obj){
return document.getElementById(obj);
}
}

</script>

<style type="text/css">
#scrollText{
margin:10px;
background:yellow;
border:solid 1px;
}
</style>
</head>

<body>

</body>
<input type="button" value="start" id="btnStart"></input>
<input type="button" value="stop" id="btnStop"></input>
<div id="oDiv"></div>
<p id="scrollText">dad</p>
</html>

 

 

 

案例之二:动画:

<html>
<head>
<title> 动画 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}

window.onload=function(){
var oDiv=$("oDiv");
setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+1+"px";
oDiv.style.top=oDiv.offsetTop+1+"px";
},50);
/*setTimeout(fun,50);
function fun(){
oDiv.style.left=oDiv.offsetLeft+1+"px";
setTimeout(fun,50);
}*/
//alert(oDiv);
animate(oDiv,'width',1,100,500,50);

function animate(obj,attr,add,start,end,t)//对象,属性,增量,开始位置,结束位置,时间间隔
{
alert("123");
var saved=start;//记录开始的位置
setInterval(function(){
//如果取得对象开始的属性值，如果写在样式表里则要用 getRealStyle
if(saved>=end) return;
saved+=add;
obj.style[attr]=saved+"px";
},t);
}
}

</script>
<style type="text/css">
#oDiv
{
height:200px;
width:200px;
border:3px ridge aqua;
background:blue;
position:absolute;
font-size:10px;
left:150px;
top:150px;
}
</style>
</head>

<body class="redStyle">

</body>
<div id="oDiv" style="left:100px;top:100px" />
</html>

 

 案例三:画动2

<html>
<head>
<title> 动画2 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}

window.onload=function(){
var oDiv=$("oDiv");
//animate(oDiv,'width',100,300,1000,Quad);
//animate(oDiv,'left',100,400,1000,Quad);
//animate(oDiv,'50',100,500,1000,Quad);
//可以进行改进animate
animate(oDiv,{
'width':100,
'left':100,
'top':50
},{
'width':600,
'left':400,
'top':300
},1000,Quad);

}

/*
参数说明
curTime:当前时间,即动画已经进行了多长时间,开始时间为0
start:开始值
dur:动画持续多长时间
alter:总的变化量
*/
//left 从100 增加到150，增加了50
function animate(o,start,alter,dur,fx)
{
var curTime=0;
var t=setInterval(function(){
if(curTime>=dur) clearTimeout(t);
for(var i in start)
{
o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
}
curTime+=50;
},50);//选50mm是因为一般屏的刷新率是60HZ
}

//即匀速运动
function Linear (start,alter,curTime,dur)
{
return start+curTime/dur*alter ;
}

//二次方缓动
function Quad (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,2)*alter;
}


function animate1(obj,attr,add,start,end,t)//对象,属性,增量,开始位置,结束位置,时间间隔
{
//alert("123");
var max=Math.max(start,end),
min=Math.min(start,end);
var saved=add>0?min+add:max+add;
//var saved=start;//记录开始的位置
setInterval(function(){
//如果取得对象开始的属性值，如果写在样式表里则要用 getRealStyle
if(min>=max) return;
saved+=add;
obj.style[attr]=saved+"px";
},t);
}

</script>
<style type="text/css">
#oDiv
{
height:200px;
width:200px;
border:3px ridge aqua;
background:blue;
position:absolute;
font-size:10px;
left:150px;
top:150px;
}
</style>
</head>

<body class="redStyle">

</body>
<div id="oDiv" style="left:100px;top:100px" />
</html>

案例四：透明度：

IE：            filter(alpha(opacity=50));

Mozilla:       opacity=0.6    

       

posted on 2012-11-25 18:44  peter.peng  阅读(271)  评论(0)  编辑  收藏  举报