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的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
php创建类并调用的实例方法
2019/09/25 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
面包屑导航详解
2017/12/07 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Python中文编码那些事
2014/06/25 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
出纳会计岗位职责
2014/03/12 职场文书
讲座主持词
2014/03/20 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
辞职申请书范本
2019/05/20 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL