jqueryはドラッグ可能なポップアップレイヤの特効を実現
3133 ワード
機能は簡単ですが、非常に実用的で、コードはもっと簡潔で、ここではくだらないことはありません.
ソース:
ソース:
<br/> <style type="text/css">
<br> *
<br> {
<br> margin: 0px;
<br> padding: 0px;
<br> }
<br> .dragBox
<br> {
<br> width: 400px;
<br> height: 200px;
<br> position: absolute;
<br> top: 40%;
<br> left: 40%;
<br> background: #e8e8e8;
<br> z-index: 8001;
<br> }
<br> .dragBox > div
<br> {
<br> height: 30px;
<br> cursor: move;
<br> background: #00ff21;
<br> position: relative;
<br> }
<p></p>
<p>.ui-mask<br> {<br> width: 100%;<br> height: 100%;<br> background: #000;<br> position: absolute;<br> top: 0px;<br> z-index: 8000;<br> opacity: 0.4;<br> filter: Alpha(opacity=40);<br> }<br> </style><br/> <script src="framework/base/jquery-1.8.3.min.js"/><br/> <script type="text/javascript"/><br/> <script type="text/javascript"><br> $(function () {<br> var mouseOffx = 0;<br> var mouseOffy = 0;<br> var isDrag = false;<br> $(".dragBox div:eq(0)").unbind(".click").on("mousedown", function (ev) {<br> mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left;<br> mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top;<br> isDrag = true;<br> })<br> $(document).unbind(".click").on("mousemove", function (ev) {<br> var mourseX = ev.clientX, mourseY = ev.clientY;<br> var moveX = 0, moveY = 0;<br> if (isDrag === true) {<br> moveX = mourseX - mouseOffx;<br> moveY = mourseY - mouseOffy;<br> var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false);<br> var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false);<br> moveX = Math.min(maxX, Math.max(0, moveX));<br> moveY = Math.min(maxY, Math.max(0, moveY));<br> $(".dragBox").css({ "left": moveX, "top": moveY });<br> }<br> });<br> $(document).unbind(".click").on("mouseup", function () {<br> isDrag = false;<br> });<br> });<br> </script><br/> <br/> <br/> test <br/> <div class="ui-mask" id="mask" onselectstart="return false"/><br/> <div class="dragBox"><br/> <div><br/> </div><br/> </div><br/> <br/> <br/>
</code></pre>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>