JS实现1.(div中有个图片01 点击图片01 关闭div(不是隐藏)) 2.图片02拖动div移动 在线等谢谢

.dispaly不是隐藏吗我想点击div里的图片在页面上删除整个div... .dispaly 不是隐藏吗 我想点击div里的图片 在页面上删除整个div 展开
 我来答
jsyczhanghao
2010-12-28 · TA获得超过566个赞
知道小有建树答主
回答量:226
采纳率:0%
帮助的人:270万
展开全部
1.关闭div不是隐藏==删除div?
function remove(elem){
elem.parentNode.removeChild(elem);
}

<script>
window.onload=function(){
document.getElementById('img1').onclick=function(){
remove(this.parentNode);
};
};
</script>
<body>
<div><img src='xxxx' id='img1'/></div>
</body>

2.图片02拖动div移动
<script>
//同步所有浏览器的event
function formatE(e){
if(window.event && !e){
e=window.event;
e.target=e.srcElement;
e.relatedTarget=e.fromElement;
e.pageX=e.clientX+document.body.scrollLeft;
e.pageY=e.clientY+document.body.scrollTop;
e.layerX=e.offsetX;
e.layerY=e.offsetY;
e.stopPropagation=function(){
e.cancelBubble=true;
};
e.preventDefault=function(){
e.returnValue=false;
};
}
return e;
}

//一个拖拽的函数
function s_dragdrop(handle){
this.onmousedown=function(e){
if(window.attachEvent){
document.selection.empty();
}
e=formatE(e);
var p=handle?handle:this;
var p_left=parseInt(p.style.left);
var p_top=parseInt(p.style.top);
var ex=parseInt(e.pageX);
var ey=parseInt(e.pageY);
var xx=ex-p_left;
var xy=ey-p_top;
this.onmousemove=function(e){
e=formatE(e);
p.style.left=(parseInt(e.pageX)-xx)+'px';
p.style.top=(parseInt(e.pageY)-xy)+'px';
};
};
this.onmouseup=function(){
this.onmousemove=null;
}
}
</script>
<script>
window.onload=function(){
s_dragdrop.call(document.getElementById('img2'),document.getElementById('div'));
//如果想拖动元素本身让其本身移动则,将参数去掉即可
//s_dragdrop.call(document.getElementById('img2'));
};
</script>
<body>
<div id='div' style="position:absolute;left:0px;top:0px;"><img src='xxxx' id='img2'/></div>
</body>
540457607
2010-12-28 · TA获得超过141个赞
知道小有建树答主
回答量:143
采纳率:0%
帮助的人:108万
展开全部
<html>
<head>
<title></title>
</head>
<body>
<p onclick = "ShowDivWin()">点下我
</body>
<script language="javascript" type="text/javascript">
/* @author Nieger Dai
@date 2007.11.15
*/
var isIe = ( document.all ) ? true : false;
var moveable = false;
var topDivBorderColor = "#336699";
// 提示窗口的边框颜色
var topDivBgColor = "#6795B4";
// 提示窗口的标题的背景颜色
var contentBgColor = "white";
// 内容显示窗口的背景颜色
var contentFontColor = "black";
// 内容显示窗口字体颜色
var titleFontColor = "white";
// 弹出窗口标题字体颜色
var index = 10000;
// z - index;
// 创建弹出窗口,构造函数
function DivWindow( id, title, w, h, content )
{
this.id = id;
// 窗口id
this.zIndex = index + 2;
this.title = title;
// 弹出窗口名称
this.message = content;
// 弹出窗口内容
this.width = w;
// 弹出窗口宽度
this.height = h;
// 弹出窗口高度
this.left = ( document.body.clientWidth ) ? ( document.body.clientWidth - this.width ) / 2 : 0;
// 弹出窗口位置,距屏幕左边的位置
this.top = ( document.body.clientHeight ) ? ( document.body.clientHeight - this.height ) / 2 : 0;
// 弹出窗口位置,距屏幕上边的位置
// this.init = init;
// this.init();
}
// ---------------------------------------
// 根据构造函数设定初始值,创建弹出窗口
DivWindow.prototype =
{
// 设置弹出窗口标题字体颜色
setPopupTopTitleFontColor : function( tFontColor )
{
titleFontColor = tFontColor;
}
,
// 设置弹出窗口标题背景颜色
setPopupTopBgColor : function( tBgColor )
{
topDivBgColor = tBgColor;
}
,
// 设置弹出窗口风格, 包括标题栏的背景,弹出窗口边框颜色,内容窗体背景颜色,内容窗体字体颜色
setPopupColor : function( borderColor, bgColor, tFontColor, cBgColor, fColor )
{
topDivBorderColor = borderColor;
topDivBgColor = bgColor;
titleFontColor = tFontColor;
contentBgColor = cBgColor;
contentFontColor = fColor;
}
,
// 打开一个弹出窗口
open : function()
{
var sWidth, sHeight;
sWidth = document.body.clientWidth;
sHeight = document.body.clientHeight;
var bgObj = document.createElement( "div" );
bgObj.setAttribute( 'id', 'window' + this.id );
var styleStr = "top:0px;left:0px;position:absolute;background:#245;width:" + sWidth + "px;height:" + sHeight + "px;";
styleStr += ( isIe ) ? "filter:alpha(opacity=0);" : "opacity:0;";
bgObj.style.cssText = styleStr;
document.body.appendChild( bgObj );
// 让背景逐渐变暗
//showBackground( bgObj, 25 );
// 弹出窗口框体背景容器
var windowTopBgDiv = document.createElement( "div" );
windowTopBgDiv.setAttribute( 'id', 'windowTopBg' + this.id );
windowTopBgDiv.style.position = "absolute";
windowTopBgDiv.style.zIndex = this.zIndex ;
windowTopBgDiv.style.width = this.width ;
windowTopBgDiv.style.height = this.height;
windowTopBgDiv.style.left = this.left;
windowTopBgDiv.style.top = this.top;
windowTopBgDiv.style.background = topDivBgColor;
windowTopBgDiv.style.fontSize = "9pt";
windowTopBgDiv.style.cursor = "default";
windowTopBgDiv.style.border = "1px solid " + topDivBorderColor;
windowTopBgDiv.attachEvent( "onmousedown", function()
{
if( windowTopBgDiv.style.zIndex != index )
{
indexindex = index + 2;
var idx = index;
windowTopBgDiv.style.zIndex = idx;
}
}
);
// 弹出窗口头部框体
var windowTopDiv = document.createElement( "div" );
windowTopDiv.setAttribute( 'id', 'windowTop' + this.id );
windowTopDiv.style.position = "absolute";
windowTopDiv.style.background = topDivBgColor;
// "white";
windowTopDiv.style.color = titleFontColor;
windowTopDiv.style.cursor = "move";
windowTopDiv.style.height = 20;
windowTopDiv.style.width = this.width - 2 * 2;
// 开始拖动;
windowTopDiv.attachEvent( "onmousedown", function()
{
if( event.button == 1 )
{
// 锁定标题栏;
windowTopDiv.setCapture();
// 定义对象;
var win = windowTopDiv.parentNode;
// 记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt( win.style.left );
y1 = parseInt( win.style.top );
// 记录颜色;
// topDivBgColor = windowTopDiv.style.backgroundColor;
// 改变风格;
// windowTopDiv.style.backgroundColor = topDivBorderColor;
win.style.borderColor = topDivBorderColor;
moveable = true;
}
}
);
// 停止拖动
windowTopDiv.attachEvent( "onmouseup", function()
{
if( moveable )
{
var win = windowTopDiv.parentNode;
win.style.borderColor = topDivBgColor;
windowTopDiv.style.backgroundColor = topDivBgColor;
windowTopDiv.releaseCapture();
moveable = false;
}
}
);
// 开始拖动
windowTopDiv.attachEvent( "onmousemove", function()
{
if( moveable )
{
var win = windowTopDiv.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
var objRith = parseInt(win.style.left,10) + parseInt(win.style.width,10);
var objButton = parseInt(win.style.top,10) + parseInt(win.style.height,10);
if(parseInt(win.style.left,10) <= 0)
{
win.style.left = 1 ;
}
if(parseInt(win.style.top,10) <= 0)
{
win.style.top = 1 ;
}
if ( objRith >= document.body.clientWidth )
{
win.style.left = document.body.clientWidth - parseInt(win.style.width) - 1;
}
if ( objButton >= document.body.clientHeight )
{
win.style.top = document.body.clientHeight - parseInt(win.style.height) - 1;
}
}
}
);
// 双击弹出窗口
windowTopDiv.attachEvent( "ondblclick", function()
{
maxOrMinPopupDiv( windowTopOperateSpan, windowContentDiv );
}
);
// 增加一个弹出窗口标题的显示
var windowTopTitleSpan = document.createElement( "span" );
windowTopTitleSpan.setAttribute( 'id', 'windowTopTitle' + this.id );
windowTopTitleSpan.style.width = this.width - 2 * 12 - 4;
windowTopTitleSpan.style.paddingLeft = "3px";
windowTopTitleSpan.innerHTML = this.title;
// 增加一个弹出窗口最小化,最大化的操作
var windowTopOperateSpan = document.createElement( "span" );
windowTopOperateSpan.setAttribute( 'id', 'windowTopOperate' + this.id );
windowTopOperateSpan.style.width = 12;
windowTopOperateSpan.style.borderWidth = "0px";
windowTopOperateSpan.style.color = titleFontColor;
// "white";
windowTopOperateSpan.style.fontFamily = "webdings";
windowTopOperateSpan.style.cursor = "default";
windowTopOperateSpan.innerHTML = "0";
// 最大化或者最小化弹出窗口操作
windowTopOperateSpan.attachEvent( "onclick", function()
{
maxOrMinPopupDiv( windowTopOperateSpan, windowContentDiv );
}
);
// 增加一个弹出窗口关闭的操作
var windowTopCloseSpan = document.createElement( "span" );
windowTopCloseSpan.setAttribute( 'id', 'windowTopClose' + this.id );
windowTopCloseSpan.style.width = 12;
windowTopCloseSpan.style.borderWidth = "0px";
windowTopCloseSpan.style.color = titleFontColor;
// "white";
windowTopCloseSpan.style.fontFamily = "webdings";
windowTopCloseSpan.style.cursor = "default";
windowTopCloseSpan.innerHTML = "r";
// 关闭窗口
windowTopCloseSpan.attachEvent( "onclick", function()
{
windowTopDiv.removeChild( windowTopTitleSpan );
windowTopDiv.removeChild( windowTopOperateSpan );
windowTopDiv.removeChild( windowTopCloseSpan );
windowTopBgDiv.removeChild( windowTopDiv );
windowTopBgDiv.removeChild( windowContentDiv );
document.body.removeChild( windowTopBgDiv );
document.body.removeChild( bgObj );
}
);
// 内容
var windowContentDiv = document.createElement( "div" );
windowContentDiv.setAttribute( 'id', 'windowContent' + this.id );
windowContentDiv.style.background = contentBgColor;
windowContentDiv.style.color = contentFontColor;
windowContentDiv.style.cursor = "default";
windowContentDiv.style.height = ( this.height - 20 - 6 );
windowContentDiv.style.width = "100%";
windowContentDiv.style.position = "relative";
windowContentDiv.style.left = 0;
windowContentDiv.style.top = 24;
windowContentDiv.style.lineHeight = "20px";
windowContentDiv.style.fontSize = "10pt";
windowContentDiv.style.wordBreak = "break-all";
windowContentDiv.style.padding = "3px";
windowContentDiv.innerHTML = this.message;
// 将内容写入到文件中
windowTopDiv.appendChild( windowTopTitleSpan );
windowTopDiv.appendChild( windowTopOperateSpan );
windowTopDiv.appendChild( windowTopCloseSpan );
windowTopBgDiv.appendChild( windowTopDiv );
windowTopBgDiv.appendChild( windowContentDiv );
document.body.appendChild( windowTopBgDiv );
}
}
// ---------------------------------------
// 最大或者最小化弹出窗口
function maxOrMinPopupDiv( windowTopOperateSpan, windowContentDiv )
{
var win = windowTopOperateSpan.parentNode.parentNode;
var tit = windowTopOperateSpan.parentNode;
var flg = windowContentDiv.style.display == "none";
if( flg )
{
win.style.height = parseInt( windowContentDiv.style.height ) + parseInt( tit.style.height ) + 2 * 2;
windowContentDiv.style.display = "block";
windowTopOperateSpan.innerHTML = "0";
}
else
{
win.style.height = parseInt( tit.style.height ) + 2 * 2;
windowTopOperateSpan.innerHTML = "2";
windowContentDiv.style.display = "none";
}
}
// ---------------------------------------
// 让背景渐渐变暗
function showBackground( obj, endInt )
{
if( isIe )
{
obj.filters.alpha.opacity += 1;
if( obj.filters.alpha.opacity < endInt )
{
setTimeout( function()
{
this.showBackground( obj, endInt )
}
, 5 );
}
}
else
{
var al = parseFloat( obj.style.opacity );
al += 0.01;
obj.style.opacity = al;
if( al < ( endInt / 100 ) )
{
setTimeout( function()
{
this.showBackground( obj, endInt )
}
, 5 );
}
}
}
// ---------------------------------------
// 关闭弹出窗口
function closeDivWindow( id )
{
var windowTopTitleSpan = document.getElementById( "windowTopTitle" + id );
var windowTopOperateSpan = document.getElementById( "windowTopOperate" + id );
var windowTopCloseSpan = document.getElementById( "windowTopClose" + id );
var windowTopDiv = document.getElementById( "windowTop" + id );
var windowTopBgDiv = document.getElementById( "windowTopBg" + id );
var windowContentDiv = document.getElementById( "windowContent" + id );
var bgObj = document.getElementById( "window" + id );
windowTopDiv.removeChild( windowTopTitleSpan );
windowTopDiv.removeChild( windowTopOperateSpan );
windowTopDiv.removeChild( windowTopCloseSpan );
windowTopBgDiv.removeChild( windowTopDiv );
windowTopBgDiv.removeChild( windowContentDiv );
document.body.removeChild( windowTopBgDiv );
document.body.removeChild( bgObj );
}
// ---------------------------------------
function ShowDivWin()
{
var w = new DivWindow("DivWin","标题",400,300,"按住标题可拖动 <br> 双击标题试一下?<br> 不能把我移出边框吧!! O(∩_∩)O");
w.open();
}
</script>
</html>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
维乐心灵音乐
2010-12-27 · TA获得超过531个赞
知道小有建树答主
回答量:1063
采纳率:50%
帮助的人:490万
展开全部
先给你第一个,如果这个图片是DIV的直接上级的话,在那个图片上加onclick="this.parentNode.display='none';"
话说 ,不太明白你说的那个“关闭不是隐藏”是啥意思……
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式