滑动:主要是通过动态修改元素的坐标来实现,技术点如下:
1.考虑元素的初始化坐标、最终坐标,以及移动坐标等定位要素
2、移动的速度、频率等问题
<style type="text/css">
.block{
width:20px;height:20px;
position:absolute;
left:20px;top:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="block" id="block1">
</div>
<script type="text/javascript">
function getStyle(e,n){//e表示元素,n表示属性名,如“width”、“borderColor”
if(e.style[n]){//若果在style中显示定义
return e.style[n];
}else if(e.currentStyle){//否则,在IE
return e.currentStyle[n]
}else if(document.defaultView&&document.defaultView.getComputedStyle){//非ie(DOM标准)
n=n.replace(/([A-Z])/g,"-$1");//转换参数的属性名 borderColor--> border-Color
n=n.toLocaleLowerCase();//border-Color-->border-color
var s= document.defaultView.getComputedStyle(e,null);
if(s){
return s.getPropertyValue(n)
}
}else{
return null;//如果不支持,返回null
}
}
function getB(ele){//绝对定位的坐标值
return {
"x":(parseInt(getStyle(ele,"left"))||0),
"y":(parseInt(getStyle(ele,"top"))||0)
}
}
//简单的滑动函数:通过指向元素、移动的位置,以及移动的步数,可以设计一个按一定速度吧元素从当前位置移动的指定的位置
function slide(ele,x,y,t){//x和y表示要移动的最后坐标位置(相对包含块),t表示元素移动的步数
var t=t||100;//初始化步数,越大速度越慢
var o=getB(ele);//当前元素的绝对定位坐标
var x0=o.x;
var y0=o.y;
var stepx=Math.round((x-x0)/t);//计算x轴每次移动的步长,由于像素点不能用小数,所以会产生一定的误差
var stepy=Math.round((y-y0)/t);
var out= setInterval(function(){//设计定时器
var o=getB(ele);//获取移动后的绝对定位坐标值
var x0=o.x;
var y0=o.y;
ele.style["left"]=(x0+stepx)+'px';
ele.style["top"]=(y0+stepy)+'px';
if(Math.abs(x-x0)<=Math.abs(stepx)||Math.abs(y-y0)<=Math.abs(stepy)){//若果距离终点坐标的距离小于步长,则停止执行循环,并校正元素的最终坐标位置
ele.style["left"]=x+'px';
ele.style["top"]=y+'px';
clearTimeout(out);
}
},2)
}
temp1=document.getElementById("block1");
slide(temp1,400,400,60);
//注:使用时应该定义元素的绝对定位或相对定位显示状态,否则移动无效,在网页动画设计中,一般都使用这种定位移动的方式来实现
</script>
渐隐渐显:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.block{
width:200px;height: 200px;background-color: red;
}
</style>
</head>
<body>
<div class="block" id="block1">
</div>
<script type="text/javascript">
function setOpactity(ele,n){//n表示一个数,0——100的数,若省略 默认为100,即不透明
var n=parseFloat(n);
if(n&&(n>100)||!n)n=100;
if(n&&(n<0))n=0;
if(ele.filters){
ele.style.filter="alpha(opacity="+n+")";
}else{
ele.style.opacity=n/100;
}
}
function fade(ele,t,io){//t表示渐隐渐显的速度,值越大,速度越慢,io表示渐隐或渐显方式,true为渐显
var t=t||10;
if(io){
var i=0;
}else{
var i=100;
}
var out=setInterval(function(){
setOpactity(ele,i);
if(io){//根据渐隐或渐显方式决定执行效果
i++;
if(i>=100) clearTimeout(out);
}else{
i--;
if(i<=0) clearTimeout(out);
}
},t);
}
ele=document.getElementById("block1");
fade(ele,200,true);
// fade(ele,200,false);
</script>