高仿bootstrap的layout效果，一
公司研发一个新的cms，为了减少以后的修改和尽可能大程度的满足客户对cms的灵活需求，我的经理安排我去做一个与bootstrap的layout差不多的效果，这叫什么，锻炼的时候来了，加油，这个急不得一点一点的来吧，当然做肯定也是做一个简化版的，我初步规划做一个一个布局的，一个往布局里面扔内容的应该就足够了，js要求支持火狐谷歌和ie9以上的浏览器，ie8适当考虑，ie8一下的，不好意思，我放弃了，哈哈...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>拖拽</title>
<style>
html,body{ width:100%; height:100%; padding:0; margin:0;}
#layout{ margin-left:200px; background:#f1f1f1; height:100%; overflow:auto;}
#list{ float:left; width:195px; height:100%; background:#f1f1f1;}
.box{ margin:10px; height:90px; background:#9CF; text-align:center; color:#fff; line-height:90px; padding:5px 10px;}
.css{ margin:10px; height:40px; background:#F99;text-align:center; color:#fff; line-height:40px; padding:5px 10px;}
</style>
</head>
<body>
<div >
<div class="box">
11111111
</div>
<div class="box">
2222222222
</div>
<div class="box">
33333333333
</div>
<div class="css">
css
</div>
</div>
<div >
</div>
</body>
</html>
<script type="text/javascript">
var oList=document.getElementById("list");
var oLayout=document.getElementById("layout");
var aDiv=oList.getElementsByTagName("div");
for(var i=aDiv.length-1;i>-1;i--){
aDiv[i].onmousedown=function(e){
var e=e||event;
var ismoved=false;
var disX=e.clientX-this.offsetLeft;
var disY=e.clientY-this.offsetTop;
var oDiv=document.createElement("div");
oDiv.className=this.className;
oDiv.innerHTML=this.innerHTML;
oDiv.style.width=this.offsetWidth+"px";
oDiv.style.position="absolute";
oDiv.style.opacity=0;
oList.appendChild(oDiv);
document.onmousemove=function(e){
var e=e||event;
ismoved=true;
oDiv.style.opacity=.5;
oDiv.style.left=e.clientX-disX+"px";
oDiv.style.top=e.clientY-disY+"px";
}
document.onmouseup=function(){
if(ismoved){
oLayout.appendChild(oDiv);
oDiv.removeAttribute("style");
}
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
</script>- 上一篇 »vue.js高仿饿了么（前期整理）
- 下一篇 »javascript类lightbox效果
相关推荐
bootStrap效果图
http://www.ziqiangxuetang.com/bootstrap/bootstrap-tutorial.html
时间：2024-04-06 10:09
