上下无缝滚动(应用高级盒子模型)

转载 2015年07月07日 10:23:26
<!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=gb2312" />
<title>文字列表无缝向上滚动JavaScript代码</title>
<style>
    *{margin:0px;padding:0px;border:0px;}
    body{font-size:12px}
	
    #demo1{
      height:auto;
      text-align:left;
    }
    #demo2{
      height:auto;
      text-align:left;
    }
    #demo1  li{
      list-style-type:none;
      height:22px;
      background:url() no-repeat left center;
      text-align:left;
      text-indent:15px;
    }
    #demo2  li{
      list-style-type:none;
      height:22px;
      background:url() no-repeat left center;
      text-align:left;
      text-indent:15px;
    }
</style>
</head>
<body>
    <div id="demo" style="overflow:hidden;height:80px;width:280px;">
        <ul id="demo1">
            <li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>
		    <li><a href="/soft/5884.shtml" target="_blank">多层嵌套的一个层展开</a></li>
		    <li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版</a></li>
		    <li><a href="/soft/1286.shtml" target="_blank">CSS、HTML教程打包下载 (CHM)</a></li>
		    <li><a href="/soft/4216.shtml" target="_blank">《C++ Primer》中文第四版 chm</a></li>
		    <li><a href="/soft/3388.shtml" target="_blank">C++工资管理系统(Access)</a></li>
		    <li><a href="/soft/2009.shtml" target="_blank">非常牛的左侧栏JS折叠菜单</a></li>
        </ul>
        <ul id="demo2"></ul>
    </div>
	<!-- javascript代码 -->
    <script>
	    // 定义速度
        var speed = 40
        var demo = document.getElementById("demo");
        var demo2 = document.getElementById("demo2");
        var demo1 = document.getElementById("demo1");
		// 复制demo1的内容到demo2中去
        demo2.innerHTML=demo1.innerHTML
		
		// 核心轮换函数
        function Marquee(){
			// 是否demo1
            if(demo2.offsetTop - demo.scrollTop <= 0)
              demo.scrollTop -= demo1.offsetHeight
            else{
			  // demo中的内容向上移动
              demo.scrollTop ++
            }
        }
		// setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,而clearInterval()是用来清除调用的。
        var MyMar = setInterval(Marquee,speed)
		// 鼠标移入
        demo.onmouseover = function() {
		    clearInterval(MyMar)
	    }
		// 鼠标移出
        demo.onmouseout = function() {
		    MyMar=setInterval(Marquee,speed)
	    }
    </script>
</body>
</html>

js上下无缝滚动代码

上下滚动跟左右滚动的原理是一样的,但是有些细节需要注意,例如到底哪个div需要左悬浮,我会标注出来,但是我还是不太能弄明白float这个属性 上下无缝滚动...
  • LVGAOYANH
  • LVGAOYANH
  • 2016年10月09日 14:21
  • 972

CSS Border高级使用实例分享(三角等形状)

原理 css盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以...
  • u011630575
  • u011630575
  • 2015年10月27日 10:33
  • 417

jq文字上下无缝滚动--没注意看--挺简单的

*{ margin: 0px; padding: 0px; } .box{ width: 500px; height: 50px; line-hei...
  • li3196672779
  • li3196672779
  • 2017年06月16日 00:36
  • 457

js 跑马灯 间歇无缝上下滚动

类似新闻滚动的那种,跑马灯,无缝滚动,而且是间歇的$(obj).find("ul").animate({ marginTop : "0" }, 400, function() { ...
  • IT429
  • IT429
  • 2017年06月15日 21:43
  • 651

vue-无缝滚动

vue-无缝滚动
  • github_38524608
  • github_38524608
  • 2017年12月15日 14:27
  • 228

文字上下滚动并来回循环

                         文字内容
  • zxmsmile
  • zxmsmile
  • 2009年03月23日 16:05
  • 328

marquee标签的向上无缝滚动

先写个案例 这是案例这是案例这是案例这是案例这是案例这是案例这是案例 在说说direction属性 direction="left" 向左(默认值) direction="right" 向右...
  • u014796999
  • u014796999
  • 2016年08月13日 22:02
  • 2125

marquee无缝滚动例子

第一、新建marquee.css文件。在marquee.css文件中加入如下如下CSS代码:#demo { background: #FFF; overflow:hidden; border: 1px...
  • xmq_666
  • xmq_666
  • 2010年03月24日 16:44
  • 10023

样式表三种使用方式和盒子模型

样式表三种使用方式和盒子模型 css 的三种使用方式; 行内样式表 内部样式表 外部引入样式表 盒子模型 行内样式表时指将CSS样式编码写在HTML标签中, 格式如下: ...
  • zhaoyangjian724
  • zhaoyangjian724
  • 2016年05月15日 16:59
  • 594

JavaScript实现走马灯效果,上 下 左 右无缝连接、循环滚动

1 一 2 二 3 三 5 四 6 五 4 六
  • leiyonglin
  • leiyonglin
  • 2011年08月19日 18:00
  • 8486
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:上下无缝滚动(应用高级盒子模型)
举报原因:
原因补充:

(最多只允许输入30个字)