zoukankan      html  css  js  c++  java
  • 图片拖出边框删除

       <title></title>
        <style type="text/css">
            #mydiv{ 900px; background-color:#444;}
        img{ 200px; height:200px;}
        ul{ list-style-type:none;}
        ul li{ display:inline;}
        </style>


        <script src="js/Jquery1.7.js" type="text/javascript"></script>
        <script src="js/jquery.ui.core.js" type="text/javascript"></script>
        <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
        <script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
        <script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var startImgL = 0;
                var startImgT = 0;
                $('img').draggable({
                      
                    start: function () {
                      startImgL=$(this).offset().left;
                      startImgT = $(this).offset().top;
                    },
                    stop: function () {
                      //  $('#data').text($(this).offset().left + "," + $(this).offset().top);
                        //这里选择器要用this用不能用img因为表示是当前的那张img,如果用img则表示所有的img,切记都要用this
                        if ($(this).offset().left > 902 || $(this).offset().top > 207)
                        { $(this).remove(); }
                        else {
                            $(this).offset({
                                left: startImgL,
                                top: startImgT
                            });
                        }
                    }


                });
            })
        </script>




    </head>
    <body>
        <div id="mydiv">
            <ul>
            <li><img src="images/2.jpg" alt="2" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            </ul>
        </div>

  • 相关阅读:
    苏宁易购积分规则
    购物车的实现原理
    <mvc:annotation-driven />讲解
    c3p0、dbcp和proxool比较
    Spring的事务到底该给Dao配置还是给Service配置?
    Spring PropertyPlaceholderConfigurer占位符用法
    Spring <context:annotation-config />讲解
    DispatcherServlet讲解
    Spring3.1新特性
    Spring MVC入门
  • 原文地址:https://www.cnblogs.com/qiqiBoKe/p/3092271.html
Copyright © 2011-2022 走看看