图片向上滚动

articleHeight=150;
stopscrolla=false;
article1.scrollTop=0;
//more javascript from http://www.webjx.com
with(article1){
style.width=0;
style.height=articleHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscrolla=true");
onmouseout=new Function("stopscrolla=false");
}

preTopa=0; currentTopa=0; stoptimea=0;

function init_srolltext1(){
article2.innerHTML="";
article2.innerHTML+=article1.innerHTML;
article1.innerHTML=article2.innerHTML+article2.innerHTML;
setInterval("scrollUp1()",50);
}
function scrollUp1(){
if(stopscrolla==true) return;
currentTopa+=1;
if(currentTopa==151)
{
stoptimea+=1;
currentTopa-=1;
if(stoptimea==50)
{
currentTopa=0;
stoptimea=0;
}
}
else {
preTopa=article1.scrollTop;
article1.scrollTop+=1;
if(preTopa==article1.scrollTop){
article1.scrollTop=article2.offsetHeight-articleHeight;
article1.scrollTop+=1;
}
}

}
init_srolltext1();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 新闻一段时间向上滚动效果

    BODY { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } UL { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } LI { FONT-SIZE: 12px; MARGIN: 0px; OVERFLOW: visible; LINE-HEIGHT: 140% } A:link { FONT-SIZE: 12px;

  • js 实现无缝滚动 兼容IE和FF

    原理解析: 1.首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden: 2.容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果: 3.改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理): 4.到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间

  • JS左右无缝滚动(一般方法+面向对象方法)

    复制代码 代码如下: <!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=&qu

  • 简单的无缝滚动程序-仅几行代码

    <ul id="ScrollBox" style="width:300px;height:80px;overflow:hidden;margin:0;padding:0;line-height:20px;font-size:12px;"> <li>1.你可曾有过无数的梦想,</li> <li>2.却在时光的流逝里幻灭 </li> <li>3.你可曾对未来期待憧憬,</li> <

  • 简短几句jquery代码的实现一个图片向上滚动切换

    animate()参数介绍: animate() 方法执行 CSS 属性集的自定义动画. 该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). PS:但是如果你引用了最新jquery ui框架的话backgroudColor,color之类的属性也可以实现渐变了. PS:使用 &q

  • jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码

    html 文件 gundong-0.1.html 复制代码 代码如下: <!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>

  • jquery无缝向上滚动实现代码

    JS部份 复制代码 代码如下: $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 2000 ); }).trigger("mouseout"); });

  • 彻底搞懂JS无缝滚动代码

    在做个东西要滚动代码 而且是无缝的 搞了半天还是不行  决心一定要把这个问题搞定 经过研究 也不难 代码如下: 程序代码 复制代码 代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600>  <table  align=top>  <tr>  <td id=demo1 valign=top> <p>aaaaaaaaaa

  • 基于jQuery的图片左右无缝滚动插件

    在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

  • 无缝滚动改进版支持上下左右滚动(封装成函数)

    复制代码 代码如下: <!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>无缝滚动--上下</title>    <style type="text/css">    *{margin:0;padding:0;}    li{list-style:none;}  

随机推荐