特效

特效一：鼠标移到图片上放大缩小动画，使用绝对定位，感觉怪怪的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            width: 70px;
            top: 50px;
            position: absolute;
        }
        img:nth-of-type(1) {
            left: 100px;
        }
        img:nth-of-type(2) {
            left: 200px;
        }
        img:nth-of-type(3) {
            left: 300px;
        }
        img:nth-of-type(4){
            left:400px;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("img").hover(function () {
                left2=$(this).css("left");
                left1=parseInt(left2)-10+"px";
                $(this).animate({"width": "90px","left":left1}, 300);
            }, function () {
                $(this).animate({"width": "70px","left":left2}, 300);
            });
        });
    </script>
</head>
<body>
<img src="t_3.png"/>
<img src="t_4.png"/>
<img src="t_3.png"/>
<img src="t_4.png"/>
</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>Jqyery+CSS折叠、合拢的多级菜单</title>

    <style type="text/css">
        *,body,ul,li,h1,h2{ margin:0; padding:0; list-style:none;}
        body{font:12px "宋体";}
        .tree_box{margin: 5px 0;width: 100px;overflow: hidden;}
        .tree_box h3,.tree_one h4,.tree_two li{cursor: pointer;}
        .tree_one,.tree_two{display: none;margin: 0 0 0 10px;overflow: hidden;}
        .tree_one li{margin: 5px 0;}
    </style>
    <script type="text/javascript" src="jquery.js"></script>
</head>

<body>
<div class="tree">
    <div class="tree_box">
        <h3>
            我是一级菜单
        </h3>
        <ul class="tree_one" style="display: block;">
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="tree_box">
        <h3>
            我是一级菜单
        </h3>
        <ul class="tree_one">
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="tree_box">
        <h3>
            我是一级菜单
        </h3>
        <ul class="tree_one">
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var h3 = $(".tree_box").find("h3");
        var tree_one = $(".tree_box").find(".tree_one");
        var h4 = $(".tree_one").find("h4");
        var tree_two = $(".tree_one").find(".tree_two");
        h3.each(function(i){
            $(this).click(function(){
                tree_one.eq(i).slideToggle();
                tree_one.eq(i).parent().siblings().find(".tree_one").slideUp();
            })
        })
        h4.each(function(i){
            $(this).click(function(){
                tree_two.eq(i).slideToggle();
                tree_two.eq(i).parent().siblings().find(".tree_two").slideUp();
            })
        })
    })
</script>
</body>
</html>

 特效三： 滚动信息

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul,li{margin:0;padding:0;}
         .update { width:405px; height:30px; }
         .wrap { width:336px; height:30px; overflow:hidden; position:relative; }
          ul { width:336px; position:absolute; top:0px; left:0; }
          li { height:30px; line-height:30px; }

    </style>
    <script src="jquery.js"></script>
    <script>
    $(function () {
        (function (){
            var oDiv = $('.update');
            var oUl = oDiv.find('ul');
            var iH = 0;
            var arrData = [
                { 'name':'萱萱', 'time':4, 'title':'那些灿间' },
                { 'name':'畅畅', 'time':5, 'title':'广东3黄疑犯' },
                { 'name':'萱萱', 'time':6, 'title':'国台办郁琦' },
                { 'name':'畅畅', 'time':7, 'title':'那些灿间' },
            ];
            var str = '';
            var oBtnUp = $('#updateUpBtn');
            var oBtnDown = $('#updateDownBtn');
            var iNow = 0;
            var timer = null;

            for ( var i=0; i<arrData.length; i++ ) {
                str += '<li>'+arrData[i].name + arrData[i].time +'分钟前写了一篇新文章：'+ arrData[i].title +'…</li>';
            }
            oUl.html( str );

            iH = oUl.find('li').height();

            oBtnUp.click(function (){doMove(-1);});
            oBtnDown.click(function (){doMove(1);});

            oDiv.hover(function (){
                clearInterval( timer );
            }, autoPlay);

            function autoPlay() {
                timer = setInterval(function () {
                    doMove(-1);
                }, 3500);
            }
            autoPlay();

            function doMove( num ) {
                iNow += num;
                if ( Math.abs(iNow) > arrData.length-1 ) {
                    iNow = 0;
                }
                if ( iNow > 0 ) {
                    iNow = -(arrData.length-1);
                }
                oUl.stop().animate({ 'top': iH*iNow }, 500);
            }
        })();
        });
    </script>
</head>
<body>
<div class="update">
    <div class="wrap">
        <ul>
         <!--   <li>萱萱5分钟前 写了一篇新文章：那些灿烂华美的瞬间…</li>-->
        </ul>
    </div>
    <button type="button" id="updateUpBtn">up</button>
    <button type="button" id="updateDownBtn">down</button>
</div>
</body>
</html>

 

posted @ 2016-05-05 15:58  gyz418  阅读(206)  评论(0)    收藏  举报