信息滚动效果的实例讲解

信息滚动效果的实例讲解

html：

css：

body {

font-size: 12px;

line-height: 24px;

text-algin: center; /* 页面内容居中 */

}

body, h3, ul, li, a {

margin: 0;

padding: 0; /* 去掉所有标签的marign和padding的值 */

}

ul {

list-style: none; /* 去掉ul标签默认的点样式 */

}

a img {

border: none; /* 超链接下，图片的边框 */

}

a {

color: #333;

text-decoration: none; /* 超链接样式 */

}

a:hover {

color: #ff0000;

}

#mooc {

width: 399px;

border: 5px solid #ababab;

-moz-border-radius: 15px; /* Gecko browsers */

-webkit-border-radius: 15px; /* Webkit browsers */

border-radius: 15px;

box-shadow: 2px 2px 10px #ababab;

margin: 50px auto 0;

text-align: left; /* 让新闻内容靠左 */

}

/* 头部样式 */

#moocTitle {

height: 62px;

overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */

font-size: 26px;

line-height: 62px;

padding-left: 30px;

background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType=0); /* IE*/

border: 1px solid #f05e6f;

-moz-border-radius: 8px 8px 0 0; /* Gecko browsers */

-webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */

border-radius: 8px 8px 0 0;

color: #fff;

position: relative;

}

#moocTitle a {

position: absolute;

right: 10px;

bottom: 10px;

display: inline;

color: #fff;

font-size: 12px;

line-height: 24px;

}

/* 底部样式 */

#moocBot {

width: 399px;

height: 10px;

overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */

}

/* 中间样式 */

#moocBox {

height: 144px;

width: 335px;

margin-left: 25px;

margin-top: 10px;

margin-bottom: 10px;

overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */

}

#mooc ul{

display: inline-block;

}

#mooc ul li {

height: 24px;

}

#mooc ul li a {

width: 180px;

float: left;

display: block;

overflow: hidden;

text-indent: 15px;

height: 24px;

}

#mooc ul li span {

float: right;

color: #999;

}

js：

var box = document.getElementById("moocBox");

var con1 = document.getElementById("con1");

var con2 = document.getElementById("con2");

var speed = 50;

con2.innerHTML = con1.innerHTML;

function scrollUp() {

if(box.scrollTop>=con1.scrollHeight){

box.scrollTop = 0;

}else {

box.scrollTop++;

}

}

var myScroll = setInterval("scrollUp()",speed);

box.onmouseover = function () {

clearInterval(myScroll);

};

box.onmouseout = function () {

myScroll = setInterval("scrollUp()"http://,speed);

}

效果图：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。