JS高级之运动篇
2016-08-10 14:51
134 查看
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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS高级之缓冲运动篇
- 超级实用且不花哨的js代码大全 (二) -----高级应用(一)
- JS高级应用:操作模态与非模态对话框
- WebBrowser 高级扩展 js扩展 js订阅C#事件
- js 面向对象的技术创建高级 Web 应用程序
- 转别人的js（二）高级运用--b
- js 高级对象
- js高级程序设计
- JS高级应用
- JS字符串高级应用
- js高级程序设计(10.高级DOM技术部分代码)
- 超级实用且不花哨的js代码大全 (三) -----高级应用(二)
- JS高级应用:操作模态与非模态对话框
- JS 的一些高级方法或属性
- 超级实用且不花哨的js代码大全 (二) -----高级应用
- JS高级应用
- JS代码大全（二）高级应用
- 超级实用且不花哨的js代码大全 (二) -----高级应用(一)
- js中replace方法的高级替换
- 转别人的js（二）高级运用--a