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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
php验证码生成器
2017/05/24 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
详解VUE 数组更新
2017/12/16 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
基于python实现学生管理系统
2018/10/17 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python如何输出百分比
2020/07/31 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
护理见习报告范文
2014/11/03 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Python数据类型最全知识总结
2021/05/31 Python
vue实现在data里引入相对路径
2022/06/05 Vue.js