jquery的動畫

wensongyu發表於2013-03-26
jQuery動畫
<!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" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js" ></script>
<title>無標題文件</title>
<style>
    #panel{
        position:relative;
        width:100px;
        height:100px;
        border:1px solid #0050D0;
        background:#96e555;
        cursor:pointer;
    }
</style>
<script>

    $(function(){
        /*
        $("#panel").click(function(){
            $(this).animate({left:"+=500px",height:"200px"},3000);    
        })
        */
        $("#panel").css("opacity","0.5"); //設定透明度
        $("#panel").click(function(){
            $(this).animate({left:"500px",height:"200px",opacity:"1"},1000).animate({top:"200px",width:"200px"},3000).fateIn().hide(1000);
        
        })
        
    })
    
    
</script>
</head>

<body>
<div id="panel">
    
</div>

</body>
</html>
<!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" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js" ></script>
<title>無標題文件</title>
<script>
    $(function(){
        $("#panel").toggle(function(){
            $("#panel h5.head").slideDown().fadeOut().show(1000);    
        },
            function(){$("#panel h5.head").slideUp().fadeIn().hide(1000);
            }
        )
    })
</script>
<style>
    #panel{width:100px;height:100px;background:green;}
    h5{width:100px;height:300px;background:red;}
</style>
</head>

<body>
    <div id="panel">
        <h5 class="head"></h5>
    </div>

</body>
</html>
<!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>無標題文件</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js" ></script>
<script>
    var page=1;
    var i=4;        //每個版面四張
    $("span.next").click(function(){
        //根據當前的元素獲取到父元素
        var $parent=$(this).parents("div.v_show");
        //找到視訊內容展示區域
        var $v_show=$parent.find("div.v_content_list");
        //找到外圍的div
        var $v_content=$parent.find("div.v_content");
        var v_width=$v_content.width();
        var len=$v_show.find("li").length;
        var page_count=Math.ceil(len/i);
        
        //判斷是否處於動畫狀態
        if(!$v_show.is(":animate")){
            //判斷是否到了最後的一個版面了
            if(page=page_count){
                $v_show.animate({left:"0px"},"slow");
                page=1;
            }else{
                $v_show.animate({left:"-="+v_width},"slow");
                page++;    
            }
        }
        
        //
        $parent.find("span").eq((page-1)).addClass("current")
            .siblings().removeClass("current");
    })
</script>

</head>

<body>
<div class="v_show">
    <div class="v_caption">
        <h2 class="cartoon" title="卡通動漫">卡通動漫</h2>
        <div class="highlight_tip">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        
        <div class="change_btn">
            <span class="prev">上一頁</span>
            <span class="next">下一頁</span>
        </div>
         <em><a href="#">更多》》</a></em>
    </div>
    
    <div class="v_content">
        <ul>
            <li><a href=""><img src="" /></a></li>
            <li><a href=""><img src="" /></a></li>
            <li><a href=""><img src="" /></a></li>
            <li><a href=""><img src="" /></a></li>
        </ul>
    </div>
</div>

</body>
</html>

 


相關文章