滚动条 几中滚动方式
自定义滚动条插件
http://www.cnblogs.com/reweb/p/3268775.html
第一种
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html>
<head>
<%@ include file="/include/meta_simple.jsp" %>
<title>武威市政务服务中心触摸屏查询机_办件公示</title>
<style type="text/css">
#wws_cu_ul{
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0px;
}
ul#wws_cu_ul li {
float: left;
border: 1px solid red;
vertical-align: inherit;
height:44px;
}
body {
background-color: #000;
color: red;
font-size: 14px;
}
</style>
<%-- <link rel="stylesheet" href="${ctx}/res/css/reset.css" type="text/css"></link>--%>
<%-- <link rel="stylesheet" href="${ctx}/res/css/wws/style.css" type="text/css"></link>--%>
<script type="text/javascript" src="${ctx}/res/plugin/jquery/jquery.query.js"></script>
</head>
<body>
<div style="width:100%;margin:0 auto;
text-align: center;
font-size: 15px;">
<table class="tablelist">
<h1 style="font-size:24px;font-weight:700;text-align:center;letter-spacing:5px;"><span>武威市</span>人民政府工作部门办件公示</h1>
<div class="div_list">
<div>
<ul id="wws_cu_ul">
<li style="width:5%;line-height: 44px;">序号</li>
<li style="width:24%;line-height: 44px;">办件编号</li>
<li style="width:30%;line-height: 44px;">项目名称</li>
<li style="width:30%;line-height: 44px;">申请人（单位）</li>
<li style="width:10%;line-height: 44px;">状态</li>
</ul>
</div>
<div class="tbodylist">
<c:forEach items="${caseList}" var="caseinfo" varStatus="s">
<ul id="wws_cu_ul">
<li style="width:5%; line-height:44px;
word-wrap: break-word;
word-break: break-all;">${s.index+1}</li>
<li style="width:24%;line-height:44px;
word-wrap: break-word;
word-break: break-all;">${caseinfo.caseno}</li>
<li style="width:30%;
word-wrap: break-word;
word-break: break-all;">${caseinfo.applicantitemname}</li>
<li style="width:30%; line-height:44px;
word-wrap: break-word;
word-break: break-all;">${caseinfo.caseapplicant}</li>
<c:if test="${caseinfo.casestatus eq '1'}">
<li style="width:10%;line-height:44px;">登记</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '2'}">
<li style="width:10%;line-height:44px;">待办</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '3'}">
<li style="width:10%;line-height:44px;">补正</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '4'}">
<li style="width:10%;line-height:44px;">已暂停</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '5'}">
<li style="width:10%;line-height:44px;">不予许可</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '6'}">
<li style="width:10%;line-height:44px;">许可</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '7'}">
<li style="width:10%;line-height:44px;">补正不来</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '8'}">
<li style="width:10%;line-height:44px;">退件</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '9'}">
<li style="width:10%;line-height:44px;">已发证</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '10'}">
<li style="width:10%;line-height:44px;">不予受理</li>
</c:if>
<c:if test="${caseinfo.casestatus eq '11'}">
<li style="width:10%;line-height:44px;">作废</li>
</c:if>
</ul>
</c:forEach>
</div>
</div>
</table>
</div>
<script type="text/javascript">
$(function(){
var _wrap=$('.tbodylist');
var _interval=4000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},
function(){
_moving=setInterval(function(){
var _field=_wrap.find('ul:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
_wrap.animate({marginTop:-_h+'px'},0,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
_wrap.css('marginTop',0);
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
</script>
</body>
</html>
第二种
<marquee style="background:#fff" direction="up" behavior="scroll" height="730" scrollamount="2" scrolldelay="80" bgcolor="#fff" onmouseout="this.start()" onmouseover="this.stop()">
</marquee>
