互联网4A标准

我们一直走在国际的前沿,追求与研究从未停止

速成网站
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

javascript基础知识
jquery判断鼠标进入元素的位置(上下左右)

<title>判断鼠标进入元素的位置(上下左右)-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
 * {
margin:0;
padding:0;
}
body {
height:1500px;
}
.box {
margin:20px 20px;
}
.out {
width:200px;
height:200px;
border:1px solid saddlebrown;
float:left;
overflow:hidden;
}
.in {
width:200px;
height:200px;
background:palevioletred;
transform-origin:0 0;
transform:rotate(90deg);
}
</style>
</head>
<body>
<div class="box">
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
</div>
<div class="box">
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
</div>
<div class="box">
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
</div>
<div class="box">
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
    <div class="out">
        <div class="in"></div>
    </div>
</div>

<script>
var leftTop = Math.atan2(1, -1);
var rightTop = Math.atan2(1, 1);
var rightBottom = Math.atan2(-1, 1);
var leftBottom = Math.atan2(-1, -1);
var pi = Math.atan2(0, -1);
$('.out').mouseenter(function(e) {
    clearInterval(timer);
    var x = e.pageX - ($(this).offset().left + (parseFloat($(this).css('width'), 10) / 2));
    var y = $(this).offset().top + (parseFloat($(this).css('height'), 10) / 2) - e.pageY;
    var now = Math.atan2(y, x);
    var timer;
    if (now >= rightTop && now < leftTop) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left top',
            'transform': 'rotate(-90deg)',
        })
        i = -90;
        var that = this
        timer = setInterval(function() {
            i += 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从上进入')
    } else if (now >= 0 && now < rightTop || now >= rightBottom && now < 0) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'right bottom',
            'transform': 'rotate(90deg)',
        })
        i = 90;
        var that = this
        timer = setInterval(function() {
            i -= 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从右进入')
    } else if (now >= leftBottom && now < rightBottom) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left bottom',
            'transform': 'rotate(90deg)',
        })
        i = 90;
        var that = this
        timer = setInterval(function() {
            i -= 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从下进入')
    } else {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left bottom',
            'transform': 'rotate(-90deg)',
        })
        i = -90;
        var that = this
        timer = setInterval(function() {
            i += 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 0) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从左进入')
    }
})


$('.out').mouseleave(function(e) {
    clearInterval(timer);
    var x = e.pageX - ($(this).offset().left + (parseFloat($(this).css('width'), 10) / 2));
    var y = $(this).offset().top + (parseFloat($(this).css('height'), 10) / 2) - e.pageY;
    var now = Math.atan2(y, x);
    var timer;
    if (now >= leftBottom && now < rightBottom) {
        //console.log('从下出去')
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left bottom',
            'transform': 'rotate(0deg)',
        })
        i = 0;
        var that = this
        var timer = setInterval(function() {
            i += 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 90) {
                clearInterval(timer);
            }
        }, 1)
    } else if (now >= 0 && now < rightTop || now >= rightBottom && now < 0) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'right bottom',
            'transform': 'rotate(0deg)',
        })
        i = 0;
        var that = this
        var timer = setInterval(function() {
            i += 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == 90) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从右出去')
    } else if (now >= rightTop && now < leftTop) {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left top',
            'transform': 'rotate(0deg)',
        })
        i = 0;
        var that = this
        var timer = setInterval(function() {
            i -= 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == -90) {
                clearInterval(timer);
            }
        }, 1)
        //console.log('从上出去')
    } else {
        var i = 0;
        $(this).children('.in').css({
            'transform-origin': 'left bottom',
            'transform': 'rotate(0deg)',
        })
        i = 0;
        var that = this
        var timer = setInterval(function() {
            i -= 2;
            $(that).children('.in').css('transform', 'rotate(' + i + 'deg)');
            if (i == -90) {
                clearInterval(timer);
            }
        }, 1)
    }
})
</script>

想了解更多,请访问齐创互联,点击东莞网站建设查看,需要网站建设,网站制作,浏览网站模板快速建站
点击在线客服联系,联系电话:15811653920 联系人: 丁生.

建站龙头,低价保证,贴心服务

权威认证建站龙头企业,合理定价,实现与客户的长期合作,30万家企业级用户优选!