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模块的目前的状况分析
Feb 24 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 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
星际争霸中的热键
2020/03/04 星际争霸
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
Python入门篇之正则表达式
2014/10/20 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
解读python logging模块的使用方法
2018/04/17 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
英国手机零售商:Metrofone
2019/03/18 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
英雄儿女观后感
2015/06/09 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python