var oDiv=document.getElementById('div1');
setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+10+'px';
},30);
}
offset代表当前对象的当前left值。
2.要想停止setInterval，之前必须为interval设置一个变量。clearInterval(timer);
3.if...else..对立条件下分别做不同的事。
4.startMove函数：<script type="text/javascript">
var timer=null;
function startMove(){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=9;
if(oDiv.offsetLeft>=300){
clearInterval(timer);//到达终点时要做的事
}else {
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';//到达终点之前要做的事
}
},30);
}
</script>
5.position:absolute;如果父级有定位属性，则是相对父级进行定位。
6.span是为行级元素设置样式的。
7.分享到鼠标移入移出行为：
<style>#div1{width:100px;height:200px;background: #ccc;position:absolute;left:-100px;}
#div1 span{width:20px;height:60px;line-height: 20px;text-align: center;
position:absolute;left:100px;top:70px;background: yellow;}
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
oDiv.οnmοuseοver=function(){
startMove();
}
oDiv.οnmοuseοut=function(){
startMove2();
}
};
var timer=null;
function startMove(){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==0){
clearInterval(timer);
}else {
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}
}
,30);
}
function startMove2(){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
iSpeed=-10;
if(oDiv.offsetLeft==-100){
clearInterval(timer);
}else {
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}
,30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</html>
8.如何合并2个长得差不多的函数？很简单，将不同的部分作为参数传入函数。
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
oDiv.οnmοuseοver=function(){
startMove(10,0);
}
oDiv.οnmοuseοut=function(){
startMove(-10,-100);
}
};
var timer=null;
function startMove(iSpeed,iTaget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTaget){
clearInterval(timer);
}else {
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}
,30);
}
</script>
9.符合生活习惯，对外接口参数越少越好（在通过方法可以解决的前提下，通过目标点计算出速度）
var iSpeed=null;
if(oDiv.offsetLeft<iTaget){
iSpeed=10;
}else{
iSpeed=-10;
}
10、图片路径：../../1.jpg(与其上级的上级同级) 1.jpg是与所在html同级的意思。
11、用变量存储透明度
<style>
#img1{
filter:alpha(opacity:30);opacity:0.3;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oImg=document.getElementById('img1');
oImg.οnmοuseοver=function(){
startMove(100);
};
oImg.οnmοuseοut=function(){
startMove(30);
}
};
var timer=null;
var alpha=30;
function startMove(iTaget){
var oImg=document.getElementById('img1');
clearInterval(timer);
timer=setInterval(function(){
if(alpha<iTaget){
iSpeed=1;
}else{
iSpeed=-1;
}
if(alpha==iTaget){
clearInterval(timer)
}else{
alpha+=iSpeed;
oImg.style.filter='alpha(opacity:'+alpha+')';
oImg.style.opacity=alpha/100;
document.title=alpha;
}
},30);
}
</script>
</head>
<body>
<img id="img1" src="../../csdn.jpg"/>
</body>
</html>
501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
