【第22期】观点:IT 行业加班,到底有没有价值?

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

转载 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学习笔记【完】

随笔记录的,全作以后参考,好者可参之 ================无聊的分隔线============================= 2014-10-8 星期三 1. 变量,常量...

CSS盒子模型

一,盒子模型图  <div style="backgrou

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

第十二章:盒子模型的合并原则

一、外边距合并 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。  </
  • tudy
  • tudy
  • 2015-02-09 21:21
  • 109

css盒子模型的简单应用

以某个网站的总体框架为例,学习css盒子模型的思想,可以为以后我们进行网站框架构思的时候提供帮助。 html代码: 盒子模型的应用 ...

CSS的盒子模型案例

CSS的功能可谓强大,作为程序员,不能只在后台默默无闻,也要到前台爽一把,意思意思,这样自己干活从前台 界面到后台数据库就算是全能了。能给自己省了不少力气,艺多不压身嘛,下面来介绍一下CSS里面的盒子模型。 <span style="white-space: pre;"
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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