标签存档: jquery

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

jquery简单的幻灯片

作者: 日期: 2012/01/09 没有评论 | 85 views

今天做了一款基于jquery的幻灯片，虽然简单但是很实用，在这里把代码,演示地址和下载地址贴出来。
演示地址： http://www.wodeblog.com/jquery/huandengpian
代码：jquery-1.5.1.js
css样式：

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
@charset "utf-8";
/* CSS Document */
html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,field set,legend,input,button,text area,p,block quote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}field set,img{border:0;}address,caption,cite,code,den,em,strong,th,var,opt group{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,text area,select,opt group,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,text area,select{*font-size:100%;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}* html .clearfix{zoom:1;}*:first-child+html .clearfix{zoom:1;}.clear{clear:both;}:focus{outline:0;}font{font-size:12px;}


li {
    list-style-type:none;
}
.fkuangs{ width:960px; margin:auto 0; padding:0;}
.kuang {
    width:960px;
    height:auto; margin:auto 0; position:relative;
}
.hdppic {
    width:960px;
    height:330px;
    overflow:hidden;
}
.hdppic ul{
    width:9999px;
    height:330px; float:left;
    overflow:auto;position:relative; right:0;
 }
.hdppic ul li{
    width:960px;
    height:330px;
    float:left;
    background:#CCC;
    line-height:330px;
    text-align:center;
}
.hdppics {
    width:960px;
    height:80px;
    margin-top:20px;
}
.hdppics ul {
    width:960px;
    height:80px;
}
.hdppics ul li.l {
    width:180px;
    height:80px;
    float:left;
    background:#CCC;
    line-height:80px;
    text-align:center;
    filter:Alpha(opacity=60);
    opacity:0.60; cursor:pointer;
}
.hdppics ul li.r {
    width:15px;
    height:80px;
    float:left;
    background:#fff;
}

jquery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var i=0;
$(document).ready(function(){
    $(".hdppics .l").hover(function(){
        $(".hdppics .l:not(:animated)").css("opacity",1);
    });
    $(".hdppics .l").mouseout(function(){
        $(".hdppics .l:not(:animated)").css("opacity",0.60);
    });
});
    function runhdp(){
        var intval=4000;//设置渐变时间
        //影音顺序变亮
        $(".hdppics .l:eq("+i+")").css("opacity",1);
        $(".hdppics .l:gt("+i+")").css("opacity",0.60);
        $(".hdppics .l:lt("+i+")").css("opacity",0.60);
        //大图顺序出现
        var num=-i*960;
        i++;
        $(".hdppic > ul:not(:animated)").animate({"left":num+"px"},500);//可设置时间，但是不能超过intval
        //记数
        if(i==5)i=0;
        setTimeout("runhdp()",intval);
    }
runhdp();

html模板：

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
<center>
<div class="fkuangs">
  <div class="kuang">
    <div class="hdppic">
      <ul id="pickuang">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="hdppics">
      <ul id="kuangs">
        <li name='1' class="l" style="filter:Alpha(opacity=100);opacity:1;">1</li>
        <li class="r"></li>
        <li name='2' class="l">2</li>
        <li class="r"></li>
        <li name='3' class="l">3</li>
        <li class="r"></li>
        <li name='4' class="l">4</li>
        <li class="r"></li>
        <li name='5' class="l">5</li>
      </ul>
    </div>
  </div>
</div>
</center>

下载地址：www.wodeblog.com/jquery/huandengpian.zip