标签存档: 滑动

jquery 元素向左滑动

作者: 日期: 2012/01/10 没有评论 | 51 views

前几天做了一款基于jquery的滑动特效，也是简单实用，在这里把代码,演示地址和下载地址贴出来。
演示地址：http://www.wodeblog.com/jquery/huadong/
代码：
jquery-1.5.1.js和下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>左右滑动特效</title>
</head>
<style>
.kuang {
    width:750px;
    height:60px;
    padding:5px 0;
    border:1px solid #000;
    margin-top:200px;
    position: relative;
}
.fkuang {
    width:9999px;
    overflow:auto;
    height:60px;
    position:relative;
}
.sunkuang {
    width:150px;
    height:60px;
    position:relative;
    background:#999;
    float:left;
    text-align:center;
    line-height:60px;
    cursor:pointer;
    filter:Alpha(opacity=80);
    opacity:0.80;
}
.sunspan2{ width:10px; height:60px; float:left; background:#fff;}
.sunspan1{ width:140px; height:60px; float:left; border:none;}
</style>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
var i = 0;
function scrollpic(){
    i++;
    var $wrapper = $('.kuang').css('overflow', 'hidden'),
        $items = $('.kuang .sunkuang'),
        singleWidth = $items.filter("div:first").outerWidth(), //find是对它的子集操作，filter是对自身集合元素筛选,:first寻找第一个元素
        innersWidth = $wrapper.innerWidth(),//innerWidth() 返回第一个匹配元素的内部宽度（不包含边框）,outerWidth()返回第一个匹配元素的外部宽度值 (包括边框)
        visible = Math.ceil(innersWidth / singleWidth);
        page = Math.ceil($items.length / visible);
        if(i==1){
            xnum = visible-$items.length % visible;
            tnum = $items.length;
           
        }
        if (($items.length % visible) != 0&&i==1) {
            $items.filter(':last').after($items.slice(0, tnum).clone());
            $items = $('.kuang .sunkuang');
        }
    var twidth=parseInt(tnum*singleWidth);
    var x=$("#kuangs").position().left;
    var y=parseInt(Math.abs(x));
    if(y==twidth){
        $("#kuangs").css("left",0);
    }
    $("#kuangs:not(:animated)").animate({left:"-=150px"}, "500");  
    setTimeout("scrollpic()",1000);
}
</script>
<body onLoad="scrollpic()">
<center>
  <div class="kuang">
    <div class="fkuang" id="kuangs">
      <div class="sunkuang"><span class="sunspan1">1</span><span class="sunspan2"></span></div>
      <div class="sunkuang"><span class="sunspan1">2</span><span class="sunspan2"></span></div>
      <div class="sunkuang"><span class="sunspan1">3</span><span class="sunspan2"></span></div>
      <div class="sunkuang"><span class="sunspan1">4</span><span class="sunspan2"></span></div>
      <div class="sunkuang"><span class="sunspan1">5</span><span class="sunspan2"></span></div>
      <div class="sunkuang"><span class="sunspan1">6</span><span class="sunspan2"></span></div>
    </div>
  </div>
</center>
</body>
</html>

下载地址：http://www.wodeblog.com/jquery/huadong.zip