jquery的动画

小编 2026-06-14 阅读:668 评论:0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

<!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>