程序博客网 > mysql用户密码修改

JS高级之运动篇

来源：互联网发布：mysql用户密码修改编辑：程序博客网时间：2024/06/10 19:20

1.function startMove(){
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.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove();
}
oDiv.onmouseout=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.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout=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.onload=function(){
var oImg=document.getElementById('img1');
oImg.onmouseover=function(){
startMove(100);
};
oImg.onmouseout=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>

1 0

mysql用户密码修改

mysql用户密码修改

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子中国养蛇网养蛇的厂房图片三万元能养多少条水律蛇广西养蛇技术培训基地养蛇技术宝典手机养蛇软件养殖蛇养蛇技术大全养蛇成本蛇养殖技术养蛇网养蛇培训班梦到养蛇养蛇基地哪里有关于蛇蛇的品种中国毒蛇网适合新手女生养的蛇异界养蜂人养蜂技术养蜂养蜂工具养蜂人修仙养蜂人养蜂夹道养蜂论坛网养蜂帽子养蜂花粉养蜂知识养蜂车养蜂吧养蜂图片养蜂之家怎样养蜂养蜂用具农村养蜂网养蜂大全养蜂枝术养蜂怎么样人工养蜂冬季养蜂