滚动效果- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 滚动效果

技术文章搜索

关键字

Javascript 中的滚动效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 38 ::

收藏到网摘: n/a

采用CSS和JS,刚好我最近有个站点要用到下拉菜单! 将HTML自动转为JS代码

点击运行可以看到效果:

<div id="adsfar"> <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC"> <tr> <td bgcolor="#FFFFFF">1</td> </tr> <tr> <td bgcolor="#FFFFFF">2</td> </tr> <tr> <td bgcolor="#FFFFFF">3</td> </tr> <tr> <td bgcolor="#FFFFFF">4</td> </tr> <tr> <td bgcolor="#FFFFFF">5</td> </tr> <tr> <td bgcolor="#FFFFFF">6</td> </tr> <tr> <td bgcolor="#FFFFFF">7</td> </tr> <tr> <td bgcolor="#FFFFFF">8</td> </tr> <tr> <td bgcolor="#FFFFFF">9</td> </tr> <tr> <td bgcolor="#FFFFFF">10</td> </tr> <tr> <td bgcolor="#FFFFFF">11</td> </tr> <tr> <td bgcolor="#FFFFFF">12</td> </tr> <tr> <td bgcolor="#FFFFFF">13</td> </tr> <tr> <td bgcolor="#FFFFFF">14</td> </tr> <tr> <td bgcolor="#FFFFFF">15</td> </tr> <tr> <td bgcolor="#FFFFFF">16</td> </tr> <tr> <td bgcolor="#FFFFFF">17</td> </tr> <tr> <td bgcolor="#FFFFFF">18</td> </tr> <tr> <td bgcolor="#FFFFFF">19</td> </tr> <tr> <td bgcolor="#FFFFFF">20</td> </tr> <tr> <td bgcolor="#FFFFFF">21</td> </tr> <tr> <td bgcolor="#FFFFFF">22</td> </tr> <tr> <td bgcolor="#FFFFFF">23</td> </tr> <tr> <td bgcolor="#FFFFFF">24</td> </tr> <tr> <td bgcolor="#FFFFFF">25</td> </tr> <tr> <td bgcolor="#FFFFFF">26</td> </tr> <tr> <td bgcolor="#FFFFFF">27</td> </tr> <tr> <td bgcolor="#FFFFFF">28</td> </tr> </table>
</div>
<script type="text/javascript">
marque(320,196,"icefable1","box1left")
var scrollElem;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
function marque(width,height,marqueName,marqueCName){ try{ marqueesHeight = height; stopscroll = false; scrollElem = document.getElementById("adsfar"); with(scrollElem){ style.width = width; style.height = marqueesHeight; style.overflow = 'hidden'; noWrap = true; } scrollElem.onmouseover = new Function('stopscroll = true'); scrollElem.onmouseout = new Function('stopscroll = false'); preTop = 0; currentTop = 0; stoptime = 0; leftElem = document.getElementById("adsfar"); scrollElem.appendChild(leftElem.cloneNode(true)); init_srolltext(); }catch(e) {}
}
function init_srolltext(){ scrollElem.scrollTop = 0; setInterval('scrollUp()', 18);
}
function scrollUp(){ if(stopscroll) return; currentTop += 1; if(currentTop == marqueesHeight+1) { stoptime += 1; currentTop -= 1; if(stoptime == (marqueesHeight)*1) {//停顿时间 currentTop = 0; stoptime = 0; } }else{ preTop = scrollElem.scrollTop; scrollElem.scrollTop += 1; if(preTop == scrollElem.scrollTop){ scrollElem.scrollTop = marqueesHeight; scrollElem.scrollTop += 1; } }
}
</Script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

采用CSS和JS,刚好我最近有个站点要用到下拉菜单! 将HTML自动转为JS代码

Javascript 中的 滚动效果

评论 (0) All

Javascript 中的滚动效果