- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试让这个新闻自动收报机工作。出于某种原因,它将在第二个列表项之后重新启动,这不是我想要的 - 我希望它在列表项中循环直到最后。这个脚本有什么问题?
这是一个 JSFiddle
HTML
<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1>
<div id="ticker">
<div class="event">test1</div>
<div class="event">test2</div>
<div class="event">test3</div>
<div class="event">test4</div>
</div>
CSS
.event{float: left; width: 100px;}
Javascript/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.data('isStopped') != 1)
{
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, 10);
};
if(args.leftToRight) {
width = textWidth*-1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
that.data('isStopped', 0);
that.bind('mouseover', function() { $(this).data('isStopped', 1); }).bind('mouseout', function() { $(this).data('isStopped', 0); });
go();
return dfd.promise();
};
})(jQuery);
$('h1').marquee();
$('#ticker').marquee();
最佳答案
放在容器div里就可以了
<div id="ticker-container">
<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1> <div id="ticker">
<div class="event">test1</div>
<div class="event">test2</div>
<div class="event">test3</div>
<div class="event">test4</div>
</div>
</div>
$('#ticker-container').marquee();
关于javascript - News Ticker - 提前重启,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10576995/
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this
我有 .otf 和 .ttf 格式的字体。我想在我的 Apple News 文章中使用它,但我不断收到错误 Error: Custom font (postscript name=CustomFont
我已经完成了 CI 文档中包含的众所周知的“新闻”教程。有时我的链接字符串中会出现双“新闻/”段,如下所示:“/codeig/news/news/entry”,有时在重新加载页面后一切正常。我应该提一
Apple 似乎没有关于他们如何在 Apple News 中为您的 channel 提取主图像的文档。 这个在这里: 我的网站上有 og:image 标签 + apple-touch-icon met
旧版 Facebook News Feed 和新版之间是否存在问题? 我的位置开放图集合的输出之间存在冲突。 在旧的新闻提要中,我在使用 Open Graph 进行跨平台 checkin 时得到了这个
我经历了安装refinerycms-news引擎的过程; 我将 refinerycms-news 添加到我的 gemfile 中。 gem "refinerycms-news", '~> 2.0.0'
我正在实现一个管理子域,并且已经用谷歌搜索试图找到这个问题的答案,但是我还没有找到另一个实例。 我的子域部分的路由如下所示: constraints :subdomain => 'admin' do
如何测试/验证我的 Google 新闻站点地图? 如果我去搜索控制台,我可以选择添加/测试站点地图。但是它说我有一个无效的 XML 标签: 父标签:出版物 标签:关键词 但我可以看到这个标签是有效的,
在支持苹果新闻共享方面,请您能帮我一下, 我的共享扩展名info.plist包含: NSExtension NSExtensionAttributes NSExte
我们现在已经在 Apple News 上建立了多个网站。对于我们一半的网站(构建在一个平台上),95% 的时间图像都显示在文章 ListView 中。我们网站的另一半在文章列表中显示图像的概率为 0%
我可以使用CAShapeLayer和UIBezierPath画圆,也可以使用CAShapeLayer.strokeEnd这个属性来控制进度。但是路径和时间的快速滚动,我不知道如何实现。 现在我认为方法
我想每小时从右到左保留元素 box1 的每个内部每隔 24 小时/一天,元素 box1、box2 和 box 3 将从底部向上.. .box { display: flex; flex-dir
如何像facebook news feed一样在一个页面显示多表数据? 示例表/事件、任务/ 我想按日期时间对它们进行排序,最新的在顶部。我可以通过 php 来完成,但我需要 mysql 方式。
我正在尝试让这个新闻自动收报机工作。出于某种原因,它将在第二个列表项之后重新启动,这不是我想要的 - 我希望它在列表项中循环直到最后。这个脚本有什么问题? 这是一个 JSFiddle HTML Thi
我的客户要求在他们的网站上提供自动旋转的新闻提要类型的东西。内容不会改变,但会自动从一个元素移动到下一个。它还将允许用户将鼠标悬停在之前的元素上并将它们保持在原位。 您在 Yahoo 主页上找到的内容
我正在尝试使用official API找到每个黑客新闻用户的业力(点) 。我是编程新手。 以下是我为获取某个特定用户的业力而编写的代码片段。 HN 上有近 30 万个用户帐户。 var request
有谁知道如何构建“新闻和天气”应用程序使用的那种标签? see here http://img51.imageshack.us/img51/8788/tabsd.png 这意味着可以向左和向右滚动的选
一篇新闻文章就像 Awesome News bla bla bla... 如果我想包含相关新闻并对其进行标记怎么办? Related News 1
我正在使用类似于 facebook 的 PHP/MySQL 设计一个新闻提要系统。 我之前也问过类似的问题,但现在我改变了设计,我正在寻找反馈。 示例新闻: User_A commented on U
这个BUG让我真的很无语: 第一次遇到过,在更新 内容数据时出现过,后来解决了,但没记录下来是如何解决的。 这次又遇到了。 主要原因可能是: 1、更新数据库缓存、临时文件缓存等。这些一堆垃圾
我是一名优秀的程序员,十分优秀!