Jquery达成自定义窗口随便的拖拽,jQuery实现DIV层淡入淡出拖动特效的法子

By admin in web前端 on 2019年7月30日

在网页上大家常常看看,当点击多少个按钮时,弹出叁个自定义窗口,况兼能够自由的拖拽,进而退换其岗位

web前端,本文实例陈诉了jQuery达成DIV层淡入淡出拖动特效的方法。分享给大家供大家参照他事他说加以考察。具体完毕格局如下:

利用jquery达成拖拽,则必供给jquery的公文了,达成步骤:

复制代码 代码如下:

1、引入jquery文件

<html>
<head>
<title>jQuery落成DIV层淡入淡出的拖动作效果果)</title>
<style type=”text/css”>
#div2
{
    position:absolute;
    width:400px;
    height:300px;
    border:1px solid #333333;
    background-color:#777788;
    text-align:center;
    line-height:400%;
    font-size:13px;
    left:80px;
    top:20px;
}
</style>
<script type=”text/javascript” language=”javascript”
src=”/images/jquery.js”></script>
<script type=”text/javascript” language=”javascript”>
var _move=false;//移动标志
var _x,_y;//鼠标离控件左上角的争辨地点
$(document).ready(function(){
    $(“#div2”).click(function(){
        //alert(“click”);//点击(松手后触发)
        }).mousedown(function(e){
        _move=true;
        _x=e.pageX-parseInt($(“#div2”).css(“left”));
        _y=e.pageY-parseInt($(“#div2”).css(“top”));
        $(“#div2”).fadeTo(20, 0.25);//点击后开头拖动并透分明示
    });
    $(document).mousemove(function(e){
        if(_move){
            var
x=e.pageX-_x;//移动时依据鼠标地方总结控件左上角的相对化地方
            var y=e.pageY-_y;
            $(“#div2”).css({top:y,left:x});//控件新岗位
        }
    }).mouseup(function(){
    _move=false;
    $(“#div2”).fadeTo(“fast”, 1);//松手鼠标后甘休活动并上涨成不透明
  });
});
</script>
</head>
<body>
<h4>看不到效果,请刷新一下本页面。</h4>
    <div
id=”div2″>协助拖拽<br>假如无法拖动,请刷新本页面</div>
</body>
</html>

2、编写js脚本

可望本文所述对大家的jQuery程序设计具备扶助。

切切实实代码:

您可能感兴趣的稿子:

  • jquery
    淡入淡出效果的差非常少完结
  • jQuery
    淡入淡出、打开收缩菜单完结代码
  • jquery达成通用版鼠标经过淡入淡出效果
  • 依靠jquery达成的文字淡入淡出效果
  • 据说jQuery完结淡入淡出效果轮播图
  • 依靠jQuery的淡入淡出可机关注换的幻灯插件
  • 依据jquery的淡入淡出选项卡效果代码
  • jquery实现带渐变淡入淡出并向右依次展开的再三再四串菜单功用实例
  • jQuery达成图片文字淡入淡出效果
  • 原生js和jQuery实现淡入淡出轮播效果
  • jQuery落成主题淡入淡出效果的法子详解

html代码:

复制代码 代码如下:

<button id=”show”>显示</button>
<div class=”win”>
<div class=”wTop”><p style=”float:right;margin:5px 5px 0px
0px;color:white” id=”hidden”>X</p></div>
<div class=”content”></div>
</div>

css样式:

复制代码 代码如下:

<style type=”text/css”>
.win{width:500px;height:600px;background:#000000;border-radius:8px;box-shadow:0px
0px 5px 10px;opacity:0.8;position:absolute;left:0;top:0;display:none}
.win .wTop{height:30px;width:100%;cursor:move}
.win
.content{height:570px;width:100%;border-radius:5px;background:white}
</style>

js脚本:

复制代码 代码如下:

<script language=”javascript” type=”text/javascript”>
$(function(){
//拖拽
dragAndDrop();
//早先化地方
initPosition();
//点击按键
clickShowBtn();
});
//拖拽
function dragAndDrop(){
var _move=false;//移动标志
var _x,_y;//鼠标离控件左上角的相对地点
$(“.wTop”).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(“.win”).css(“left”));
_y=e.pageY-parseInt($(“.win”).css(“top”));
//$(“.wTop”).fadeTo(20,0.5);//点击伊始拖动并透显明示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时鼠标地点总计控件左上角的相对地方
var y=e.pageY-_y;
$(“.win”).css({top:y,left:x});//控件新岗位
}
}).mouseup(function(){
_move=false;
//$(“.wTop”).fadeTo(“fast”,1);//松开鼠标后停止活动并苏醒成不透明
});
}
//开始化拖拽div的职分
function initPosition(){
//计算初步化地点
var itop=($(document).height()-$(“.win”).height())/2;
var ileft=($(document).width()-$(“.win”).width())/1.8;
//设置被拖拽div的职责
$(“.win”).css({top:itop,left:ileft});
}
//点击展现按键
function clickShowBtn(){
$(“#show”).click(function(){
$(“.win”).show(1000);
});

$(“#hidden”).click(function(){
$(“.win”).hide(1000);
});
}
</script>

引入的js文件

复制代码 代码如下:

<script type=”text/javascript”
src=”js/jquery-1.10.2.min.js”></script>

你只怕感兴趣的稿子:

  • JQuery
    UI的拖拽效用达成方式小结
  • 简言之的jquery拖拽排序效果落到实处代码
  • jQuery拖拽div实现思路
  • JQuery之拖拽插件达成代码
  • jquery实现轻便的拖拽效果实例包容全体主流浏览器
  • jQuery手提式无线话机浏览器中拖拽动作的劳碌性解析
  • 基于jquery的贰个拖拽到钦命区域内的功力
  • jquery
    可拖拽的窗体控件达成代码
  • Jquery拖拽并简要保存的落到实处代码
  • 依据jquery完结的鼠标拖拽成分复制并写入效果
  • jQuery拖拽插件gridster使用指南
  • jQuery 版成分拖拽原型代码
  • jQuery达成的简要拖拽成效示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有