找回密码
当前位置：前端开发者 > jQuery > 正文

前端开发jQuery+CSS3过渡效果

2018-07-02 分类：jQuery 阅读(717) 评论(0)

web前端开发百度云教程下载|前端开发html5书籍|app前端开发文档怎么写？

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
    <title>前端开发html5</title>
    <meta name=”description” content=””>
    <meta name=”keywords” content=””>
    <link href=”css/index.css” rel=”stylesheet”>
    <style type=”text/css”>
        @charset “UTF-8”;
        body {
            padding: 0;
            margin: 0;
        }
        .wrap {
            height: auto;
            width: 65%;
            margin: 100px auto;
        }
        .face {
            height: 200px;
            width: 200px;
            position: relative;
            overflow: hidden;
            float: left;
            margin: 2px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
        }
        .face .box {
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            overflow: hidden;
            top: 0;
            z-index: 9999;
            transition: all ease 0.5s;
            -moz-transition: all ease 0.5s;
            -webkit-transition: all ease 0.5s;
            -ms-transition: all ease 0.5s;
            transform: rotate3d(0, 0, 0, 0);
            -moz-transform: rotate3d(0, 0, 0, 0);
            -webkit-transform: rotate3d(0, 0, 0, 0);
            -ms-transform: rotate3d(0, 0, 0, 0);
            backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
        }
        .face .box-mask {
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(255, 0, 0, 1);
            font-family: “微软雅黑”;
            z-index: 999;
            backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            transition: all ease 0.5s;
            -moz-transition: all ease 0.5s;
            -webkit-transition: all ease 0.5s;
            -ms-transition: all ease 0.5s;
            transform: rotate3d(0, 1, 0, -180deg);
            -moz-transform: rotate3d(0, 1, 0, -180deg);
            -ms-transform: rotate3d(0, 1, 0, -180deg);
            -webkit-transform: rotate3d(0, 1, 0, -180deg);
        }
        .face .box-mask p {
            color: white;
            padding: 0;
            text-align: center;
            margin: 0;
            font-size: 30px;
            line-height: 200px;
        }
        .face .mask {
            height: 100%;
            width: 100%;
            position: absolute;
            background: rgba(0, 0, 0, 0.5);
            font-size: 30px;
            font-family: “微软雅黑”;
            text-align: center;
            line-height: 200px;
            color: white;
        }
        .face img {
            height: 100%;
            width: 100%;
        }
        .face:hover .box {
            transform: rotate3d(0, 1, 0, -180deg);
            -moz-transform: rotate3d(0, 1, 0, -180deg);
            -ms-transform: rotate3d(0, 1, 0, -180deg);
            -webkit-transform: rotate3d(0, 1, 0, -180deg);
            z-index: 999;
        }
        .face:hover .box-mask {
            transform: rotate3d(0, 0, 0, 0);
            -moz-transform: rotate3d(0, 0, 0, 0);
            -webkit-transform: rotate3d(0, 0, 0, 0);
            -ms-transform: rotate3d(0, 0, 0, 0);
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div class=”wrap”>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/41.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/40.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/39.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/38.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/37.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/36.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/35.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/34.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/33.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/32.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/31.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
        <div class=”face”>
            <div class=”box”>
                <div class=”mask”>正面背景</div>
                <img src=’http://www.zxhuan.com/wp-content/uploads/2016/02/30.jpg’>
            </div>
            <div class=’box-mask’>
                <p>背面背景</p>
            </div>
        </div>
    </div>
    <script src=”http://libs.baidu.com/jquery/1.10.2/jquery.min.js”></script>
    <script src=’js/index.js’></script>
    <script type=’text/javascript’>
        $(function () {
            $(‘.mask’).css({ “left”: “0”, “top”: “100%” });
            $(‘.face’).on(‘mouseenter’, function (event) {
                var index = $(this).index();
                var event = event || window.event,
                    seenterX = event.clientX,
                    seenterY = event.clientY;
                $(this).on(‘mouseleave’, function (event) {
                    var event = event || window.event,
                        leaveX = event.clientX,
                        leaveY = event.clientY,
                        checkX = leaveX – seenterX,
                        checkY = leaveY – seenterY;
                    checkSeenter(checkX, checkY, index);
                })
            })
            function checkSeenter(checkX, checkY, index) {
                console.log(index)
                if (checkX > 0 && Math.abs(checkX) > Math.abs(checkY)) {
                    console.log(‘左边’)
                    $(‘.face’).eq(index).find($(‘.mask’)).css({ “left”: “-100%”, “top”: “0” }).stop().animate({
                        “left”: “100%”,
                        “top”: “0%”
                    });
                } else if (checkX < 0 && Math.abs(checkX) > Math.abs(checkY)) {
                    console.log(‘右边’);
                    $(‘.face’).eq(index).find($(‘.mask’)).css({ “left”: “100%”, “top”: “0” }).stop().animate({
                        “left”: “-100%”,
                        “top”: “0%”
                    });
                } else if (checkY > 0 && Math.abs(checkX) <= Math.abs(checkY)) {
                    console.log(‘上边’)
                    $(‘.face’).eq(index).find($(‘.mask’)).css({ “left”: “0”, “top”: “-100%” }).stop().animate({
                        “top”: “100%”,
                        “left”: “0”
                    });</p >
                        <p> }else{
                            console.log(‘下边’);
                            $(‘.face’).eq(index).find($(‘.mask’)).css({“left”: “0”,”top”:”100%”}).stop().animate({
                                “top”: “-100%”,
                    “left”:”0″
                });
            }
        }
})</p>
                        <p></script>
</body>
</html>

前端开发比java简单吗？|html5前端开发国籍省份输入|关于app前端开发的参考文献

赞(0)
前端开发者 » 前端开发jQuery+CSS3过渡效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论