妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 6220|回复: 8

妙味课堂-特效-第五课-事件-实例:跟随鼠标移动的DIV

  [复制链接]
miaov 发表于 2011-4-24 22:35:09 | 显示全部楼层 |阅读模式
今天给 JavaScript周末班 上课,讲解的内容是第五课——《事件详解》
在这一课里,提到如何获取鼠标的坐标位置:clientX、clientY,并做了一下知识点延展,这是现场做的一个实例:




>>点击查看效果
相关知识点:
事件对象
获取鼠标坐标
为每个DIV设置不同层次的透明度
让上一个DIV的坐标跟随前一个DIV的坐标,最终的DIV跟随鼠标的坐标

代码可以点击鼠标右键查看~
1.gif
回复

使用道具 举报

littledu 发表于 2011-4-25 20:57:34 | 显示全部楼层
好强大的说
回复 支持 反对

使用道具 举报

littledu 发表于 2011-4-25 20:59:02 | 显示全部楼层
好强大的          说
回复 支持 反对

使用道具 举报

修远兮 发表于 2011-4-26 13:54:04 | 显示全部楼层
firefox下不兼容???:funk:
回复 支持 反对

使用道具 举报

 楼主| miaov 发表于 2011-4-26 15:00:06 | 显示全部楼层
回复 4# 修远兮

用的是火狐4.0吧??

已经修改过了,把原来的获取事件对象的写法:var oEv=event||ev;  改成了  var oEv=ev||event;

再试试看?
回复 支持 反对

使用道具 举报

修远兮 发表于 2011-4-26 15:28:22 | 显示全部楼层
回复 5# miaov

:lol管理员v5,可以了。
回复 支持 反对

使用道具 举报

16sucai 发表于 2011-5-4 12:11:47 | 显示全部楼层
不错哈哈:lol
回复 支持 反对

使用道具 举报

雷雷 发表于 2015-12-21 19:55:29 | 显示全部楼层
里面的for循环是倒着写的,为什么正过来写就不行了呢?
document.onmousemove = function(ev){
                var odiv = document.getElementsByTagName('div');
                var i = 0;
                var oEvent = ev||event;
                odiv[0].style.left = oEvent.clientX+'px';              //获取鼠标的位置用clientX,clientY
                odiv[0].style.top = oEvent.clientY+'px';
//                for(i=1;i<odiv.length;i++){               //不能这样写;
                for(i=odiv.length-1;i>0;i--){
                    odiv[i].style.left = odiv[i-1].style.left;
                    odiv[i].style.top = odiv[i-1].style.top;
                }

            }
回复 支持 反对

使用道具 举报

beijing_beijing 发表于 2016-5-11 23:34:34 | 显示全部楼层
好玩!这个玩上去有趣。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-3-22 05:39 , Processed in 0.167158 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表