div拖动:DIV层的拖动、关闭、打开效果代码

来源: 发布时间:星期四, 2008年12月25日浏览:2次评论:0

点击运行可以看到效果:

<!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; char<img src='/icons/20365set.gif' />=gb2312" /> 
<title>div托动<img src='/icons/20365dou.gif' />打开<img src='/icons/20365dou.gif' />关闭效果</title> 
<style type="text/css"> 
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} 
#bodyL{ 
float:left; 
width:84px; 
margin-right:2px; 
} 
a.od{ 
width:80px; 
height:25px; 
line-height:25px; 
text-align:center; 
font-weight:bold; 
border: 2px solid #849BCA; 
display:block; 
color:#547BC9; 
float:left; 
text-decoration:none; 
margin-top:2px; 
} 
a.od:link{ 
background:#EEF1F8; 
} 
a.od:visited{ 
background:#EEF1F8; 
} 
a.od:hover{ 
background:#EEE; 
} 
a.od:active{ 
background:#EEE; 
} 
#fd{ 
width:500px; 
height:200px; 
background:#EDF1F8; 
border: 2px solid #849BCA; 
margin-top:2px; 
margin-left:2px; 
float:left; 
overflow:hidden; 
position:absolute; 
left:0px; 
top:0px; 
cursor:move; 
float:left; 
/*filter:alpha(opacity=50);*/

} 
.content{ 
padding:10px; 
} 
</style> 
</head> 
<body> 
 
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]<br/>                 
                    
                    <script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                </div>
                <div class="tags">
                        标签：<a href="/Tag/70963/Index.html">js拖动div</a> <a href="/Tag/70910/Index.html">可拖动的div</a> <a href="/Tag/70909/Index.html">可拖动div</a> <a href="/Tag/70908/Index.html">div拖动</a> 
                      
                 </div>
                 <div id="plPdf">
	
                 <div> <a href="/mypdf/45015.pdf" title="下载 'div拖动:DIV层的拖动、关闭、打开效果代码' 的PDF电子版" style="color: #ff6600;
                     font-size: 14px; font-weight: bold;">下载文章的 PDF文档电子版 离线看</a></div>
                 
</div>
                <div class="diggdiv">
                    <div id="digg45015" class="diggbox">
                        <div class="diggnum">0</div>
                        <div class="digglink">
                            <a href="javascript:dig(45015);">顶一下</a>
                        </div>
                    </div>
                    <div class="prevnext">
                 
                        <div>
                        <input type="hidden" id="txtArtTitle" value="div拖动:DIV层的拖动、关闭、打开效果代码" />
                        <input type="text" id="txtArtUrl" onclick="copy(this)" style="width:300px" value="http:/www.crazycoder.cn/Javascript/Article45015.html" /><input type="button" onclick="copy()" value="复制网址" /></div>
                    </div>
                </div>
                <div class="clear"></div>
               
            </div>
          
            <div class="title-y">               
                <h3>相关文章</h3>
            </div>
            <div class="list-y">
                <ul class="list">
                    
                            <li><span>2008-12-25</span> <a href="/Javascript/Article44941.html">js拖动:js可拖动的后台界面</a>
                            </li>
                        
                            <li><span>2008-12-25</span> <a href="/Javascript/Article44909.html">div遮罩:兼容ie ff div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽</a>
                            </li>
                        
                </ul>
            </div>
            <div class="title-y">               
                <h3>读者评论</h3>
            </div>
            <div class="list-y">
                <ul class="listcmt">
                          
                <li>
                    <div class='pager'> <span class='pagerinfo'>共0条 分0页</span></div>
                </li>      
                </ul>
            </div>
            <div class="title-y">               
                <h3>发表评论</h3>
            </div>
            <form id="formCmt"  method="post" onsubmit="return saveComment();">
            <div class="list-y">                
                <ul class="list">
                    <li>昵称：<input type="text" id="txtUserName" name="txtUserName" /><input type="hidden" id="txtArticleID" value="45015" /></li>                    
                    <li>内容：<textarea id="txtContent" name="txtContent">

专注于互联网--专注于架构

首页 »Javascript教程 » div拖动:DIV层的拖动、关闭、打开效果代码 »正文

div拖动:DIV层的拖动、关闭、打开效果代码

热门标签

精华推荐

Dig排行

阅读排行

评论排行