DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV滾動條隨機位置的設置技巧
DIV滾動條隨機位置的設置技巧
編輯:CSS詳解     

剛才一個朋友告訴我他的blog友情鏈接太多了,所以把所有鏈接放到一個DIV中,加了個滾動條,可是他又不想每次別人來看,看到的都是前面幾個鏈接,於是問我有沒有什麼辦法,想了一個,呵呵,正好有個辦法

style後面用於限定DIV樣式並加滾動條,這個不多說
關鍵的地方其實很簡單,最後兩行Javascript就是了,起作用的只有最後一行:
obj.scrollTop=obj.scrollHeight*(Math.random());
obj.scrollTop:滾動條距離頂部的位置
obj.scrollHeight:流動區域的高度
Math.random():獲得一個隨機數
很簡單,有人可能需要,用就拿去,哈哈

PS:IE6 / IE7 / FF2 測試通過
IE7在本地測試時只是每次打開時滾動條位置才不同,刷新卻沒有變化,但放到網站上之後就正常了

代碼如下:

<div id="cc" style="height:250px;width:200px;overflow-y:scroll;overflow-x:hidden;">
<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li>
<li>09</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li>
<li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
<li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li>
<li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li>
<li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li>
</div>
<script>
var obj = document.getElementById("cc");
obj.scrollTop=obj.scrollHeight*(Math.random());
</script>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved