首页 新闻 会员 周边 捐助

jQury 子级鼠标坐标

0
悬赏园豆：30 [已解决问题] 解决于 2014-08-07 15:21 
        $(function () {

            $(".mainCircleDivBig").mousemove(function (e) {
                $(".mainCircleDivBig").css({ "left": e.pageX, marginLeft: "-100px" }).css({ "top": e.pageY, marginTop: "-100px" });
            });
            $(".downLoadCircleDivBig").mousemove(function (e) {
                $(".downLoadCircleDivBig").css({ "left": e.pageX, marginLeft: "-50px" }).css({ "top": e.pageY, marginTop: "-50px" });
            });
            $(".infroCircleDivBig").mousemove(function (e) {
                $(".infroCircleDivBig").css({ "left": e.pageX, marginLeft: "-60px" }).css({ "top": e.pageY, marginTop: "-60px" });
            });
            $(".classCircleDivBig").mousemove(function (e) {
                $(".classCircleDivBig").css({ "left": e.pageX, marginLeft: "-80px" }).css({ "top": e.pageY, marginTop: "-80px" });
            });
        });

以上代码能够实现DivBig跟随鼠标在页面里面移动, 但是我想给鼠标的跟随限定范围

        $(function () {

            $(".mainCircleDivBig").mousemove(function (e) {
                $(".mainCircleDiv").css({ "left": e.pageX, marginLeft: "-100px" }).css({ "top": e.pageY, marginTop: "-100px" });
            });
            $(".downLoadCircleDivBig").mousemove(function (e) {
                $(".downLoadCircleDiv").css({ "left": e.pageX, marginLeft: "-50px" }).css({ "top": e.pageY, marginTop: "-50px" });
            });
            $(".infroCircleDivBig").mousemove(function (e) {
                $(".infroCircleDiv").css({ "left": e.pageX, marginLeft: "-60px" }).css({ "top": e.pageY, marginTop: "-60px" });
            });
            $(".classCircleDivBig").mousemove(function (e) {
                $(".classCircleDiv").css({ "left": e.pageX, marginLeft: "-80px" }).css({ "top": e.pageY, marginTop: "-80px" });
            });
        });

即在鼠标移过DivBig的时候内部的div跟随鼠标移动, 离开时停止, 这样的话就要获取鼠标在DivBig内部的坐标, 这个应该怎么获取, 求助.

HANXUEAO的主页 HANXUEAO | 初学一级 | 园豆：13
提问于：2014-08-07 14:31
< >
分享
最佳答案
0

鼠标有个坐标。DivBig有个相对于(0,0)的坐标。两个坐标做减法，就能算出鼠标在DivBig里的相对坐标了。

收获园豆：30
幻天芒 | 高人七级 |园豆：37207 | 2014-08-07 14:39

想到过这个方法

     var ace = $(".mainCircleDivBig");
            $(".mainCircleDivBig").mousemove(function (ace, e) {
                var cc = ace.pageX;
                var bb = e.pageX;

运行结果这里的CC能够得到数据 但是 bb是undefind

这个要怎么办?

HANXUEAO | 园豆：13 (初学一级) | 2014-08-07 14:48

@HANXUEAO: 你这个ace是传不下去的。mousemove事件中，只有function(mouseEvent)这样的。所以你在方法内部的ace表示的是mouseEvent，而不是你前面申明的ace。

幻天芒 | 园豆：37207 (高人七级) | 2014-08-07 15:05

@幻天芒: 那要怎样才能同时获取两个对象的坐标进行相减?

HANXUEAO | 园豆：13 (初学一级) | 2014-08-07 15:09

@幻天芒: 

问题已经解决

HANXUEAO | 园豆：13 (初学一级) | 2014-08-07 15:20

@HANXUEAO: 呵呵，嗯。

幻天芒 | 园豆：37207 (高人七级) | 2014-08-07 15:42

@幻天芒: 有空的话可不可以再帮我看下代码, 又出现了蛋疼的问题, 这是我修改后的代码

            var x1 = $('.mainCircleDivBig');
            $(".mainCircleDiv").mousemove(function (e) {
                var s1 = x1.offset().left,
                 s2 = e.pageX,
                 b1 = x1.offset().top,
                 b2 = e.pageY,
                 cutX = s2 - s1,
                 cutY = b2 - b1;
                if (cutX <= 100 || cutY <= 100||cutX >= -100 || cutY >= -100) {
                    $(".mainCircleDiv").css({ "left": cutX, marginLeft: "-100px" }).css({ "top": cutY, marginTop: "-100px" });

                }
            });

一下是效果图

mainCircleDiv还是会一直跟随鼠标, 我想让它超出限定的cutX或者是cutY后停下来应该怎么办.

HANXUEAO | 园豆：13 (初学一级) | 2014-08-07 15:52

@HANXUEAO: 在设置偏移css的地方，加入判断。我感觉你的判断条件貌似有问题样...

幻天芒 | 园豆：37207 (高人七级) | 2014-08-07 15:55

@幻天芒: 嗯, 是条件有点问题, 努力优化中...

HANXUEAO | 园豆：13 (初学一级) | 2014-08-07 15:59

@HANXUEAO: :)加油！

幻天芒 | 园豆：37207 (高人七级) | 2014-08-07 16:04

@幻天芒: 

求助: 我想让页面的元素按照从上到下排列, 当元素触及底部是自动换行到另外一列重新排列, 当元素触及边框时出现横滚动条. 我首先想到的方法就是 writing-mode, 经过试验也的确能够实现纵向排列横向滚动效果, 贴出代码

.scroll { position: absolute; width: 100%; height: 100%; writing-mode: tb-lr; -moz-column-count: 6; -webkit-column-gap: 10px; -moz-column-gap: 10px; } .boxIn { margin: 5px; padding: 0px; display: inline-block; width: 120px; height: 120px; writing-mode: lr-tb; background-color: #000; }

效果显示:

但是有几点比较烦, 一个屏幕的列数只能规定死,不能够适应不同的屏幕显得比较鸡肋,而且不可控性太大,总感觉不太方便, 而且有些浏览器也不支持. 想请教下有没有更好的解决方法或者是对这种方法的优化.

HANXUEAO | 园豆：13 (初学一级) | 2014-08-16 15:24

@HANXUEAO: 能不能用JS来计算布局呢？直接css怕是不太好实现哦~

幻天芒 | 园豆：37207 (高人七级) | 2014-08-18 22:35
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。