第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

scrollleft不起作用,我這個簡單的例子有沒有人幫我完善下左右滾動發(fā)給我謝謝啊

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

#div1{

margin-left: 50px;

width: 100px;

height: 25px;

background: red;

padding-top: 5px;

}

#div2{

height: 20px;

background: gray;

overflow: hidden;

}

ul{

list-style: none;

height: 20px;

}

li{

line-height: 20px;

float: left;

width: 25px;

}

</style>

<script type="text/javascript">

window.onload=function(){

var div2=document.getElementById("div2")

var ul1=document.getElementById("ul1")

var ul2=document.getElementById("ul2")

ul2.innerHTML=ul1.innerHTML

div2.scrollLeft=30

}

</script>

</head>

<body>

<div id="div1">

<div id="div2">

<ul id="ul1">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

<ul id="ul2"></ul>

</div>

</div>

</body>

</html>

這個是我簡寫的代碼

我發(fā)現(xiàn)的是ul里面的內(nèi)容不夠顯示會擠到div2下方而不是水平顯示超出的范圍,

這個可能導致scrollleft不起作用,不知道怎么解決

正在回答

5 回答

<!DOCTYPE?html>
<html>

<head>
????<meta?charset="UTF-8">
????<title></title>
????<style?type="text/css">
????*?{
????????margin:?0;
????????padding:?0;
????}
????
????#div1?{
????????margin-left:?50px;
????????width:?100px;
????????height:?25px;
????????background:?red;
????????padding-top:?5px;
????}
????
????#div2?{
????????/*?去除兩個行內(nèi)塊級元素邊距?*/
????????font-size:?0;
????????/*?不換行?*/
????????white-space:?nowrap;
????????height:?20px;
????????background:?gray;
????????overflow:?hidden;
????}
????
????ul?{
????????/*?設(shè)置為行內(nèi)塊級元素?*/
????????display:?inline-block;
????????/*?重寫font-size?*/
????????font-size:?15px;
????????list-style:?none;
????????height:?20px;
????}
????
????li?{
????????line-height:?20px;
????????float:?left;
????????width:?25px;
????}
????</style>
????<script?type="text/javascript">
????window.onload?=?function()?{
????????var?div2?=?document.getElementById("div2")
????????var?ul1?=?document.getElementById("ul1")
????????var?ul2?=?document.getElementById("ul2")
????????ul2.innerHTML?=?ul1.innerHTML;

????????var?speed?=?50;
????????var?tag?=?1;

????????setInterval(function()?{
????????????if?(div2.scrollLeft?===?0)?{
????????????????tag?=?1;
????????????}
????????????if?(div2.scrollLeft?===?ul1.scrollWidth)?{
????????????????tag?=?-1;
????????????}
????????????div2.scrollLeft?+=?tag;
????????},?speed);
????}
????</script>
</head>

<body>
????<div?id="div1">
????????<div?id="div2">
????????????<ul?id="ul1">
????????????????<li>1</li>
????????????????<li>2</li>
????????????????<li>3</li>
????????????????<li>4</li>
????????????????<li>5</li>
????????????????<li>6</li>
????????????</ul>
????????????<ul?id="ul2"></ul>
????????</div>
????</div>
</body>

</html>


0 回復 有任何疑惑可以回復我~
#1

Hong 提問者

你的兩次寫法都沒有把<li>5</li><li>6</li>顯示出來是什么原因?
2017-01-16 回復 有任何疑惑可以回復我~
#2

背著行囊獨自流浪 回復 Hong 提問者

給ul設(shè)置寬度150px就可以了。
2017-01-16 回復 有任何疑惑可以回復我~

http://img1.sycdn.imooc.com//598472cd0001d96302480272.jpg將li的css設(shè)置成這樣,就無法滾動,為何

0 回復 有任何疑惑可以回復我~
#1

香寶的夫差

使用scrollLeft的必要條件是: 第一:此標簽的內(nèi)容寬度超過了標簽本身的寬度。 第二:scrollLeft的值范圍是在一定范圍內(nèi)的,不能無限增大。
2017-08-04 回復 有任何疑惑可以回復我~
<!DOCTYPE?html>
<html>

<head>
????<meta?charset="UTF-8">
????<title></title>
????<style?type="text/css">
????*?{
????????margin:?0;
????????padding:?0;
????}
????
????#div1?{
????????margin-left:?50px;
????????width:?100px;
????????height:?25px;
????????background:?red;
????????padding-top:?5px;
????}
????
????#div2?{
????????/*?去除兩個行內(nèi)塊級元素邊距?*/
????????font-size:?0;
????????/*?不換行?*/
????????white-space:?nowrap;
????????height:?20px;
????????background:?gray;
????????overflow:?hidden;
????}
????
????ul?{
????????/*?設(shè)置為行內(nèi)塊級元素?*/
????????display:?inline-block;
????????/*?重寫font-size?*/
????????font-size:?15px;
????????list-style:?none;
????????height:?20px;
????}
????
????li?{
????????line-height:?20px;
????????float:?left;
????????width:?25px;
????}
????</style>
????<script?type="text/javascript">
????window.onload?=?function()?{
????????var?div2?=?document.getElementById("div2")
????????var?ul1?=?document.getElementById("ul1")
????????var?ul2?=?document.getElementById("ul2")
????????ul2.innerHTML?=?ul1.innerHTML;

????????//?1000?/?60,最佳滾動頻率
????????var?speed?=?17;

????????setInterval(function()?{
????????????div2.scrollLeft++;

????????????//?滾動一半時,拉回起點
????????????if?(div2.scrollLeft?===?ul1.scrollWidth)?{
????????????????div2.scrollLeft?=?0;
????????????}
????????},?speed);
????}
????</script>
</head>

<body>
????<div?id="div1">
????????<div?id="div2">
????????????<ul?id="ul1">
????????????????<li>1</li>
????????????????<li>2</li>
????????????????<li>3</li>
????????????????<li>4</li>
????????????????<li>5</li>
????????????????<li>6</li>
????????????</ul>
????????????<ul?id="ul2"></ul>
????????</div>
????</div>
</body>

</html>


0 回復 有任何疑惑可以回復我~
#1

香寶的夫差

如果將li不float 左滾動無法實現(xiàn),就像下圖
2017-08-04 回復 有任何疑惑可以回復我~

有沒有人能在基礎(chǔ)上修改下給我參考下,謝謝

0 回復 有任何疑惑可以回復我~

http://img1.sycdn.imooc.com//587b88750001fed506680424.jpg

如圖,設(shè)置#div2不換行,ul為行內(nèi)塊級元素即可。

0 回復 有任何疑惑可以回復我~
#1

Hong 提問者

不行啊,你能不能在我的基礎(chǔ)上幫我把代碼完善下我參考下。
2017-01-16 回復 有任何疑惑可以回復我~
#2

背著行囊獨自流浪 回復 Hong 提問者

完善了,試試。
2017-01-16 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
信息滾動效果制作
  • 參與學習       47740    人
  • 解答問題       333    個

萌妹子帶您快速學習滾動效果,掌握無縫滾動和歇間性滾動的制作方法

進入課程

scrollleft不起作用,我這個簡單的例子有沒有人幫我完善下左右滾動發(fā)給我謝謝啊

我要回答 關(guān)注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號