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


Posted in HTML / CSS onFebruary 10, 2014

最近发现一个网站,感觉用户体验不错,特别是一些背景图片随着鼠标的移动的反向的移动,感觉跟不错,于是就试着写了个小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让div随鼠标移动而抖动起来

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 #HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 #HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 #HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 #HTML / CSS
css3教程之倾斜页面
Jan 27 #HTML / CSS
使用css3制作动感导航条示例
Jan 26 #HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 #HTML / CSS
You might like
php将金额数字转化为中文大写
2015/07/09 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python生成九宫格图片
2018/11/19 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Django如何使用redis作为缓存
2020/05/21 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
质检员的岗位职责
2013/11/15 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
学习决心书
2014/03/11 职场文书
商务助理求职信范文
2014/04/20 职场文书
李敖北大演讲稿
2014/05/24 职场文书
户籍证明格式
2014/09/15 职场文书
2015年采购工作总结
2015/04/10 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电