Ada*_*han 1 html javascript ajax jquery marquee
任何人都有想法像twitter一样制作选框效果？它的无缝(doenst停止等待循环结束)+在开始和结束时淡出.谢谢.
编辑
确定编辑,香港专业教育学院在这里发现了一个半无缝http://jsbin.com/uyawi/3/edit但它仍然滞后+不是真正的无缝可能因为使用CSS？
看看他们的代码.他们放置了两个PNG图像,从100%不透明到100%透明淡入淡出.这两个元素放在它们自己的<li>s 里面,在s列表的末尾和a <li>里面<ul>,然后使用CSS放置在浮动的两侧<ul>.
我强烈建议使用Firefox + Firebug或Safari/Chrome以及开发人员的工具栏.所有这些工具都有一个名为"Inspect Element"的功能,可以让您快速深入查看文档中的特定元素并阅读其CSS.
[编辑]我需要在下周左右建立一个卷轴,所以今天我写了一些东西.我的代码将被集成到Adobe Air中,所以我没有进行任何跨浏览器检查.这里的CSS很可能需要调整.我首先尝试使用Remy Sharp的Silky Smooth Marquee,但添加该代码会破坏并重新创建大部分HTML,使得透明翅膀难以集成.构建一个滚动条的代码并不那么难,所以我只是自己动手.以下代码分为五部分:
为了实现这一点,我暂时借用Twitter的窗帘图像并将其保存到我的webroot中/images/left-right-fader.png.他们的推子是一个特定的配色方案,所以我将用我自己的替换它.做一个好公民,也做自己的.在这种情况下,图像是120px宽,左边的左窗帘和[60,0]点的右窗帘.换句话说,它是一个120px宽的单个图像,从左边缘的100%不透明度到中间的0%不透明度到右边缘的100%不透明度.如果更改图像尺寸,则还需要更改CSS.高度无关紧要,因为它是瓷砖.
额外点:如果您的目标是Webkit或Firefox浏览器,您应该能够消除图像并使用具有渐变背景的常规HTML元素(div/span).
body,div {border:none;padding:0;margin:0;}
div#marquee {
position:relative;
overflow:hidden;
background-color:#000;
color:#ddd;
}
div#marquee div.scrollingtext {
position:relative;
display:inline;
white-space:nowrap;
}
div#marquee div.fader {
width:60px;
position:absolute;
background:url(/images/left-right-fader.png) repeat-y scroll 0 0 transparent;
top:0;
left:0;
}
div#marquee div.fader.left {
background-position:-60px 0;
left:auto;
right:0;
}
用法:
var mMarquee = new Marquee(jTarget,strText,intWidth);
jTarget是一个jQuery对空div的引用,你想要滚动条出现(例如,如果你想要显示字幕<div id="myMarqueeDiv"></div>,你会使用$('div#myMarqueeDiv')strText - 你想要滚动的字符串; intWidth - 您希望滚动条的宽度.现在,它返回一个Marquee没有公共方法的对象.添加一些公共方法(例如,作为stop()方法或restart()方法)非常简单.
这是代码:
var Marquee = function(j,s,w) {
var self = this;
var jTarget = j;
var strText = s;
var intWidth = w;
var intPaddingLeft = 60;
var jText,intTextWidth;
var update = function() {
intPaddingLeft -= 2;
if (intPaddingLeft < -intTextWidth) {
intPaddingLeft += intTextWidth;
}
jText.css({'left':intPaddingLeft + 'px'});
};
var setup = function() {
jText = $('<div class="scrollingtext"></div>').text(strText);
jTarget
.append(jText)
.append($('<div class="fader"></div>').html(' '))
.append($('<div class="fader left"></div>').html(' '));
intTextWidth = $(jTarget).find('.scrollingtext').width();
jTarget.width(intWidth);
jText.text(strText + " " + strText);
update();
};
setup();
setInterval(update,30);
return self;
};
在这个具体的例子中,我的身体看起来像这样:
<body>
<div id="marquee"></div>
</body>
strLoremIpsum = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...";
jQuery(function($) {
myMarquee = new Marquee($('div#marquee'),strLoremIpsum,500);
});