zoukankan      html  css  js  c++  java

  • 【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 */
  • 相关阅读:
    用动画切换按钮的状态
    用UICollectionView实现无限轮播图
    水平方向瀑布流
    UICollectionViewFlowLayout使用示例
    旋转木马效果
    Greenplum集群或者Postgresql出现死锁肿么办？
    Lucene的全文检索学习
    Jms规范学习
    Nginx的相关问题
    keepalived+Nginx实现主备保障Nginx的高可用。
  • 原文地址：https://www.cnblogs.com/achievec/p/5617112.html
Copyright © 2011-2022 走看看