js点击“更多”在其右下方弹出层
在网页中 点击“更多”文字 在其旁边的右下方弹出一个层,该层不可移动,该层不用遮盖网页背景透明即可
------解决方案--------------------
好像很简单,随便写写用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> <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 你看着办吧 受不了了 记得结帖哦 亲 还不明白站内信