| 分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下： 
实现代码如下： <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现目录滚动特效</title> <style> body { font-size: 12px; line-height: 24px; text-align: center; } * { margin: 0px; padding: 0px; } ul { list-style: none; } 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; -webkit-border-radius: 15px; 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; /* Firefox */ background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Saf4+, Chrome */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* IE*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); border: 1px solid ##f05e6f; /* Gecko browsers */ -moz-border-radius: 8px 8px 0 0; /* Webkit browsers */ -webkit-border-radius: 8px 8px 0 0; 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; overflow: hidden; } #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; } </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.绝对的
下载地址:
TypeScript枚举的基础知识及实例
原生JS实现拖拽照片墙 |
