jQuery 仿iGoogle视频的列表拖动缓冲特效
前台部分代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scroll</title>
<style type="text/css">
*{margin:0;padding:0}
body{
font-size:12px;
}
h1,#wrap{
width: 300px;
margin: 0 auto;
padding:30px;
}
#scroll {
width: 300px;
height: 400px;
overflow: auto;
display:block;
border:1px solid #ccc;
margin: 30px auto;
}
#scroll li {
display:block;
border:1px solid #ccc;
background: #EBCFFF;
color:#333;
padding: 10px;
}
#scroll li.alt {
color:#333;
background:#D9CFFF;
}
</style>
</head>
<body>
<h1>7,最终效果</h1>
<ul id="scroll" >
<li>列表数据1</li>
<li class="alt">列表数据2</li>
<li>列表数据3</li>
<li class="alt">列表数据4</li>
<li>列表数据5</li>
<li class="alt">列表数据6</li>
<li>列表数据7</li>
<li class="alt">列表数据8</li>
<li>列表数据9</li>
<li class="alt">列表数据10</li>
<li>列表数据11</li>
<li class="alt">列表数据12</li>
<li>列表数据13</li>
<li class="alt">列表数据14</li>
<li>列表数据15</li>
<li class="alt">列表数据16</li>
<li>列表数据17</li>
<li class="alt">列表数据18</li>
<li>列表数据19</li>
<li class="alt">列表数据20</li>
<li>列表数据21</li>
<li class="alt">列表数据22</li>
<li>列表数据23</li>
<li class="alt">列表数据24</li>
<li>列表数据25</li>
<li class="alt">列表数据26</li>
<li>列表数据27</li>
<li class="alt">列表数据28</li>
<li>列表数据29</li>
<li class="alt">列表数据30</li>
<li>列表数据31</li>
<li class="alt">列表数据32</li>
<li>列表数据33</li>
<li class="alt">列表数据34</li>
<li>列表数据35</li>
<li class="alt">列表数据36</li>
<li>列表数据37</li>
<li class="alt">列表数据38</li>
<li>列表数据39</li>
<li class="alt">列表数据40</li>
</ul>
<div id="wrap">
把滚动条去掉，把overflow:auto -- > overflow:hidden;即可达到效果， 但直接改css这个并不太好。为什么？当用户禁用javascript的时，那么截断的部分将无法显示。所以我们仍保持css中的overflow为 auto，通过js来重新设置overflow为 hidden；当用户启用js的时候，才设置为hidden。禁用js的时候，那么列表将会出现默认的滚动条，保证了可用性。<br/>
</div>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $this = $("#scroll");
var start_hand = "url(start_hand.cur),pointer";
var end_hand = "url(end_hand.cur),pointer";
var y = 0;
$this
.css({"cursor":start_hand , overflow: "hidden"})
.mousedown(startDrag)
.mouseup(endDrag)
.mouseleave(endDrag);
function startDrag(e){
$this.css("cursor", end_hand)
.stop(true, false)
.mousemove(moveDrag);
y = e.pageY;
return false;
}
function moveDrag(e){
var pos_y = e.pageY - y;
$this.animate({scrollTop : "-="+pos_y},20);
y = e.pageY;
return true;
}
function endDrag(e){
$this
.css("cursor", start_hand)
.unbind("mousemove",moveDrag);
return true;
}
});
</script>
</body>
</html>
2320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
