Thay đổi tốc độ chạy chữ (ảnh) bằng cách rê chuột (Javascript)

- Hôm nay mình sẽ giới thiệu cho các bạn một thủ thuật của
lệnh marquee. Với thủ thuật này, ảnh (chữ) sẽ di chuyển 1 cách liên tục, không bị ngắt quảng giữa ảnh cuối cũng và ảnh đầu tiên. Và thứ 2 nữa là ta có thể thay đổi chiều dịch chuyển cũng như tốc độ dịch chuyển của ảnh (chữ) bằng cách rê chuột.


Đây là một ứng dụng thiêng về java nhiều hơn. Và với thủ thuật rất thích hợp cho việc trình diễn ảnh, hoặc 1 list bài viết nổi bật.

Với việc di chuyển chuột sang trái, ảnh sẽ chuyển động sang phải & ngược lại.
Khi chuột đi vào giữa vùng hiển thị nội dung thì sự di chuyển ngừng lại.

☼Sau đây là cách thực hiện:

1. Tạo 1 widget HTML.

2. Sau đó dán code này vào:

///////// Code của javascript - DO
NOT EDIT///////////////////

<script type="text/javascript">



function marqueeInit(config){

if(!document.createElement) return;

marqueeInit.ar.push(config);

marqueeInit.run(config.uniqueid);

}



(function(){



if(!document.createElement) return;



marqueeInit.ar = [];



document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}'
+

'#marq_kill_marg_bord{border:none!important;margin:0!important;}</style>');

var c = 0, tTRE = [new RegExp('^\s*$'), new RegExp('^\s*'), new RegExp('\s*$')],

req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {

style: { //default style object for marquee containers without
configured style

'margin': '0 auto'

},

direction: 'left',

inc: 2, //default speed - pixel increment for each iteration of a
marquee's movement

mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or
false)

}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;



/*@cc_on @*/

/*@if(@_jscript_version >= 5)

ie = true;

try{document.documentMode = 2000}catch(e){};

iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE
(d+.d+).*$/, '$1'));

if(iever < 6)

oldie = 1;

if(iever < 5.5){

Array.prototype.push = function(el){this[this.length] = el;};

ie5 = true;

dash = new RegExp('(-(.))');

String.prototype.encamel = function(s, m){

s = this;

while((m = s.match(dash)))

s = s.replace(m[1], m[2].toUpperCase());

return s;

};

}

@end @*/



if(!ie5){

dash = new RegExp('-(.)', 'g');

function toHump(a, b){return b.toUpperCase();};

String.prototype.encamel = function(){return this.replace(dash, toHump);};

}



if(ie && iever < 8){

marqueeInit.table = [];

window.attachEvent('onload', function(){

marqueeInit.OK = true;

for(var i = 0; i < marqueeInit.table.length; ++i)

marqueeInit.run(marqueeInit.table[i]);

});

}



function intable(el){

while((el = el.parentNode))

if(el.tagName && el.tagName.toLowerCase() === 'table')

return true;

return false;

};



marqueeInit.run = function(id){

if(ie && !marqueeInit.OK && iever < 8 &&
intable(document.getElementById(id))){

marqueeInit.table.push(id);

return;

}

if(!document.getElementById(id))

setTimeout(function(){marqueeInit.run(id);}, 300);

else

new Marq(c++, document.getElementById(id));

}



function trimTags(tag){

var r = [], i = 0, e;

while((e = tag.firstChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))

tag.removeChild(e);

while((e = tag.lastChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))

tag.removeChild(e);

if((e = tag.firstChild) && e.nodeType == 3)

e.nodeValue = e.nodeValue.replace(tTRE[1], '');

if((e = tag.lastChild) && e.nodeType == 3)

e.nodeValue = e.nodeValue.replace(tTRE[2], '');

while((e = tag.firstChild))

r[i++] = tag.removeChild(e);

return r;

}



function Marq(c, tag){

var p, u, s, a, ims, ic, i, marqContent, cObj = this;

this.mq = marqueeInit.ar[c];

for (p in defaultconfig)

if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) (!this.mq.hasOwnProperty
&& !this.mq[p]))

this.mq[p] = defaultconfig[p];

this.mq.style.width = !this.mq.style.width
isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;

if(!tag.getElementsByTagName('img')[0])

this.mq.style.height = !this.mq.style.height
isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' :
this.mq.style.height;

else

this.mq.style.height = !this.mq.style.height
isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;

u = this.mq.style.width.split(/d/);

this.cw = this.mq.style.width? [parseInt(this.mq.style.width),
u[u.length - 1]] : ['a'];

marqContent = trimTags(tag);

tag.className = tag.id = '';

tag.removeAttribute('class', 0);

tag.removeAttribute('id', 0);

if(ie)

tag.removeAttribute('className', 0);

tag.appendChild(tag.cloneNode(false));

tag.className = ['marquee', c].join('');

tag.style.overflow = 'hidden';

this.c = tag.firstChild;

this.c.appendChild(this.c.cloneNode(false));

this.c.style.visibility = 'hidden';

a = [[req1, this.c.style], [this.mq.style, this.c.style]];

for (i = a.length - 1; i > -1; --i)

for (p in a[i][0])

if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) (!a[i][0].hasOwnProperty))

a[i][1][p.encamel()] = a[i][0][p];

this.m = this.c.firstChild;

if(this.mq.mouse == 'pause'){

this.c.onmouseover = function(){cObj.mq.stopped = true;};

this.c.onmouseout = function(){cObj.mq.stopped = false;};

}

this.m.style.position = 'absolute';

this.m.style.left = '-10000000px';

this.m.style.whiteSpace = 'nowrap';

if(ie5) this.c.firstChild.appendChild((this.m =
document.createElement('nobr')));

if(!this.mq.noAddedSpace)

this.m.appendChild(document.createTextNode('xa0'));

for(i = 0; marqContent[i]; ++i)

this.m.appendChild(marqContent[i]);

if(ie5) this.m = this.c.firstChild;

ims = this.m.getElementsByTagName('img');

if(ims.length){

for(ic = 0, i = 0; i < ims.length; ++i){

ims[i].style.display = 'inline';

ims[i].style.verticalAlign = ims[i].style.verticalAlign 'top';

if(typeof ims[i].complete == 'boolean' && ims[i].complete && !window.opera)

ic++;

else {

ims[i].onload = function(){

if(++ic == ims.length)

cObj.setup();

};

}

if(ic == ims.length)

this.setup();

}

}

else this.setup()

}



Marq.prototype.setup = function(){

if(this.mq.setup) return;

this.mq.setup = this;

var s, cObj = this;

if(this.c.style.height === 'auto')

this.c.style.height = this.m.offsetHeight + 4 + 'px';

this.c.appendChild(this.m.cloneNode(true));

this.m = [this.m, this.m.nextSibling];

if(this.mq.mouse == 'cursor driven'){

this.r = this.mq.neutral 16;

this.sinc = this.mq.inc;

this.c.onmousemove = function(e){cObj.mq.stopped = false;
cObj.directspeed(e)};

if(this.mq.moveatleast){

this.mq.inc = this.mq.moveatleast;

if(this.mq.savedirection){

if(this.mq.savedirection == 'reverse'){

this.c.onmouseout = function(e){

if(cObj.contains(e)) return;

cObj.mq.inc = cObj.mq.moveatleast;

cObj.mq.direction = cObj.mq.direction == 'right'? 'left' : 'right';};


} else {

this.mq.savedirection = this.mq.direction;

this.c.onmouseout = function(e){

if(cObj.contains(e)) return;

cObj.mq.inc = cObj.mq.moveatleast;

cObj.mq.direction = cObj.mq.savedirection;};

}

} else

this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc =
cObj.mq.moveatleast;};

}

else

this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};

}

this.w = this.m[0].offsetWidth;

this.m[0].style.left = 0;

this.c.id = 'marq_kill_marg_bord';

this.m[0].style.top = this.m[1].style.top =
Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) +
'px';

this.c.id = '';

this.c.removeAttribute('id', 0);

this.m[1].style.left = this.w + 'px';

s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc
this.mq.inc);

while(this.c.offsetWidth > this.w - s)

this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0]
+ this.cw[1];

this.c.style.visibility = 'visible';

this.runit();

}



Marq.prototype.slowdeath = function(){

var cObj = this;

if(this.mq.inc){

this.mq.inc -= 1;

this.timer = setTimeout(function(){cObj.slowdeath();}, 100);

}

}



Marq.prototype.runit = function(){

var cObj = this, d = this.mq.direction == 'right'? 1 : -1;

if(this.mq.stopped this.mq.stopMarquee){

setTimeout(function(){cObj.runit();}, 300);

return;

}

if(this.mq.mouse != 'cursor driven')

this.mq.inc = Math.max(1, this.mq.inc);

if(d * parseInt(this.m[0].style.left) >= this.w)

this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w +
'px';

if(d * parseInt(this.m[1].style.left) >= this.w)

this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w +
'px';

this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc
+ 'px';

this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc
+ 'px';

setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay 0));

}



Marq.prototype.directspeed = function(e){

e = e window.event;

if(this.timer) clearTimeout(this.timer);

var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof
e.pageX == 'number'?

e.pageX : e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft) - l,

lb = (w - this.r) / 2, rb = (w + this.r) / 2;

while((c = c.offsetParent)) mp -= c.offsetLeft;

this.mq.direction = mp > rb? 'left' : 'right';

this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) /
lb * this.sinc);

}



Marq.prototype.contains = function(e){

if(e && e.relatedTarget){var c = e.relatedTarget; if(c == this.c) return
true;

while ((c = c.parentNode)) if(c == this.c) return true;}

return false;

}



function resize(){

for(var s, m, i = 0; i < marqueeInit.ar.length; ++i){

if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){

m = marqueeInit.ar[i].setup;

s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc
m.mq.inc);

m.c.style.width = m.mq.style.width;

m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';

while(m.c.offsetWidth > m.w - s)

m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];

}

}

}



if (window.addEventListener)

window.addEventListener('resize', resize, false);

else if (window.attachEvent)

window.attachEvent('onresize', resize);



})();

</script>



///////// Nội dung hiển thị
///////////////////



<div class="marquee" id="fd-test1">



ĐOẠN TEXT MUỐN HIỂN
THỊ



</div>



<script type="text/javascript">

marqueeInit({

uniqueid: 'fd-test1',

style: {

'padding': '5px',

'width': '450px',

'background':
'lightyellow',

'border': '1px
solid #CC3300'

},

inc: 8,
//tốc độ mặc đinh
khi không có rê chuột lên

mouse: 'cursor driven',
//cho phép tác
động chuột lên

moveatleast: 4,

neutral: 150,

savedirection: true

});

</script>



<div class="marquee" id="fd-test2">

<img src="LINK ẢNH 1" />

<img src="LINK ẢNH 2" />

<img src="LINK ẢNH 3" />

<img src="LINK ẢNH 4" />

<img src="LINK ẢNH 5" />

</div>



<script type="text/javascript">

marqueeInit({

uniqueid: 'fd-test2',

style: {

'padding': '2px',

'width': '600px',

'height': '180px'

},

inc: 5,
//tốc độ mặc đinh
khi không có rê chuột lên

mouse: 'cursor driven',
//cho phép tác
động chuột lên

moveatleast: 2,

neutral: 150,

savedirection: true

});

</script>

Thay đổi code màu xanh theo yêu cầu hiển thị của bạn, thay code link ảnh bằng ảnh của bạn.

3. Save lại là xong.