<html>
<head>
<style>
* {
margin:0;
padding:0;
}
#div1{
width:200px;
height:200px;
background:red;
position:relative;
left:-200px;
top:0;
}
#div1 span{
width:20px;
height:50px;
background:skyblue;
position:absolute;
left:200px;
top:75px;
} #testOpacity{
margin-top:50px;
width:200px;
height:200px;
background:red;
filter:alpha(opacity:30);
opacity:0.3
} #bufferAction{
margin-top:50px;
width:200px;
height:200px;
background:red;
position:relative;
left:-200px;
top:0;
}
#bufferAction span{
width:20px;
height:50px;
background:skyblue;
position:absolute;
left:200px;
top:75px;
} </style>
<title>js动画test</title>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
<script>
var div1=document.getElementById("div1");
div1.onmouseover=function(){
startMove(div1,10,0);
}
div1.onmouseleave=function(){
startMove(div1,-10,-200);
}
var timer=null;
/*使用offsetLeft实现滑动动画*/
function startMove(obj,speed,target){
clearInterval(timer);
timer=setInterval(function(){
if(obj.offsetLeft==target){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+"px";
}
},30);
}
</script> <div id="testOpacity">
</div>
<script>
var opacityObj=document.getElementById("testOpacity");
opacityObj.onmouseover=function(){
changeOpacity(this,5,90);
}
opacityObj.onmouseleave=function(){
changeOpacity(this,5,10);
}
var opacityTimer=null;
/*使用opacity实现渐变*/
function changeOpacity(obj,speed,target){
clearInterval(opacityTimer);
var currentOpacity=obj.style.opacity*100;
opacityTimer=setInterval(function(){
if(target==currentOpacity){
clearInterval(opacityTimer);
}else{
if(target>currentOpacity){
speed=Math.abs(speed);
}else{
speed=-Math.abs(speed);
}
currentOpacity+=speed;
obj.style.opacity=currentOpacity/100;
obj.style.filter='alpha(opacity:'+currentOpacity+')';
}
},30);
}
</script> <div id="bufferAction">
<span id="bufferActionSpan">分享</span>
</div>
<script>
var opacityObj=document.getElementById("bufferAction");
opacityObj.onmouseover=function(){
bufferAction(this,10,0);
}
opacityObj.onmouseleave=function(){
bufferAction(this,10,-200);
}
var bufferTimer=null;
/*模拟渐进效果*/
function bufferAction(obj,speed,target){
clearInterval(bufferTimer);
speed=speed>0? Math.ceil(speed):Math.floor(speed);
bufferTimer=setInterval(function(){
if(target==obj.offsetLeft){
clearInterval(bufferTimer);
}else{
if(target>obj.offsetLeft){
speed=Math.ceil((target-obj.offsetLeft)/20);
}else{
speed=Math.floor((target-obj.offsetLeft)/20);
}
obj.style.left=obj.offsetLeft+speed+"px";
}
},30);
}
</script> </body> </html>
/*
offsetLeft和left的区别：
offsetLeft获取相对于父对象的左边距
left获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距 offsetLeft返回的数值，left返回的是带px的字符串
style.left是读写的，offsetLeft是只读的
*/
/*
css布局：
position:absolute相对于使用了position的父级元素，如果没有则以body为参照 relative相对定位，相对于原来的位置，但是原来的位置仍然保留
absolute定位，相对于最近的非标准定位，原来的位置消失，被后边的位置所顶替 只用absolute和relative定位多样的页面，真是漂亮。 */
/*
window.opener:
window.opener可以获取转到当前页面的父页面window对象，可以通过其调用父页面的所有对象和方法
博客园的tag跳转连接：
window.open('/tags/list?id=*****','_blank','width=300,height=500,toolbars=yes,resizable=yes,scrollbars=yes,left='+leftVal+',top='+topVal); 刷新当前页可以用：
window.location="javascript:document.location.reload()";
*/