您的位置：首页 > 其它

跟随鼠标移动展示内容

2016-10-10 15:28 441 查看

<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>跟随鼠标移动展示内容</title>
<style>
* {
padding: 0;
margin: 0;
font-family: 'microsoft yahei';
}
#wrapper {
width: 300px;
height: 300px;
margin: 20px auto 0 auto;
position: relative;
}
#box {
width: 300px;
height: 300px;
background: pink;
}
span {
background: red;
color: #ffffff;
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100px;
height: 21px;
}
p {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
margin: auto;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>

<div id="wrapper">
<div id="box"></div>
<span id="span">span</span>
</div>

<p>©由选择QQ空间皮肤和日本论坛网站联想出来的demo</p>

<script>
var wrapper = document.getElementById('wrapper');
var box = document.getElementById('box');
var spani = document.getElementById('span');
var screenAvailWidth = screen.availWidth;
var boxWidth = box.offsetWidth;
var boxLeft = (screenAvailWidth / 2) - (boxWidth / 2);
var boxTop = wrapper.offsetTop;
var spaniLeft = 0;
var spaniTop = 0;

box.addEventListener('mousemove', function (event) {
//console.log(event);
spaniLeft = event.clientX - boxLeft;
spaniTop = event.clientY - boxTop;

spani.style.left = spaniLeft + 'px';
spani.style.top = spaniTop + 'px';

//console.log(spaniLeft);

if(spaniLeft > 10) {
spani.style.left = spaniLeft + 10 + 'px';
}else if(spaniTop > 10) {
spani.style.top = spaniTop + 10 + 'px';
}

// 横向超出
if(spani.offsetLeft > (box.offsetLeft + boxWidth)) {
//console.log('横向超出');
spani.style.left = boxWidth - spani.offsetWidth - 1 + 'px';
}

//console.log(spani.offsetTop);

// 纵向超出
if(spani.offsetTop > (box.offsetHeight - spani.offsetHeight)) {
//console.log('纵向超出');
spani.style.top = box.offsetHeight - spani.offsetHeight - 1 + 'px';
}

}, false);

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航