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");
            });
        });

  • 相关阅读:
    潘石屹出售上海外滩金融中心股权 4年没新增投资
    【BZOJ4036】【洛谷3175】【HAOI2015】—按位或(FMT+期望dp)
    信托配资清理“逃生通道”隐情
    中国在移动端的营销水平已超国外
    “土豪”们的新人生模型
    苏宁的逆市“O2O进化论”
    信汇中正领导力打造“必读12篇”之路
    你是否真的需要说声“谢谢”?
    新主管如何快速上手
    雷军和黄章又掐架了 不就是“不服跑个分”嘛
  • 原文地址:https://www.cnblogs.com/zhangweixin/p/3601098.html
Copyright © 2011-2022 走看看