| 网站首页 | 业界新闻 | 群组 | 人才 | 技术文章 | 下载频道 | 博客 | 代码贴 | 编程论坛
共有 464 人关注过本帖
标题:请问一下JQ如何给一个元素根据情况绑定多个点击事件?
只看楼主 收藏
ID不见了
Rank: 1
等 级:新手上路
帖 子:58
专家分:0
注 册:2016-5-10
结帖率:83.33%
  问题点数:0  回复次数:4   
请问一下JQ如何给一个元素根据情况绑定多个点击事件?
写了一个div,想让div第一次点击的时候向右边移动,第二次点击的时候向下移动,第三次向左移动,第四次向上移动,也就是矩形的路线,可是我的代码只能实现一轮点击,也就是执行完一个矩形的点击事件之后再点击就没反应了,求帮忙。。我想让它能循环点击事件
代码如下:
程序代码:
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>动画</title>
    <style>
    * {padding:0;margin:0;}
    #main {width:100px;height:100px;cursor:pointer;background-color:skyblue;position:relative;}
    </style>
    <script type='text/javascript' src='./jQuery/jquery-3.1.1.js'></script>
    <script>
    $(function(){
        $('#main').unbind('click').click(function(){
                $(this).animate({'left':'800px'},3000);   //向右
                $('#main').unbind('click').click(function(){
                    $(this).animate({'top':'500px'},3000);  //向下
                    $('#main').unbind('click').click(function(){
                        $(this).animate({'left':'0px'},3000);  //向左
                        $('#main').unbind('click').click(function(){
                            $(this).animate({'top':'0px'},3000);  //向上
                            })
                        })
                    })
                })   

            });
    </script>
</head>
<body>
    <div id='main'></div>
</body>
</html>

搜索更多相关主题的帖子: position  relative  cursor  style  title  
2017-01-26 11:26
ID不见了
Rank: 1
等 级:新手上路
帖 子:58
专家分:0
注 册:2016-5-10
  得分:0 
顶顶
2017-01-26 12:13
ID不见了
Rank: 1
等 级:新手上路
帖 子:58
专家分:0
注 册:2016-5-10
  得分:0 
2017-01-27 15:22
徐云飞
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2017-6-7
  得分:0 
2017-06-08 14:34
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:67
帖 子:1282
专家分:5185
注 册:2015-3-19
  得分:0 
程序代码:
  <script>
    $(function(){
        $('#main').click(function(){
            //setInterval(function(){        
                $('#main').animate({'left':'800px'}, 1000);
                $('#main').animate({'top':'500px'}, 1000);
                $('#main').animate({'left':'0px'}, 1000);
                $('#main').animate({'top':'0px'}, 1000);
           // },200);
        });
    });
    </script>


[此贴子已经被作者于2017-6-8 21:01编辑过]


新人驾到
2017-06-08 21:00









关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.134186 second(s), 8 queries.
Copyright©2004-2017, BCCN.NET, All Rights Reserved