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的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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微信公众平台开发(一) 配置接口
2016/12/06 PHP
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
pandas如何处理缺失值
2019/07/31 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
《荷花》教学反思
2014/04/16 职场文书
《雪儿》教学反思
2014/04/17 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers