css3让div随鼠标移动而抖动起来

  发布时间:2014-02-10 16:13:25   作者:佚名   我要评论
一些背景图片随着鼠标的移动的反向的移动,感觉跟不错,下面为大家介绍喜爱使用css3让div随鼠标移动而抖动起来,感兴趣的朋友可以参考下
最近发现一个网站,感觉用户体验不错,特别是一些背景图片随着鼠标的移动的反向的移动,感觉跟不错,于是就试着写了个小demo模仿一下

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.layer {
width:400px;
height:400px;
background-color:#FF7373;
transa
}
.A {
position: absolute;
top: 23px;
left: 10px;
}
.B {
position: absolute;
top: 223px;
left: 516px;
}
.C {
position: absolute;
top: 384px;
left: 1000px;
}
</style>
</head>
<body>
<div class="layer A"></div>
<div class="layer B"></div>
<div class="layer C"></div>
</body>
<script type="text/javascript">
var items = document.getElementsByClassName("layer");
document.addEventListener('mousemove', function (evt){
var x = evt.clientX;
var y = evt.clientY;
//console.log(x);
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var halfWidth = winWidth / 2;
var halfHeight = winHeight / 2;
var rx = x - halfWidth;
var ry = halfHeight - y;
var length = items.length;
var max = 30;
for (var i = 0 ; i < length ; i++) {
var dx = (items[i].getBoundingClientRect().width/max)*(rx / -halfWidth);
var dy = (items[i].getBoundingClientRect().height/max)*(ry / halfHeight);
items[i].style['transform'] = items[i].style['-webkit-transform'] = 'translate('+dx+'px,'+dy+'px)';
}
}, false);
</script>
</html>

说明一下分别拿到每个div的长度和宽度,通过比例算出相对于窗口的合适的偏移量,max是每个div左右偏移最多不超过的值

效果展示

相关文章

  • css3 transform过渡抖动问题解决

    这篇文章主要介绍了css3 transform过渡抖动问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2020-10-23
  • css3动画效果抖动解决方法

    这篇文章主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-03
  • CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的
    2014-08-11
  • CSS3新浪微博模板商店鼠标悬停图片抖动特效

    一款鼠标悬停在图片上,图片摇晃抖动的CSS3特效代码
    2014-03-06
  • CSS 控制因Html页面高度导致抖动的问题解决方法

    由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的,具体解决方法如下,有类似情况的朋友可以参考下,希望对大家有所帮助
    2013-08-23
  • CSS3实现红包抖动效果

    这篇文章主要介绍了CSS3实现红包抖动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-23

最新评论