zoukankan      html  css  js  c++  java
  • 鼠标移动层

        .box
            {
                position: fixed;
                top: 180px;
                right: 300px;
                230px;
                height: 600px;
                background: #EEE;
                cursor: move;
            }

        <div id="drag" class="box">
                <div id="carbonads-container">
                    <div class="carbonad">
                        <div id="azcarbon">
                        </div>
                        <table width="185px" style="float:left">
                            <tr>
                                <td style="padding-left: 10px;">
                                    题号
                                </td>
                                <td style="padding-left: 20px;">
                                    选项
                                </td>
                               
                            </tr>
                            <%for (int i = 1; i <= 20; i++)
                              { %>
                            <tr>
                                <td style="padding-left: 10px;">
                                    <%=i %>
                                </td>
                                <td style="padding-left: 20px;">
                                    <input type="radio" name="radioTopic<%=i %>" value="A" value1="<%=i %>" />A<input
                                        type="radio" name="radioTopic<%=i %>" value="B" value1="<%=i %>" />B<input type="radio"
                                            name="radioTopic<%=i %>" value="C" value1="<%=i %>" />C<input type="radio" name="radioTopic<%=i %>"
                                                value="D" value1="<%=i %>" />D
                                </td>
                         
                            </tr>
                            <%} %>
                            <tr>
                                <td colspan="2" height="10xp;">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align: center;">
                                    <input style=" 130px" type="button" id="imgtijiao" value="提  交" /><br />
                                 
                                </td>
                            </tr>
                        </table>
                          <div style="40; float:right"><input style="30px;height:200px; cursor:pointer" type="button" id="bt1" value="按&#13;&#10;住&#13;&#10;我&#13;&#10;拖&#13;&#10;动&#13;&#10;框" /></div>
                    </div>
                </div>
            </div>

      $(document).ready(function (e) {
            $("#bt1").mousedown(function (e) {
                iDiffX = e.pageX - $(".box").offset().left;
                iDiffY = e.pageY - $(".box").offset().top;
                $(document).mousemove(function (e) {
                    $(".box").css({ "left": (e.pageX - iDiffX), "top": (e.pageY - iDiffY) });
                });
            });
            $("#bt1").mouseup(function () {
                $(document).unbind("mousemove");
            });
        });

  • 相关阅读:
    面试题:最小的K个数
    面试题:反转链表
    面试题:二进制中1的个数
    数据结构之二叉树
    Serializable-源码分析
    归并、希尔、快速排序
    栈与队列
    简单排序(冒泡、选择、插入)
    Shiro 框架认证和授权
    mybatis select查询使用返回结果为resultMap
  • 原文地址:https://www.cnblogs.com/zhangweixin/p/3601098.html
Copyright © 2011-2022 走看看