jQuery 仿iGoogle视频的列表拖动缓冲特效
2010-06-28 00:53
423 查看
查看效果
下载地址
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>
下载地址
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>
相关文章推荐
- 关于FLV视频没缓冲拖动的思路
- jQuery实现DIV层淡入淡出拖动特效的方法
- 4款基于jquery的列表图标动画切换特效
- Windows服务器环境下flv视频播放——对未缓冲进度条实现拖动
- 用Jquery UI Sortable与数据库实现div拖动(类似iGoogle)
- jquery列表拖动排列(由项目提取相当好用)
- jquery插件鼠标移上去当前列表显示图片的特效
- jQuery [jQuery视频教程--->Jq网页开发精解04] 设计列表 文字滚动 图片按比例显示
- 基于jquery创建的一个图片、视频缓冲的效果样式插件
- jquery特效:无缝向上循环滚动列表
- Minigui1.6.9 Minigui1.6.10 Minigui2.0.4 Minigui3.0.12 双缓冲 3520 3515 3510 3512 视频特效录像
- 4款基于jquery的列表图标动画切换特效
- jQuery实现输入框下拉列表树插件特效代码分享
- jquery鼠标拖动特效
- JQuery特效,拖动窗口,层
- 一个视频播放列表demo,视频播放使用的ijkplayer,正在播放视频拖动到不可见区域小窗口播放,可全屏切换
- jQuery实现DIV层淡入淡出拖动特效的方法
- 一款基于jquery的鼠标经过图片列表特效
- 一款jquery智能提示邮箱列表特效