仿360開(kāi)機(jī)效果
1.布局
<div class="box">
<span id="close"></span>
<div class="hd" id="hd">
<img src="images/b.jpg">
</div>
<div class="td" id="td">
<img src="images/t.jpg">
</div>
</div>
2.布局頁(yè)面位置
.box{
width:322px;
position: fixed;
bottom: 0;
right: 0;
}
span{
position: absolute;
top:0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
<!--cursor表示鼠標(biāo)的觸手樣式-->
3.在上一篇中畸悬，我們封裝了緩動(dòng)動(dòng)畫惨寿，這里我們不再重寫一遍緩動(dòng)框架啦。有需要的回到上一篇緩動(dòng)框架復(fù)制代碼 緩動(dòng)框架
<!--把緩動(dòng)框架放到一個(gè)js文件中，取名叫Jqurey.js-->
<script src="Jqurey.js"></script>
<script>
window.onload = function () {
<!--獲取標(biāo)簽-->
var span = document.getElementById("close");
var hd = span.parentNode;
var td = document.getElementById("td");
<!--綁定事件-->
span.onclick = function () {
<!--書寫事件-->
animate(td,{"height":0},function (){
animate(hd,{"width":0});
});
}
}
</script>
運(yùn)行效果
Untitled3.gif
