یک مثال ساده ...
/**
* File Desc : this is an class that makes a txt to slide up or down
* and then continues to do that when disappears it then
* appears from the opposite location
*
* date 2015
*/
var limo = limo || {};
(function(limo){
var TxtShake = (function(){
var init = function(){
//console.dir('initing');
var div = document.createElement('div');
div.style.position = 'relative';
div.style.top = '0px';
div.style.left = '0px';
div.style.textAlign = 'center';
return div;
}
var initParent = function(id){
var pnt = document.getElementById(id);
pnt.style.overflow = 'hidden';
return pnt;
}
var checkForUp = function(obj){
//this is for knowing when to
//change the location of the div
//to the oppos
if(!obj.height)
initWidthAndHeight(obj);
var top = parseInt(obj.div.style.top);
var h = parseInt(obj.pnt.style.height);
/*console.log('top = '+top);
console.log('pnt.height = '+h);*/
if(top < -1 * h){
top = h;
obj.div.style.top = top+'px';
}
}
var checkForDown = function(obj){
if(!obj.height)
initWidthAndHeight(obj);
var top = parseInt(obj.div.style.top);
/*console.log('top = '+top);
console.log('pnt.height = '+parseInt(obj.pnt.style.height));*/
if(top > parseInt(obj.pnt.style.height)){
top = -1 * top;/*obj.height/8);*/
obj.div.style.top = top+'px';
}
}
var reqAnim = (function(){
return window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.webkitRequestAimationFrame ||
window.oRequestAnimationFrame ||
setTimeout(callback,1000/60);
})();
var cancelAnim = function(){
var temp = reqAnim(function(){});
//console.log(temp);
while(--temp){
cancelAnimationFrame(temp);
}
}
var KeepGoingDown = function(obj){
checkForDown(obj);
obj.down();
reqAnim(function(){KeepGoingDown(obj)});
}
var keepGoingUp = function(obj){
checkForUp(obj);
obj.up();
reqAnim(function(){keepGoingUp(obj)});
}
var attachEvent = function(div){
div.onmouseover = function(){
cancelAnim();
div.style.backgroundColor = 'cyan';
}
div.onmouseout = function(){
div.style.backgroundColor = '';
}
}
var attachEventStop = function(obj){
obj.div.onmouseover = function(){
cancelAnim();
}
obj.pnt.onmouseover = function(){
cancelAnim();
}
obj.pnt.onmouseout = function(){
if(obj.status === 'up')
obj.up().keep();
else
obj.down().keep();
}
}
var stylingItems = function(obj,arr){
for(var i = 0;i<arr.length;i++){
var div = document.createElement('div');
div.style.position = 'relative';
div.style.fontSize = '14pt';
div.style.textAlign = 'center';
div.style.minHeight = '25px';
div.style.marginTop = -2+'px';
div.style.padding = '2px';
div.style.color = '#2f4f4f';
div.style.borderBottom = '1px outset gray';
div.style.borderTop = '1px outset gray';
attachEvent(div);
div.innerHTML = arr[i];
obj.div.appendChild(div);
}
attachEventStop(obj);
}
var initWidthAndHeight = function(obj){
obj.height = 200;
}
function TxtShake(ID_Parent,txtArr){
this.status = 'stand';//can be up | stand | down
this.pnt = initParent(ID_Parent);
this.txtArr = txtArr;
this.speed = 1;
this.waiting = '';//bool
this.div = init();
stylingItems(this,txtArr);
this.pnt.appendChild(this.div);
}
Object.defineProperty(TxtShake.prototype,'width',{
set : function(val){
this.w = parseInt(val);
this.pnt.style.width = this.w+'px';
},
get : function(){
return this.w;
}
});
Object.defineProperty(TxtShake.prototype,'height', {
set : function(val){
this.h = parseInt(val);
this.pnt.style.height = this.h+'px';
},
get : function(){
return this.h;
}
});
TxtShake.prototype.up = function(){
//console.log('going up');
this.status = 'up';
var div = this.div.style;
div.top = parseInt(div.top) - this.speed + 'px';
return this;
}
TxtShake.prototype.down = function(){
//console.log('going down');
this.status = 'down';
var div = this.div.style;
div.top = parseInt(div.top) + this.speed + 'px';
return this;
}
TxtShake.prototype.changeSpeed = function(val){
var val = val || 1;
if(val < 0) val = val * -1;
this.speed = val//parseInt(Math.ceil(val));
//console.log('speed changed');
}
TxtShake.prototype.keep = function(){//WAIT is a obj {wait : number}
//console.log('keep Going');
if (this.status === 'down')
KeepGoingDown(this);
else
keepGoingUp(this);
}
return TxtShake;
})();
limo.TxtShake = TxtShake
})(limo);
اکنون با وارد کردن این کد در بخش head میتوانیم به این صورت متن متحرک ایجاد کنیم ....
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1256">
<title>moving up or down</title>
<script src = 'txtshake.js'></script>
<style>
#exp{//this is the parent div
//height : 200px;
//width : 400px;
margin : auto;
//txt-align : center;
border : 5px double #800000;
border-radius : 25px;
box-shadow : 5px 5px 5px #777;
background : #f6dd49;
}
</style>
</head>
<body>
<div id='exp'></div><!-- this is the parent div -->
<script>
var txt = ["<a href='#'>'1 - my name is SC0d3r'</a>",
'2 - i am coding right now',
'2 - i am coding right now',
'3 - how are you my friend',
'4 - are you a programmer like me ?',
'4 - are you a programmer like me ?',
'4 - are you a programmer like me ?'];
var txtShaker = new limo.TxtShake('exp',txt);// making a new TxtShaker
txtShaker.width = 400;//if not set it will inherit from parent
txtShaker.height = 200;//if not set it will be set to 200
txtShaker.down().keep();//if you call just down() it will come down just once
</script>
</body>
</html>