[英]Why this javascript is not working on my site?
我的确看到的是红色的“最新新闻”,但文本的位置不正确,但我看到一个字:“你好”,下面没有动静,文本是静态的。
这是我在网站的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);
)。
试试这个,我认为这会为您提供帮助。
<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>
基本jQuery库中未定义“ newsTicker”方法。
您需要下载Flexible-jQuery-Vertical-News-Ticker-Plugin库。 转到以下链接:
将您的脚本放入jQuery中的onReady函数中。 这样可以确保在尝试访问元素之前已加载页面: http : //learn.jquery.com/using-jquery-core/document-ready/
$( 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');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.