【06-23】js动画学习笔记01

  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 */

相关阅读:
【POJ 3162】 Walking Race (树形DP-求树上最长路径问题，+单调队列)
【POJ 2152】 Fire （树形DP）
【POJ 1741】 Tree (树的点分治)
【POJ 2486】 Apple Tree (树形DP)
【HDU 3810】 Magina （01背包，优先队列优化，并查集）
【SGU 390】Tickets （数位DP）
【SPOJ 2319】 BIGSEQ
【SPOJ 1182】 SORTBIT
【HDU 5456】 Matches Puzzle Game （数位DP）
【HDU 3652】 B-number （数位DP）
原文地址：https://www.cnblogs.com/achievec/p/5617112.html