jq文字垂直滚动/滚屏效果
下载地址：https://github.com/ybx13579/text-verticality-scroll
直接复制文本即可查看，或点击 ↑ 地址下载查看
效果预览
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq文字垂直滚动效果title>
<meta charset="utf-8" />
<style>
.scroll_screen {
width: 800px;
height: 127px;
position: absolute;
top: 45px;
font-size: 18px;
background: #e8e8e8;
border: 1px solid #fff;
box-sizing: border-box;
padding-left: 19px;
padding-top: 34px;
}
.scroll_screen div {
height: 70px;
overflow: hidden;
}
.scroll_screen ul li {
padding-left: 30px;
line-height: 34px;
background-repeat: no-repeat;
background-position: center left;
text-shadow: #666 0px 2px 4px;
}
style>
head>
<body>
<div class="scroll_screen">
<div>
<ul>
<li>披风 - 陈奕迅li>
<li>曲 : MJ谭杰明 & Jerald 词 : 易家扬li>
<li>你以为我属于天空 我感觉你才是英雄li>
<li>每个人的命当然不同 所以要相逢li>
<li>多平凡的人也一样 很需要梦li>
<li>孤单向前走 偶尔回头看没当孩子有多久li>
<li>人不能飞于是努力走 但没人说不准看天空li>
<li>在心里缝 一张披风 假装躺在云上好轻松li>
<li>再辛苦至少可以咬咬牙 去等可能的风li>
<li>为谁腾空li>
<li>...li>
ul>
div>
div>
body>
html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">script>
<script>
//屏幕滚动
function autoScroll(obj) {
$(".scroll_screen ul").animate({
marginTop: "-34px"
}, 500, function () {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
})
}
$(function () {
if ($(".scroll_screen ul li").length > 2) {
setInterval('autoScroll(".scroll_screen")', 2000);
}
})
script>