换了博客的第一篇博文
一个简单的滑动动态效果
css代码:
<style type="text/css">
#div1
{
width: 200px;
height: 100px;
background: #ccc;
position: absolute;
left: -200px;
position:absolute;
}
#button1
{
width: 30px;
height: 90px;
right: -30px;
position: absolute;
top: 0px;
text-align: center;
}
#div2{width: 200px;
height: 100px;
background: #ccc;
position:absolute;
top: 150px;
left: -200px;}
#button2{width: 30px;right: -30px;position: absolute;}
</style>
js代码:
<script type="text/javascript">
window.onload = function ()
{
var oDiv1 = document.getElementById('button1');
var oDiv2 = document.getElementById('button2');
if('oDiv1')
{
oDiv1.onmousedown= function ()
{
shareMove(0);
}
oDiv1.onclick= function ()
{
shareMove(-200);
}
}
else('oDiv2')
{
oDiv2.onmousedown= function ()
{
shareMove1(0);
}
oDiv2.onclick= function ()
{
shareMove1(-200);
}
}
}
var timer = null;
function shareMove(end) {
var oDiv1 = document.getElementById('div1');
var speed = 0;
if (oDiv1.offsetLeft < end) { //根据DIV的offsetLeft距离判断DIV所要走的正负方向
speed = 10;
}
else {
speed = -10;
}
clearInterval(timer); //在一个setInterval开始之前都要先清除之前的setInterval
timer = setInterval(function () {
if (oDiv1.offsetLeft == end) { //根据参数判断DIV要走的距离
clearInterval(timer);
}
else {
oDiv1.style.left = oDiv1.offsetLeft + speed + 'px' //DIV要走的距离
}
}, 30);
}
function shareMove1(end) {
var oDiv2 = document.getElementById('div2');
var speed = 0;
if (oDiv2.offsetLeft < end) { //根据DIV的offsetLeft距离判断DIV所要走的正负方向
speed = 10;
}
else {
speed = -10;
}
clearInterval(timer); //在一个setInterval开始之前都要先清除之前的setInterval
timer = setInterval(function () {
if (oDiv2.offsetLeft == end) { //根据参数判断DIV要走的距离
clearInterval(timer);
}
else {
oDiv2.style.left = oDiv2.offsetLeft + speed + 'px' //DIV要走的距离
}
}, 30);
}
<script>
html代码:
<div style="height:2000px; background-color:;">
<div id="div1">
<button id="button1">通知公告</button>
<h4>fff</h4>
</div>
<div id="div2">
<button id="button2">友情连接</button>
<h4>fff</h4>
</div>
fff
努力吧,为了媳妇儿,为了家。。。