<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()";

 */

【06-23】js动画学习笔记01的更多相关文章

  1. js动画学习笔记

    <html> <head> <meta charest="utf-8"> <title>test</title> < ...

  2. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  3. Redis：学习笔记-01

    Redis:学习笔记-01 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 1. Redis入门 2.1 ...

  4. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

  5. Android动画学习笔记-Android Animation

    Android动画学习笔记-Android Animation   3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...

  6. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  7. Unity Shader序列帧动画学习笔记

    Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...

  8. C++ GUI Qt4学习笔记01

    C++ GUI Qt4学习笔记01   qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...

  9. SaToken学习笔记-01

    SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...

随机推荐

  1. Media Queries 详解

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:  <link href="css/reset.css" rel ...

  2. AngularJS笔记---注册服务

    在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...

  3. 常用算法——排序（三）

    希尔排序法 希尔排序又称为缩小增量排序,也属于插入排序类的算法,是对直接插入排序的一种改进. 基本思想就是:将需要排序的序列划分为若干个较小的序列,对这些序列进行直接插入排序,通过这样的操作可使用需要 ...

  4. 洛谷P1962 斐波那契数列 || P1349 广义斐波那契数列[矩阵乘法]

    P1962 斐波那契数列 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) (n ≥ 2 且 n 为整数 ...

  5. @Autowired 与@Resource的区别

    1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2  @Autowired默认按类型装配(这个注解是属业spring的),默认情况下 ...

  6. IIS上部署Net.Core

    部署: 1.安装vc_redist.x64vc_redist.x64 2.安装DotNetCore.1.0.0.RC2-WindowsHosting 3.安装DotNetCore.1.0.0-SDK. ...

  7. BOM浏览器对象模型

    访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...

  8. 【跟着子迟品 underscore】for ... in 存在的浏览器兼容问题你造吗

    Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...

  9. 吉特仓库管理系统-.NET打印问题总结

    在仓储系统的是使用过程中避免不了的是打印单据,仓库系统中包含很多单据:入库单,出库单,盘点单,调拨单,签收单等等,而且还附带着很多的条码标签的打印.本文在此记录一下一个简单的打印问题处理方式.处理问题 ...

  10. win7/8 访问 访问局域网 默认加载域 而无法成功访问的问题

    运行 gpedit.msc选择 本地计算机策略- 计算机配置-windows设置-安全设置-本地策略-安全选项 其中有个 网络安全:lan管理员身份验证级别 选择 发送LM和NTLM响应