...div可以上下拖动的效果,请给个详细的JQ和HTML代码,谢谢了_百度...
发布网友
发布时间:2小时前
我来回答
共3个回答
热心网友
时间:43分钟前
网上有插件,我这也有案例代码,要是贴上来就太多了,我以前写了个放windows窗口的效果,你可以参考一下,代码如下,全部复制出去,修改下jquery库的路劲就可以测试:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//定义各个DOM元素及按钮,obj是整个窗口,objcurs窗口的导航,guan是窗口关闭按钮,xiao是缩小到任务栏按钮,max是最大化窗口按钮
var obj=$('.id'),objcur=$('.nav'),guan=$('.guan'),xiao=$('.xiao'),max=$('.max');
//定义所有变量,tuo为鼠标是否在导航上按下
var tuo=false;
//记录窗口最小最大前的位置及宽高
var lefts,tops,widths,heights;
//这里获取窗口元素的宽高,用于窗口最小最大后还原窗口,但是是有错的,因为窗口在真正的项目中是可以拉大拉小的,而我这里没有开发此功能
widths=obj.width();
heights=obj.height();
var X,Y;
objcur.mousedown(function(e){
X=e.pageX-obj.offset().left;
Y=e.pageY-obj.offset().top;
tuo=true;
})
$(document).mousemove(function(e){
//如果当前窗口为100%则不允许拖动
if(obj.width() == $(document).width()){
tuo=false;
}
if(tuo){
obj.css({
left:e.pageX-X,
top:e.pageY-Y
})
lefts=obj.offset().left;
tops=obj.offset().top;
}
}).mouseup(function(){
tuo=false;
})
//窗口最大化
var shu=0;
//双击导航框缩放窗口
objcur.dblclick(function(){
max.click();
})
//单击缩放按钮缩放窗口
max.click(function(){
if(shu == 0){
obj.animate({
width:'100%',
height:'100%',
left:'0px',
top:'0px'
},200);
shu = 1;
}else if(shu ==1){
obj.animate({
width:widths,
height:heights,
left:lefts,
top:tops
},200);
shu = 0;
}
})
//关闭窗口,也就删除了DOM元素
guan.click(function(){
obj.remove();
})
//缩小到任务栏
var xiaos=1;
xiao.click(function(){
if(xiaos == 1){
var s=$(document).height();//此处获取浏览器可视窗口的高度,也存在问题,当我们的窗口拉到浏览器上或下可视窗口外的时候,那么浏览器可视窗口的高度也被增大了,所以当我们的窗口拉到浏览器可视窗口上或下的外面的时候,我们缩小窗口到任务栏的话就将看不到缩小后的窗口,最简单的办法就是把此变量设置成全局变量,当页面加载的时候此变量就初始化了就不会被窗口拉出的时候增大
obj.animate({
left:'0px',
top:s-24,
width:'150px',
height:'24px'
},200);
xiaos =0;
}else if(xiaos == 0){
obj.animate({
width:widths,
height:heights,
left:lefts,
top:tops
},200);
xiaos =1;
}
})
});
</script>
<style type="text/css">
html,body{width:100%;height:100%;font-size:12px;overflow:hidden;margin:0px;padding:0px;position:relative;}
.id{width:300px;height:200px;background:red;overflow:hidden;position:absolute;left:0px;top:0px;}
.id p{background:green;cursor:pointer;color:#fff;margin:0px;height:24px;line-height:24px;}
.id p span{float:right;margin-right:5px;background:blue;}
</style>
</head>
<body>
<div class="id">
<p class="nav">按下我才能拖拽
<span class="guan">X</span>
<span class="max">口</span>
<span class="xiao">--</span>
</p>
</div>
</body>
</html>
热心网友
时间:43分钟前
这个效果可以去站长素材里找找,很多
热心网友
时间:48分钟前
用JQuery UI
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动(Draggable) - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em;cursor:move}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>请拖动我!</p>
</div>
</body>
</html>
想用JQ实现一个按住一个图标,div可以上下拖动的效果,请给个详细的JQ和...
网上有插件,我这也有案例代码,要是贴上来就太多了,我以前写了个放windows窗口的效果,你可以参考一下,代码如下,全部复制出去,修改下jquery库的路劲就可以测试:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...
求一段JQ的代码,需求是这样的:一个div的高度为浏览器窗口高度,有上下pad...
doctype html><html><head><meta charset="UTF-8"><title>demo</title><style type="text/css">div{border:solid 1px red;margin:20px;}</style></head><body><div></div><script type="text/javascript" src="http://换成你的jQuery地址/jquery-1.10.2.min.js"></script><script ...
把图片拖动到DIV层里面的JS或JQ谁会啊?图片是固定不动的,相当于复制一...
drop: function (event, ui) { (this).html($(ui.helper).clone(true));(ui.helper).remove();} });});</script> <body> <img class="clsDraggable" src="C:\Users\Public\Documents\Thunder Network\Thunder\Profiles\pluginpanel\cacheicon\TabNewsAddinIcon.png"> <div class="clsDropp...
html marquee标签 怎么让图片水平和垂直滚动
<!--下面是向上滚动代码--><div id=butong_net_top style=overflow:hidden;height:100;width:90;> <div id=butong_net_top1> <img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <img src="插入需要滚...
求一段JQ代码,让一个div的大小和浏览器的高度保持一致
(function(){ /*获取body高度,将值赋予div元素*/ var clientHeight = $("body")[0].clientHeight;("div元素名称").height(clientHeight )})
如何用jq获取一个div内部所有input[type='text']的值
用jq获取一个div内部所有input[type='text']的值,代码如下:<div id="divid"> <div><input type="hidden" value="456"></div> </div> <script type="text/javascript"> ("#divid input[type=hidden]").each(function () { console.log(this.value);})</script> ...
jq怎么写出图片滚动效果jq实现图片滚动效果
//点击菜单项时(上下箭头切换)//使缩略图的div层显示并隐藏当前 //打开菜单(如果有)list.find(.st_arrow_down点击,函数(){ 定义变量 这个 = (这个);hidethumbs();this.addclass(st_arrow_upst_arrow_down 定义变量 elem = this.closest(李);elem.addclass(当前).动画({身高:170像素},...
如何实现当鼠标移到某个DIV上,该DIV自动放大120%,移开自动缩回100%...
在div元素上添加监听事件,当mouseenter事件发生时,然后通过js或者使用jquery插件来获取div的样式,然后修改,比如$("你的元素id").css("height",120%),宽度同理;然后离开的时候同样出发mouseleave或者mouseout,具体哪个忘了。总之大致的思路就是这样。望采纳 ...
根据规范,a 标签可以包含 div 吗?也就是说写在 div 的外面.
block 也就是块呈现的,用线状元素包裹块状元素是不科学的,但是当需要写特殊页面效果的时候,比如在鼠标触发a标签的时候呈现下拉框 ,这时候就需要a标签包裹div标签,这时候需要把a标签按块状去呈现,也就是在样式中设置a{display:block;} 让a标签可以正常包裹div,再用JS或者JQ进一步写下拉效果.
jquery选择器 这种$(".container>div")什么意思
在页面中container类下级div标签 打个比方代码为 <div class="container"> <div id="1"> <div id="3"> <div id="6"></div> </div> <div id="4"></div> </div> <div di="2"> <div id="5"></div> </div> <span></span> </div> 该JQ脚本只会读取container类下的ID为...