1 <html>
2 <head>
3 <style>
4 * {
5 margin:0;
6 padding:0;
7 }
8 #div1{
9 width:200px;
10 height:200px;
11 background:red;
12 position:relative;
13 left:-200px;
14 top:0;
15 }
16 #div1 span{
17 width:20px;
18 height:50px;
19 background:skyblue;
20 position:absolute;
21 left:200px;
22 top:75px;
23 }
24
25
26 #testOpacity{
27 margin-top:50px;
28 width:200px;
29 height:200px;
30 background:red;
31 filter:alpha(opacity:30);
32 opacity:0.3
33 }
34
35
36 #bufferAction{
37 margin-top:50px;
38 width:200px;
39 height:200px;
40 background:red;
41 position:relative;
42 left:-200px;
43 top:0;
44 }
45 #bufferAction span{
46 width:20px;
47 height:50px;
48 background:skyblue;
49 position:absolute;
50 left:200px;
51 top:75px;
52 }
53
54 </style>
55 <title>js动画test</title>
56 </head>
57 <body>
58 <div id="div1">
59 <span id="share">分享</span>
60 </div>
61 <script>
62 var div1=document.getElementById("div1");
63 div1.onmouseover=function(){
64 startMove(div1,10,0);
65 }
66 div1.onmouseleave=function(){
67 startMove(div1,-10,-200);
68 }
69 var timer=null;
70 /*使用offsetLeft实现滑动动画*/
71 function startMove(obj,speed,target){
72 clearInterval(timer);
73 timer=setInterval(function(){
74 if(obj.offsetLeft==target){
75 clearInterval(timer);
76 }else{
77 obj.style.left=obj.offsetLeft+speed+"px";
78 }
79 },30);
80 }
81 </script>
82
83 <div id="testOpacity">
84 </div>
85 <script>
86 var opacityObj=document.getElementById("testOpacity");
87 opacityObj.onmouseover=function(){
88 changeOpacity(this,5,90);
89 }
90 opacityObj.onmouseleave=function(){
91 changeOpacity(this,5,10);
92 }
93 var opacityTimer=null;
94 /*使用opacity实现渐变*/
95 function changeOpacity(obj,speed,target){
96 clearInterval(opacityTimer);
97 var currentOpacity=obj.style.opacity*100;
98 opacityTimer=setInterval(function(){
99 if(target==currentOpacity){
100 clearInterval(opacityTimer);
101 }else{
102 if(target>currentOpacity){
103 speed=Math.abs(speed);
104 }else{
105 speed=-Math.abs(speed);
106 }
107 currentOpacity+=speed;
108 obj.style.opacity=currentOpacity/100;
109 obj.style.filter='alpha(opacity:'+currentOpacity+')';
110 }
111 },30);
112 }
113 </script>
114
115 <div id="bufferAction">
116 <span id="bufferActionSpan">分享</span>
117 </div>
118 <script>
119 var opacityObj=document.getElementById("bufferAction");
120 opacityObj.onmouseover=function(){
121 bufferAction(this,10,0);
122 }
123 opacityObj.onmouseleave=function(){
124 bufferAction(this,10,-200);
125 }
126 var bufferTimer=null;
127 /*模拟渐进效果*/
128 function bufferAction(obj,speed,target){
129 clearInterval(bufferTimer);
130 speed=speed>0? Math.ceil(speed):Math.floor(speed);
131 bufferTimer=setInterval(function(){
132 if(target==obj.offsetLeft){
133 clearInterval(bufferTimer);
134 }else{
135 if(target>obj.offsetLeft){
136 speed=Math.ceil((target-obj.offsetLeft)/20);
137 }else{
138 speed=Math.floor((target-obj.offsetLeft)/20);
139 }
140 obj.style.left=obj.offsetLeft+speed+"px";
141 }
142 },30);
143 }
144 </script>
145
146 </body>
147
148 </html>
1 /*
2 offsetLeft和left的区别：
3 offsetLeft获取相对于父对象的左边距
4 left获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距
5
6 offsetLeft返回的数值，left返回的是带px的字符串
7 style.left是读写的，offsetLeft是只读的
8 */
1 /*
2 css布局：
3 position:absolute相对于使用了position的父级元素，如果没有则以body为参照
4
5 relative相对定位，相对于原来的位置，但是原来的位置仍然保留
6 absolute定位，相对于最近的非标准定位，原来的位置消失，被后边的位置所顶替
7
8 只用absolute和relative定位多样的页面，真是漂亮。
9
10 */
1 /*
2 window.opener:
3 window.opener可以获取转到当前页面的父页面window对象，可以通过其调用父页面的所有对象和方法
4 博客园的tag跳转连接：
5 window.open('/tags/list?id=*****','_blank','width=300,height=500,toolbars=yes,resizable=yes,scrollbars=yes,left='+leftVal+',top='+topVal);
6
7
8 刷新当前页可以用：
9 window.location="javascript:document.location.reload()";
10 */
