[JS实例] 跟随鼠标移动而发生视差动画的图片
来源:互联网 发布:穿着舒服的女鞋 知乎 编辑:程序博客网 时间:2024/05/16 02:25
演示效果:http://www.jq22.com/yanshi4800
原文出自以上地址,我根据实例内的代码修改了一下。
一、构建html
实例内有5层需要移动的图片,需要使用绝对定位,并用z-index排列好层次,一定要有style=”z-index”属性。
<ul id="mousemove"> <li class="pic-zaijian" style="z-index: 3;"><img src="images/5644025cN28d8a58c.png" alt="" /></li> <li class="pic-yhao" style="z-index: 2;"><img src="images/5644025cN8cd82f47.png" alt="" /></li> <li class="pic-11y" style="z-index: 4;"><img src="images/56440ff7N8104ff46.png" alt="" /></li> <li class="pic-joy" style="z-index: 5;"><img src="images/5644369dN2177d534.png" alt="" /></li> <li class="pic-light" style="z-index: 6;"><img src="images/564409feN8fc5ae9f.png" alt="" /></li> </ul>
二、编写css样式
根据你的实际需要写好css样式,把各个图片都定好位,使用绝对定位absolute。
三、编写js代码
关键的js代码部分
<script>function ScrollBG () { //定义滚动背景容器变量 var oUl = document.getElementById('mousemove'), oLi = oUl.getElementsByTagName('li'), //获取当前窗口的尺寸并改变其中心为原点坐标,也可以改为仅获取指定层的坐标:oUl.offsetWidth x = document.body.offsetWidth/2, y = document.body.offsetHeight/2; //设置当前窗口内的鼠标移动事件,也可以改为仅作用于指定层:oUl.onmousemove document.body.onmousemove = function (event) { //获取鼠标在当前窗口内的坐标值,也可以改为获取指定层的坐标:event.offsetX var mx = event.clientX, my = event.clientY; //开始为每个要动的元素设置左边距和上边距,以每个元素的不同zIndex值来区别移动量 for (var i=0; i<oLi.length; i++) { //左边距和上边距的值可以随意调整 oLi[i].style.marginLeft=(x-mx)/90*oLi[i].style.zIndex+'px'; oLi[i].style.marginTop=(y-my)/70*oLi[i].style.zIndex+'px'; } };}</script>
0 0
- [JS实例] 跟随鼠标移动而发生视差动画的图片
- JS实现图片跟随鼠标移动
- 图片跟随鼠标移动
- 实现界面跟随鼠标移动的实例
- JavaScript实现跟随鼠标移动而移动的文字
- js 鼠标放置图片展示大图并跟随鼠标移动
- 跟随鼠标移动放大图片
- 给网页添加跟随你鼠标移动的线条动画
- 文字或图片跟随鼠标移动或键盘控制图片移动实例(javascript实现)
- Delphi实现界面跟随鼠标移动的实例
- Event—跟随鼠标移动的div实例阻止冒泡
- SlipHover – 动画遮罩层跟随鼠标移动
- js实现跟随鼠标移动的提示框
- JS特效--跟随鼠标移动的日历时钟
- 跟随鼠标一起流动的粒子动画 JS 原生代码
- 跟随鼠标移动的时钟
- 跟随鼠标移动的小球
- JS:跟随鼠标移动的图片,兼容IE与DOM浏览器(已在实际中用懂啊)
- Android 存储方式之SharedPreference SQLite ContentProvider
- Spark性能优化指南(三)(数据倾斜调优)
- MYSQL explain详解
- Android ApplicationId 与 PackageName
- ATOM基础教程一sync-settings配置(11)
- [JS实例] 跟随鼠标移动而发生视差动画的图片
- wireshark基本用法及过虑规则
- Mac版Android Studio Git 的配置以及提交到仓库
- Maven将java工程打成tar包
- 文章标题
- 样本不同特征构成的协方差矩阵
- Linux下双网卡绑定
- Linux_mount命令的使用
- 中文稿