前端开发Jquery Hover 滑动门
摘要： 安卓开发属于前端 安卓开发转前端还是大数据 安卓前端开发入门教程 html 代码片段 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”U……
| 安卓开发属于前端 |
| 安卓开发转前端还是大数据 |
| 安卓前端开发入门教程 |
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 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
近期评论