首页 > 其他 > 详细

每日案例1

时间:2014-08-21 05:14:54      阅读:403      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>CSS3动画——抖动导航</title>
    <style type="text/css">
    *{padding: 0;margin: 0;}
    body{font-size: 12px;font-family: "宋体",Arial;color: #333;}
    ul{list-style: none;}
    a{color: #333;text-decoration: none;}
    a:hover{text-decoration: underline;}
    .clearFix{*zoom:1;}
    .clearFix:after{clear: both;display: block;content: ‘‘;height: 0;overflow: hidden;}
    .navMenu{padding: 0 10px;height: 38px;line-height: 38px;background: #f6f6f6;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
    .navMenu li{float: left;font-family: "微软雅黑";font-size: 14px;font-weight: bold;}
    .navMenu li a{display: inline-block;padding: 0 20px;}
    .navMenu li a:hover{color: #f60;text-decoration: none;-webkit-animation:swing .8s ease .2s normal;-moz-animation:swing .8s ease .2s normal;-o-animation:swing .8s ease .2s normal;}
    @-webkit-keyframes swing{
        0%,20%,40%,60%,80%,100%{-webkit-transform-origin:top center;}
        20%{-webkit-transform:rotate(15deg)}
        40%{-webkit-transform:rotate(-10deg)}
        60%{-webkit-transform:rotate(5deg)}
        80%{-webkit-transform:rotate(-5deg)}
        0%,100%{-webkit-transform:rotate(0deg)}
    }
    @-moz-keyframes swing{
        0%,20%,40%,60%,80%,100%{-moz-transform-origin:top center;}
        20%{-moz-transform:rotate(15deg)}
        40%{-moz-transform:rotate(-10deg)}
        60%{-moz-transform:rotate(5deg)}
        80%{-moz-transform:rotate(-5deg)}
        0%,100%{-moz-transform:rotate(0deg)}
    }
    @-o-keyframes swing{
        0%,20%,40%,60%,80%,100%{-o-transform-origin:top center;}
        20%{-o-transform:rotate(15deg)}
        40%{-o-transform:rotate(-10deg)}
        60%{-o-transform:rotate(5deg)}
        80%{-o-transform:rotate(-5deg)}
        0%,100%{-o-transform:rotate(0deg)}
    }
    </style>
</head>
<body>
    <ul class=‘navMenu clearFix‘>
        <li><a href="#">导航菜单1</a></li>
        <li><a href="#">导航菜单2</a></li>
        <li><a href="#">导航菜单3</a></li>
        <li><a href="#">导航菜单4</a></li>
        <li><a href="#">导航菜单5</a></li>
        <li><a href="#">导航菜单6</a></li>
        <li><a href="#">导航菜单7</a></li>
        <li><a href="#">导航菜单8</a></li>
</body>
</html>

*zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例,但这里
overflow:hidden;和_zoom:1;是连起来用的,作用是清除border内部浮动,一般要在浮动元素的父元素加上overflow:auto;zoom:1; 。这样,子元素浮动,父元素再也不会不自动跟子元素扩大了

bubuko.com,布布扣

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv=‘Content-Type‘ content=‘text/html;charset=utf-8‘/>
    <title>jQuery实现分页</title>
    <script type="text/javascript" src=‘http://www.liwai.com/js/js/jquery-1.7.1.min.js‘></script>
    <script type="text/javascript">
    _jsonData=[];    //创建JSON
    $(function(){
        for(var i=0;i<200;i++){
            _jsonData.push({name:‘前端‘+(i+1),pwd:‘123456abc‘+(i+1),age:(i+1)});
        }
        pageTotal.getDate(1,1);
    });
    var pageTotal={
        current:1,    //当前页
        pageCount:8,    //每页显示的数据量
        count:0,    //总数据量
        total:0,    //总共的页数
        first:1,    //页首
        last:0,    //页尾
        pre:0,    //上一页
        next:0,    //下一页
        getPages:function(){    //第一页和最后一页处理的逻辑
            pageTotal.total=Math.ceil(pageTotal.count/pageTotal.pageCount);
            pageTotal.last=pageTotal.total;
            pageTotal.pre=pageTotal.current-1<=0? 1:(pageTotal.current-1);
            pageTotal.next=pageTotal.current+1>pageTotal.total? pageTotal.total:(pageTotal.current+1);
        },
        getDate:function(pageno,type){
            $(‘#content table tr:gt(0)‘).remove();    //$(":gt(index)")从 0 开始取 index 值高于指定数的元素
            if(pageno==null){
                pageno=1;
            }
            pageTotal.current=pageno;
            pageTotal.count=_jsonData.length;    //取当前页的数据
            pageTotal.pageCount=8;
            for(var i=(pageno-1)*pageTotal.pageCount;i<((pageTotal.current)*(pageTotal.pageCount));i++){
                $("#content").find("table").append("<tr><td>"+_jsonData[i]["name"]+"</td><td>"+_jsonData[i]["pwd"]+"</td><td>"+_jsonData[i]["age"]+"</td></tr>")
            }
            pageTotal.page(type);

        },
        page:function(type){
            $("#pages").empty();
            pageTotal.getPages();
            if(type==1){
                var x=6;
                $("#pages").append(pageTotal.current+"/"+pageTotal.total+"&nbsp;&nbsp;&nbsp;<a href=‘javascript:pageTotal.getDate(1,"+type+");‘>首页</a>&nbsp;&nbsp;&nbsp;")    //首页
                var index=pageTotal.current<=Math.ceil(x/2)?1:(pageTotal.current-Math.ceil(x/2)+1)>=pageTotal.total-x?pageTotal.total-x:(pageTotal.current-Math.ceil(x/2)+1);
                var end=pageTotal.current<=Math.ceil(x/2)?(x+1):(pageTotal.current+Math.ceil(x/2))>=pageTotal.total?pageTotal.total: (pageTotal.current+Math.ceil(x/2));
                for(var i=index; i <= end ; i++){    //创建分页页数
                    if(i == pageTotal.current){
                        $("#pages").append("<a href=‘javascript:pageTotal.getDate("+pageTotal.current+","+type+");‘ style=‘color:red‘>"+i+"</a>&nbsp;&nbsp;&nbsp;&nbsp;");
                    }else{
                        $("#pages").append("<a href=‘javascript:pageTotal.getDate("+i+","+type+");‘>"+i+"</a>&nbsp;&nbsp;&nbsp;&nbsp;");
                    }
                }
                if (end != pageTotal.total) {
                    $("#pages").append("<span>...</span>&nbsp;&nbsp;");
                };
                $("#pages").append("<a href=‘javascript:pageTotal.getDate("+pageTotal.last+","+type+");‘>尾页</a>");    //页尾
            }
        }
    }
    </script>
</head>
<body>
    <h1>分页</h1>
    <div id="content">
        <table width="800">
            <tr>
                <td width="15%">姓名</td>
                <td width="15%">密匙</td>
                <td width="15%">年龄</td>
            </tr>
        </table>
    </div>
    <div id="pages"></div>
</body>
</html>

bubuko.com,布布扣

每日案例1,布布扣,bubuko.com

每日案例1

原文:http://www.cnblogs.com/sdgjytu/p/3923174.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!