滚动新闻自动收报机Jquery - 问题 [英] Scrolling News Ticker Jquery - Issues
问题描述
原始来源&示例:
http://www.htmldrive.net/items/show/397/Vertical-Scrolling-News-Ticker-With-jQuery-jCarouse
你好再次!!滚动新闻Ticker Jquery有一些问题:
Hello Again!! Scrolling News Ticker Jquery with some issues:
第一期:Internet Explorer错误消息
First Issue : Internet Explorer Error Message
对象不支持此属性或方法行:269:第269行)
" Object doesn't support this property or method " Line: 269: Line 269)
ticker.mouseenter(function() { // <---Line: 269
//stop current animation
ticker.children().stop();
});
- 第二个问题:点击新闻选项(指向页面链接)的唯一方法是通过网站示例中的蓝色文本标题。
我希望用户能够点击
包含图像的选项的整个部分。 - Second Issue : The only way of clicking on a news option (to be directed to the link of a page) is through the text title that in the website example is in blue color. I would like for the user to be able to click on the whole section of the option that includes the image aswell.
- 第三期:当新闻滚动时,它看起来都是一体的,有没有办法添加一个分隔每个部分的行。
- Third Issue : When the news scrolls it looks all in one, is there a way to add a line to separate each section.
- Forth Issue :当用户将鼠标
放在一个部分上时,有没有办法暂停自动滚动? - 有没有办法在下面添加更多文字标题和类别?
- Forth Issue: Is there a way to pause the automatic scrolling when a user puts the mouse over a section?
- Is there a way to add more text under the title and category?
以下是脚本本身的IE问题右侧带箭头突出显示
:
Here is the script itself with the IE issue highlighted with an arrow on the right hand side below:
<script type="text/javascript">
$(function() {
//cache the ticker
var ticker = $("#ticker");
//wrap dt:dd pairs in divs
ticker.children().filter("dt").each(function() {
var dt = $(this),
container = $("<div>");
dt.next().appendTo(container);
dt.prependTo(container);
container.appendTo(ticker);
});
//hide the scrollbar
ticker.css("overflow", "hidden");
//animator function
function animator(currentItem) {
//work out new anim duration
var distance = currentItem.height();
duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.020;
//animate the first child of the ticker
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
//move current item to the bottom
currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
//recurse
animator(currentItem.parent().children(":first"));
});
};
//start the ticker
animator(ticker.children(":first"));
//set mouseenter
ticker.mouseenter(function() {
ticker.mouseenter(function() { // <---Line: 269
//stop current animation
ticker.children().stop();
});
//set mouseleave
ticker.mouseleave(function() {
//resume animation
animator(ticker.children(":first"));
});
});
</script>
我会非常感激!!
推荐答案
添加行分隔每个项目添加 border-bottom:1px solid black;
到css。
to add line to separate each items add border-bottom:1px solid black;
to the css.
在阅读完你的问题后,我想向你展示我在我网站上使用的javascript方法,并在鼠标悬停时停止。
after read your question i would like to show you the javascript method that i used in my site and stops when mouse over.
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div><style type="text/css">
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
您可以在这里
这篇关于滚动新闻自动收报机Jquery - 问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!