funciona - Muy simple, muy suave, marquesina de JavaScript
javascript pdf (8)
Estoy tratando de encontrar una carpa javascript o jquery muy simple, suave y liviana. Ya probé la marquesina de seda o algo así, pero no funcionaría con la aplicación que estaba usando. Así que cuanto más simple y más corto, mejor y más fácil de depurar. ¿Alguien sabe de un reemplazo de javascript fácil de implementar para la carpa?
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
var tWidth=''300px''; // width (in pixels)
var tHeight=''25px''; // height (in pixels)
var tcolour=''#ffffcc''; // background colour:
var moStop=true; // pause on mouseover (true or false)
var fontfamily = ''arial,sans-serif''; // font for content
var tSpeed=3; // scroll speed (1 = slow, 5 = fast)
// enter your ticker content here (use // and /' in place of / and '' respectively)
var content=''Are you looking for loads of useful information <a href="http:////javascript.about.com//">About Javascript<//a>? Well now you/'ve found it.'';
var cps=-tSpeed; var aw, mq; var fsz = parseInt(tHeight) - 4; function startticker(){if (document.getElementById) {var tick = ''<div style="position:relative;width:''+tWidth+'';height:''+tHeight+'';overflow:hidden;background-color:''+tcolour+''"''; if (moStop) tick += '' onmouseover="cps=0" onmouseout="cps=-tSpeed"''; tick +=''><div id="mq" style="position:absolute;right:0px;top:0px;font-family:''+fontfamily+'';font-size:''+fsz+''px;white-space:nowrap;"><//div><//div>''; document.getElementById(''ticker'').innerHTML = tick; mq = document.getElementById("mq"); mq.style.right=(10+parseInt(tWidth))+"px"; mq.innerHTML=''<span id="tx">''+content+''<//span>''; aw = document.getElementById("tx").offsetWidth; lefttime=setInterval("scrollticker()",50);}} function scrollticker(){mq.style.right = (parseInt(mq.style.right)>(-10 - aw)) ?
mq.style.right = parseInt(mq.style.right)+cps+"px": parseInt(tWidth)+10+"px";} window.onload=startticker;
</script>
</head>
<body>
<div id="ticker">
this is a simple scrolling text!
</div>
</body>
</html>
Acabo de crear un complemento simple de jQuery para eso. Intentalo ;)
He hecho una función muy simple para marquesina. Consulte: http://jsfiddle.net/vivekw/pHNpk/2/ Se detiene en el mouseover y se reanuda en Mouseleave. La velocidad puede ser variada. Fácil de entender.
function marquee(a, b) {
var width = b.width();
var start_pos = a.width();
var end_pos = -width;
function scroll() {
if (b.position().left <= -width) {
b.css(''left'', start_pos);
scroll();
}
else {
time = (parseInt(b.position().left, 10) - end_pos) *
(10000 / (start_pos - end_pos)); // Increase or decrease speed by changing value 10000
b.animate({
''left'': -width
}, time, ''linear'', function() {
scroll();
});
}
}
b.css({
''width'': width,
''left'': start_pos
});
scroll(a, b);
b.mouseenter(function() { // Remove these lines
b.stop(); //
b.clearQueue(); // if you don''t want
}); //
b.mouseleave(function() { // marquee to pause
scroll(a, b); //
}); // on mouse over
}
$(document).ready(function() {
marquee($(''#display''), $(''#text'')); //Enter name of container element & marquee element
});
Hice mi propia versión, basada en el código presentado anteriormente por @Tats_innit. La diferencia es la función de pausa. Funciona un poco mejor en ese aspecto.
(function ($) {
var timeVar, width=0;
$.fn.textWidth = function () {
var calc = ''<span style="display:none">'' + $(this).text() + ''</span>'';
$(''body'').append(calc);
var width = $(''body'').find(''span:last'').width();
$(''body'').find(''span:last'').remove();
return width;
};
$.fn.marquee = function (args) {
var that = $(this);
if (width == 0) { width = that.width(); };
var textWidth = that.textWidth(), offset = that.width(), i = 0, stop = textWidth * -1, dfd = $.Deferred(),
css = {
''text-indent'': that.css(''text-indent''),
''overflow'': that.css(''overflow''),
''white-space'': that.css(''white-space'')
},
marqueeCss = {
''text-indent'': width,
''overflow'': ''hidden'',
''white-space'': ''nowrap''
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false, pause: false }, args);
function go() {
if (!that.length) return dfd.reject();
if (width <= stop) {
i++;
if (i <= args.count) {
that.css(css);
return dfd.resolve();
}
if (args.leftToRight) {
width = textWidth * -1;
} else {
width = offset;
}
}
that.css(''text-indent'', width + ''px'');
if (args.leftToRight) {
width++;
} else {
width=width-2;
}
if (args.pause == false) { timeVar = setTimeout(function () { go() }, args.speed); };
if (args.pause == true) { clearTimeout(timeVar); };
};
if (args.leftToRight) {
width = textWidth * -1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
timeVar = setTimeout(function () { go() }, 100);
return dfd.promise();
};
})(jQuery);
uso:
para el inicio: $ (''# Text1''). marquee ()
pausa: $ (''# Text1''). marquee ({pause: true})
curriculum vitae: $ (''# Text1''). marquee ({pause: false})
Hola, simple demostración de las recomendaciones de los comentarios anteriores: jsfiddle.net/FWWEn
con funcionalidad de pausa en mouseover: http://jsfiddle.net/zrW5q/
Espero que esto ayude, que tengas una buena, salud!
html
<h1>Hello World!</h1>
<h2>I''ll marquee twice</h2>
<h3>I go fast!</h3>
<h4>Left to right</h4>
<h5>I''ll defer that question</h5>
Código jquery
(function($) {
$.fn.textWidth = function(){
var calc = ''<span style="display:none">'' + $(this).text() + ''</span>'';
$(''body'').append(calc);
var width = $(''body'').find(''span:last'').width();
$(''body'').find(''span:last'').remove();
return width;
};
$.fn.marquee = function(args) {
var that = $(this);
var textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
''text-indent'' : that.css(''text-indent''),
''overflow'' : that.css(''overflow''),
''white-space'' : that.css(''white-space'')
},
marqueeCss = {
''text-indent'' : width,
''overflow'' : ''hidden'',
''white-space'' : ''nowrap''
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
i = 0,
stop = textWidth*-1,
dfd = $.Deferred();
function go() {
if(!that.length) return dfd.reject();
if(width == stop) {
i++;
if(i == args.count) {
that.css(css);
return dfd.resolve();
}
if(args.leftToRight) {
width = textWidth*-1;
} else {
width = offset;
}
}
that.css(''text-indent'', width + ''px'');
if(args.leftToRight) {
width++;
} else {
width--;
}
setTimeout(go, args.speed);
};
if(args.leftToRight) {
width = textWidth*-1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
go();
return dfd.promise();
};
})(jQuery);
$(''h1'').marquee();
$(''h2'').marquee({ count: 2 });
$(''h3'').marquee({ speed: 5 });
$(''h4'').marquee({ leftToRight: true });
$(''h5'').marquee({ count: 1, speed: 2 }).done(function() { $(''h5'').css(''color'', ''#f00''); })
Los siguientes trabajos:
El problema con su código original fue que está llamando scrollticker() al pasar una cadena a setInterval , donde solo debe pasar el nombre de la función y tratarlo como una variable:
lefttime = setInterval(scrollticker, 50);
en lugar de
lefttime = setInterval("scrollticker()", 50);
Mi recuadro de texto para más texto y la posición absoluta habilitada
http://jsfiddle.net/zrW5q/2075/
(function($) {
$.fn.textWidth = function() {
var calc = document.createElement(''span'');
$(calc).text($(this).text());
$(calc).css({
position: ''absolute'',
visibility: ''hidden'',
height: ''auto'',
width: ''auto'',
''white-space'': ''nowrap''
});
$(''body'').append(calc);
var width = $(calc).width();
$(calc).remove();
return width;
};
$.fn.marquee = function(args) {
var that = $(this);
var textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
''text-indent'': that.css(''text-indent''),
''overflow'': that.css(''overflow''),
''white-space'': that.css(''white-space'')
},
marqueeCss = {
''text-indent'': width,
''overflow'': ''hidden'',
''white-space'': ''nowrap''
},
args = $.extend(true, {
count: -1,
speed: 1e1,
leftToRight: false
}, args),
i = 0,
stop = textWidth * -1,
dfd = $.Deferred();
function go() {
if (that.css(''overflow'') != "hidden") {
that.css(''text-indent'', width + ''px'');
return false;
}
if (!that.length) return dfd.reject();
if (width <= stop) {
i++;
if (i == args.count) {
that.css(css);
return dfd.resolve();
}
if (args.leftToRight) {
width = textWidth * -1;
} else {
width = offset;
}
}
that.css(''text-indent'', width + ''px'');
if (args.leftToRight) {
width++;
} else {
width--;
}
setTimeout(go, args.speed);
};
if (args.leftToRight) {
width = textWidth * -1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
go();
return dfd.promise();
};
// $(''h1'').marquee();
$("h1").marquee();
$("h1").mouseover(function () {
$(this).removeAttr("style");
}).mouseout(function () {
$(this).marquee();
});
})(jQuery);
Por qué escribir código jQuery personalizado para Marquee ... solo use un complemento para jQuery - marquee () y utilícelo como en el siguiente ejemplo:
Primero incluye:
<script type=''text/javascript'' src=''//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js''></script>
y entonces:
//proporcional speed counter (for responsive/fluid use)
var widths = $(''.marquee'').width()
var duration = widths * 7;
$(''.marquee'').marquee({
//speed in milliseconds of the marquee
duration: duration, // for responsive/fluid use
//duration: 8000, // for fixed container
//gap in pixels between the tickers
gap: $(''.marquee'').width(),
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//''left'' or ''right''
direction: ''left'',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
Si puedes hacerlo más simple y mejor, te desafío a todas las personas :). No hagas tu vida más difícil de lo que debería ser. Más información sobre este complemento y sus funcionalidades en: aamirafridi.com/jquery/jquery-marquee-plugin
Responsable resistir jQuery marquee simple plugin. Tutorial:
// start plugin
(function($){
$.fn.marque = function(options, callback){
// check callback
if(typeof callback == ''function''){
callback.call(this);
} else{
console.log("second argument (callback) is not a function");
// throw "callback must be a function"; //only if callback for some reason is required
// return this; //only if callback for some reason is required
}
//set and overwrite default functions
var defOptions = $.extend({
speedPixelsInOneSecound: 150, //speed will behave same for different screen where duration will be different for each size of the screen
select: $(''.message div''),
clickSelect: '''', // selector that on click will redirect user ... (optional)
clickUrl: '''' //... to this url. (optional)
}, options);
//Run marque plugin
var windowWidth = $(window).width();
var textWidth = defOptions.select.outerWidth();
var duration = (windowWidth + textWidth) * 1000 / defOptions.speedPixelsInOneSecound;
var startingPosition = (windowWidth + textWidth);
var curentPosition = (windowWidth + textWidth);
var speedProportionToLocation = curentPosition / startingPosition;
defOptions.select.css({''right'': -(textWidth)});
defOptions.select.show();
var animation;
function marquee(animation){
curentPosition = (windowWidth + defOptions.select.outerWidth());
speedProportionToLocation = curentPosition / startingPosition;
animation = defOptions.select.animate({''right'': windowWidth+''px''}, duration * speedProportionToLocation, "linear", function(){
defOptions.select.css({''right'': -(textWidth)});
});
}
var play = setInterval(marquee, 200);
//add onclick behaviour
if(defOptions.clickSelect != '''' && defOptions.clickUrl != ''''){
defOptions.clickSelect.click(function(){
window.location.href = defOptions.clickUrl;
});
}
return this;
};
}(jQuery));
// end plugin
Utilice este complemento jQuery personalizado como se muestra a continuación:
//use example
$(window).marque({
speedPixelsInOneSecound: 150, // spped pixels/secound
select: $(''.message div''), // select an object on which you want to apply marquee effects.
clickSelect: $(''.message''), // select clicable object (optional)
clickUrl: ''services.php'' // define redirection url (optional)
});