我的确看到了红色的“最新新闻”,但文本位置不正确,我看到了一个单词:“你好”,并且没有动静,文本是静态的。
这是我在网站的html代码中使用的代码:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script language='JavaScript'>
var oneliner = $('#oneliner .newsticker').newsTicker({
row_height: 44,
max_rows: 1,
time: 5000,
nextButton: $('#oneliner .header')
});
$('#oneliner .header').hover(function() {
oneliner.newsTicker('pause');
}, function() {
oneliner.newsTicker('unpause');
});
</script>
<div id="oneliner">
<div class="header"> Breaking News </div>
<ul class="newsticker">
<li>hello</li>
<li>hi</li>
</ul>
</div>
<style>
#oneliner {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
position: relative;
margin: 80px auto 40px auto;
width: 900px;
height: 44px;
background-color: #fff;
border-radius: 2px;
}
#oneliner:before, #oneliner:after {
border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
bottom: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
content: "";
left: 10px;
position: absolute;
right: 10px;
top: 50%;
z-index: -1;
}
#oneliner .header {
background-color: #ff2e2e;
display: inline-block;
width: 180px;
height: 44px;
text-transform: uppercase;
font-weight: 500;
line-height: 44px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-align: center;
border-radius: 2px 0 0 2px;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-animation: redPulse 4s infinite;
-moz-animation: redPulse 4s infinite;
animation: redPulse 4s infinite;
}
#oneliner:hover .header {
-webkit-animation: redPulse 1s infinite;
-moz-animation: redPulse 1s infinite;
animation: redPulse 1s infinite;
}
#oneliner .header:active {
background-color: #000;
margin-left: -12px;
color: #aaa;
}
#oneliner ul.newsticker {
display: inline-block;
height: 44px;
width: 710px;
overflow: hidden;
margin: 0 0 0 -3px;
padding: 0 0 0 6px;
line-height: 44px;
font-weight: 500;
background-color: #fafafa;
}
#oneliner ul.newsticker > li{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px dotted #888;
}
@-webkit-keyframes redPulse {
from { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; -webkit-box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
}
@-moz-keyframes redPulse {
from { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; -moz-box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
}
@keyframes redPulse {
from { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
}
</style>
这是它在演示页面中如何处理突发新闻的第一个示例的工作方式:
http://www.jqueryscript.net/demo/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker/
我现在看到的只是演示中的重大新闻,但是hello一词位于其下方,而不位于其中,也不滚动。
编辑:
更改了代码顺序,因此我看到了突发新闻,但在DIV标签内的单词我在突发新闻下仅看到灰色的hello字样,这没什么动静,在演示新闻页面中也没有动静。我还下载了文件http://www.jqueryscript.net/animation/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker.html
伯,我现在该怎么办?将它们升级到我的网站,我应该使用它们在JavaScript中调用它们吗?
<style>
#oneliner {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
position: relative;
margin: 80px auto 40px auto;
width: 900px;
height: 44px;
background-color: #fff;
border-radius: 2px;
}
#oneliner:before, #oneliner:after {
border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
bottom: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
content: "";
left: 10px;
position: absolute;
right: 10px;
top: 50%;
z-index: -1;
}
#oneliner .header {
background-color: #ff2e2e;
display: inline-block;
width: 180px;
height: 44px;
text-transform: uppercase;
font-weight: 500;
line-height: 44px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-align: center;
border-radius: 2px 0 0 2px;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-animation: redPulse 4s infinite;
-moz-animation: redPulse 4s infinite;
animation: redPulse 4s infinite;
}
#oneliner:hover .header {
-webkit-animation: redPulse 1s infinite;
-moz-animation: redPulse 1s infinite;
animation: redPulse 1s infinite;
}
#oneliner .header:active {
background-color: #000;
margin-left: -12px;
color: #aaa;
}
#oneliner ul.newsticker {
display: inline-block;
height: 44px;
width: 710px;
overflow: hidden;
margin: 0 0 0 -3px;
padding: 0 0 0 6px;
line-height: 44px;
font-weight: 500;
background-color: #fafafa;
}
#oneliner ul.newsticker > li{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px dotted #888;
}
@-webkit-keyframes redPulse {
from { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; -webkit-box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
}
@-moz-keyframes redPulse {
from { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; -moz-box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
}
@keyframes redPulse {
from { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
}
</style>
<div id="oneliner">
<div class="header"> Breaking News </div>
<ul class="newsticker">
<li>hello</li>
<li>hi</li>
</ul>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script language='JavaScript'>
$( document ).ready(function() {
var oneliner = $('#oneliner .newsticker').newsTicker({
row_height: 44,
max_rows: 1,
time: 5000,
nextButton: $('#oneliner .header')
});
$('#oneliner .header').hover(function() {
oneliner.newsTicker('pause');
}, function() {
oneliner.newsTicker('unpause');
});
});
</script>
最佳答案
您要选择的元素出现在<script>
之后。当您尝试选择它们时,它们不存在。
将脚本移动到文档的末尾,或者将其放入函数中,并在ready事件触发时调用该函数(jQuery(yourFunction);
)。
关于javascript - 为什么这个JavaScript无法在我的网站上运作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22984839/