jQuery：滾動文本問題
[英]jquery: issue with scrolling texts
問題描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple jQuery scrolling function by Max Vergelli</title>
<style>
body, div, p, ul, li {margin: 0px;padding: 0px;}
div.jp-title{
position:relative;
height:24px;
display:block;
overflow:hidden;
border:#CCCCCC 1px solid;
}
.scrollingtext1{
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS',Arial;
font-size:18px;
font-weight:bold;
color:#000000;
}
.scrollingtext2, .scrollingtext3{
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS',Arial;
font-size:18px;
font-weight:bold;
color:#000000;
visibility:hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$( "#clickme" ).click(function() {
var ob = $('.scrollingtext1');
var tw = ob.width();
var ww = ob.parent().width();console.log(tw);
ob.css({ left: -tw });
ob.animate({ left: ww}, 20000, 'linear', function() {
$('.scrollingtext2').css('visibility' ,'visible');
});
});
});
</script>
</head>
<body>
<div class="jp-title">
<ul>
<li class="scrollingtext1">
scrolling text1: scrolling text1 scrolling text1 scrolling text1 scrolling text1 </li>
</ul>
<li class="scrollingtext2">
scrolling text2: scrolling text2 scrolling text2 scrolling text2 scrolling text2</li>
</ul>
<li class="scrollingtext3">
scrolling text3: scrolling text3 scrolling text3 scrolling text3 scrolling text3</li>
</ul>
</div>
<div id="clickme">
Click here
</div>
</body>
</html>
題：
我要執行此功能：首先，僅顯示scrollingtext1 ，當您第一次單擊“ Click here ， scrollingtext1將向右移動，而scrollingtext2顯示，當您第二次單擊“ Click here ， scrollingtext2將向右移動，然后顯示scrollingtext3 ，當您第三次單擊“ Click here ， scrollingtext3將向右移動，並顯示scrollingtext1 ，然后循環繼續進行。
上面是我當前的代碼，我被卡在這里。 誰能幫我這個？ 謝謝。
1 個解決方案
解決方案1
0 已采納 2013-09-07 04:46:54
干得好。
$('.scrollingtext2,.scrollingtext3').hide();
$("#clickme").click(function () {
var ob = $('li:visible');
var tw = ob.width();
var ww = ob.parent().width();
ob.css({
left: -tw
});
ob.animate({
left: ww
}, 2000, 'linear', function () {
if (!ob.is(':last-child')) {
ob.next('li').show().css('left', -tw);
ob.hide();
} else {
ob.parent().find('li:first').show().css('left', -tw);
ob.hide()
}
});
});
要么
$('.scrollingtext2,.scrollingtext3').hide();
$("#clickme").click(function () {
var ob = $('li:visible');
var tw = ob.width();
var ww = ob.parent().width();
ob.css({
left: -tw
});
ob.animate({
left: ww
}, 2000, 'linear', function () {
if (!ob.is(':last-child')) {
ob.next('li').show().css('left', 0);
ob.hide();
} else {
ob.parent().find('li:first').show().css('left', 0);
ob.hide()
}
});
});
如果您希望在再次單擊之前出現下一行
您的html也有語法錯誤，因此將其更改為
<div class="jp-title">
<ul>
<li class="scrollingtext1">scrolling text1: scrolling text1 scrolling text1 scrolling text1 scrolling text1</li>
<li class="scrollingtext2">scrolling text2: scrolling text2 scrolling text2 scrolling text2 scrolling text2</li>
<li class="scrollingtext3">scrolling text3: scrolling text3 scrolling text3 scrolling text3 scrolling text3</li>
</ul>
</div>
<div id="clickme">Click here</div>
並取出visibility: hidden從CSS這樣我們就可以告訴無形li jQuery中使用選擇從那些可見的小號
.scrollingtext2, .scrollingtext3 {
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS', Arial;
font-size:18px;
font-weight:bold;
color:#000000;
}
視差滾動問題（JQuery）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.