国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > 无缝滚动

无缝滚动

来源:程序员人生   发布时间:2016-09-07 16:34:39 阅读次数:2668次
<!DOCTYPE html> <html> <head> <meta charset="utf⑻" /> <title>向上无缝转动</title> <style> body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */ } * { margin: 0px; padding: 0px; /* 去掉所有标签的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 red; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius: 15px; box-shadow: 2px 2px 10px green; margin: 50px auto 0; text-align: left; /* 让新闻内容靠左 */ } /* 头部样式 */ #moocTitle { height: 62px; overflow: hidden; /* 这个1定要加上,内容超越的部份要隐藏,免得撑高头部 */ 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 black; -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; color: blue; } /* 底部样式 */ #moocBot { width: 399px; height: 10px; overflow: hidden; /* 这个1定要加上,内容超越的部份要隐藏,免得撑高底部结构 */ } /* 中间样式 */ #moocBox { height: 144px; width: 335px; margin-left: 25px; margin-top: 10px; overflow: scroll; border: 1px solid red; /* 这个1定要加,超越的内容部份要隐藏,免得撑高中间部份 */ } #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: green; } </style> </head> <body> <div id="mooc"> <h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3> <div id="moocBox"> <ul id="con1"> <li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09⑴8</span></li> <li><a href="#">2.tab页面切换效果(案例)</a><span>2013⑴0-09</span></li> <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013⑴0⑵1</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013⑴1-01</span></li> <li><a href="#">5.分页页码制作(案例)</a><span>2013⑴1-06</span></li> <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013⑴1-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013⑴1⑴5</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013⑴1⑵2</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013⑴2-06</span></li> </ul> <ul id="con2"> </ul> </div> </div> <script type="text/javascript"> var area = document.getElementById('moocBox'); var con1 = document.getElementById('con1'); var con2 = document.getElementById('con2'); var speed = 50; area.scrollTop = 0; con2.innerHTML = con1.innerHTML; function scrollUp() { if (area.scrollTop >= con1.scrollHeight) { area.scrollTop = 0; } else { area.scrollTop++; } } var myScroll = setInterval("scrollUp()", speed); area.onmouseover = function() { clearInterval(myScroll); } area.onmouseout = function() { myScroll = setInterval("scrollUp()", speed); } </script> </body> </html>
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生