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

前端开发Jquery Hover 滑动门

2019-01-02 21:54:29 分类：jQuery 阅读(876) 评论(0)
安卓开发属于前端
安卓开发转前端还是大数据
安卓前端开发入门教程

html 代码片段

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>hoverSlideout Demo</title>
        <style>
            body,
            a {
                text-align: center;
                color: white;
                text-decoration: none;
            }
            .hover-slideout {
                display: inline-block;
                margin-top: 10%;
                width: 300px;
                height: 300px;
                background: pink;
                overflow: hidden;
                position: relative;
            }
            .smelly-cat {
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(255, 0, 0, 0.5);
                top: -100%;
                left: -100%;
            }
            h1 {
                font-size: 3em;
            }
        </style>
        <script src=”http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js”></script>
        <script type=”text/javascript”>
            $(function() {
                $(‘[hover-slideout]’).each(function() {
                    $(this).hover(
                        function(e) {
                            $(this)
                                .find(‘[smelly-cat]’)
                                .css(induction_position($(this), e))
                                .stop(true, true)
                                .animate({ left: 0, top: 0 }, 200)
                        },
                        function(e) {
                            $(this)
                                .find(‘[smelly-cat]’)
                                .stop(true, true)
                                .animate(induction_position($(this), e), 200)
                        },
                    )
                })
                //鼠标进入方向
                function induction_position(elem, e) {
                    var w = elem.width(),
                        h = elem.height(),
                        direction = 0,
                        obj = {}
                    /** 计算x和y得到一个角到elem的中心，得到相对于x和y值到div的中心 **/
                    var x =
                        (e.pageX – elem.offset().left – w / 2) *
                        (w > h ? h / w : 1)
                    var y =
                        (e.pageY – elem.offset().top – h / 2) *
                        (h > w ? w / h : 1)
                    /** 鼠标从哪里来 / 角度 和 方向出去顺时针（得出的结果是TRBL 0 1 2 3） **/
                    /**
                     * 首先计算点的角度，
                     * 再加上180度摆脱负值
                     * 90初,一得到的象限（象限，又称象限角，意思就是一个圆之四分之一等份）
                     * 加上3，做一个模（求模 求余数）4的象限转移到一个适当的顺时针 得出 TRBL 0 1 2 3（上/右/下/左）
                     */
                    direction =
                        Math.round(
                            (Math.atan2(y, x) * (180 / Math.PI) + 180) / 90 + 3,
                        ) % 4
                    switch (direction) {
                        case 0: //from top
                            obj.left = 0
                            obj.top = ‘-100%’
                            break
                        case 1: //from right
                            obj.left = ‘100%’
                            obj.top = 0
                            break
                        case 2: //from bottom
                            obj.left = 0
                            obj.top = ‘100%’
                            break
                        case 3: //from left
                            obj.left = ‘-100%’
                            obj.top = 0
                            break
                    }
                    return obj
                }
            })
        </script>
    </head>
    <body>
        <div class=”hover-slideout” hover-slideout>
            <h1>Hover me</h1>
            <div class=”smelly-cat” smelly-cat>
                <br />
                <br />
                <br />
                <h1>Smelly Cat</h1>
                <br />
                <br />
                <br />
                <br />
                <a href=”http://yuanoook.com” target=”_blank”>Yuanoook.com</a>
            </div>
        </div>
    </body>
</html>
安卓开发室前端还是后端
ios 安卓前端开发环境搭建
前端 后端 安卓开发
» 本文来自：前端开发者 » 《前端开发Jquery Hover 滑动门》
» 本文链接地址：https://www.rokub.com/7445.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论