js点击“更多”在其右下方弹出层

Question

在网页中 点击“更多”文字 在其旁边的右下方弹出一个层，该层不可移动，该层不用遮盖网页背景透明即可

Answer 1

好像很简单，随便写写用jqeury吧 大致意思是这样 ；哎还是用js吧............其实jquery更简单<div id="d" style="width:100px;height:100px;border:1px solid #ccc;position:fixed;bottom:0;right:20px;">
<span id="down" style="cursor:pointer;">-</span>&nbsp;&nbsp;<span id="up" style="cursor:pointer;">+</span>
</div>
<script type="text/javascript">
var divObj = document.getElementById("d");
var down = document.getElementById("down");
var up = document.getElementById("up");
function divDown() {
var bot = null;
var time = setInterval(function() {
bot = parseInt(divObj.style.bottom,10);
if(Math.abs(bot) > parseInt(divObj.style.height,10)-20) {
clearInterval(time);
}
divObj.style.bottom = (bot-2) + "px";
},5);
up.addEventListener("click",divUp,false);
down.removeEventListener("click",divDown,false);
}
function divUp() {
var bot = null;
var time = setInterval(function() {
bot = parseInt(divObj.style.bottom,10);
console.log(bot);
if(bot > 0) {
clearInterval(time);
}
divObj.style.bottom = (bot+2) + "px";
},5);
down.addEventListener("click",divDown,false);
up.removeEventListener("click",divUp,false);
}
down.addEventListener("click",divDown,false);
</script>以上代码可以实现这个功能，由于我肚子疼就不给你优化了，里面很多冗余代码，代码页面有测试，也没有兼容IE  你看着办吧  受不了了 记得结帖哦 亲 还不明白站内信

Answer 2

<input type='button' value='更多' onclick="showmore(this)"/>
<div id='more' style='visibility:hidden;position:absolute'></div>function showmore(btn)
{
  var str="111111111111111111111111111111111111";
  var adiv=document.getElementById('more');
  adiv.style.visibility="visible";
  adiv.style.left=btn.style.offsetLeft+btn.style.width;
  adiv.style.top=btn.style.offsetTop+btn.style.height;
  adiv.style.height='100px';
  adiv.style.width='60px';
  adiv.style.zIndex=100;
  adiv.innerHTML=str;
  document.body.appendChild(adiv);
}