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 transform 属性来变换背景图的方法
May 07 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 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
PHP中MD5函数使用实例代码
2008/06/07 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
javascript实现下拉提示选择框
2015/12/29 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
jquery拖动改变div大小
2017/07/04 jQuery
vue.js实现备忘录功能的方法
2017/07/10 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python编程求质数实例代码
2018/01/31 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python tkinter和exe打包的方法
2020/02/05 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
介绍一下木马病毒的种类
2015/07/26 面试题
环境工程大学生自荐信
2013/10/21 职场文书
婚前协议书
2014/04/15 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
2014年医院工作总结
2014/11/20 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python