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.  #testOpacity{
  26.      margin-top:50px;
  27.      width:200px;
  28.      height:200px;
  29.      background:red;
  30.      filter:alpha(opacity:30);
  31.      opacity:0.3
  32.  }
  33.  
  34.  #bufferAction{
  35.      margin-top:50px;
  36.      width:200px;
  37.      height:200px;
  38.      background:red;
  39.      position:relative;
  40.      left:-200px;
  41.      top:0;
  42.  }
  43.  #bufferAction span{
  44.      width:20px;
  45.      height:50px;
  46.      background:skyblue;
  47.      position:absolute;
  48.      left:200px;
  49.      top:75px;
  50.  }
  51.  
  52.          </style>
  53.          <title>js动画test</title>
  54.      </head>
  55.      <body>
  56.          <div id="div1">
  57.              <span id="share">分享</span>
  58.          </div>
  59.          <script>
  60.              var div1=document.getElementById("div1");
  61.              div1.onmouseover=function(){
  62.                  startMove(div1,10,0);
  63.              }
  64.              div1.onmouseleave=function(){
  65.                  startMove(div1,-10,-200);
  66.              }
  67.              var timer=null;
  68.              /*使用offsetLeft实现滑动动画*/
  69.              function startMove(obj,speed,target){
  70.                  clearInterval(timer);
  71.                  timer=setInterval(function(){
  72.                      if(obj.offsetLeft==target){
  73.                          clearInterval(timer);
  74.                      }else{
  75.                          obj.style.left=obj.offsetLeft+speed+"px";
  76.                      }
  77.                  },30);
  78.              }
  79.          </script>
  80.  
  81.          <div id="testOpacity">
  82.          </div>
  83.          <script>
  84.              var opacityObj=document.getElementById("testOpacity");
  85.              opacityObj.onmouseover=function(){
  86.                  changeOpacity(this,5,90);
  87.              }
  88.              opacityObj.onmouseleave=function(){
  89.                  changeOpacity(this,5,10);
  90.              }
  91.              var opacityTimer=null;
  92.              /*使用opacity实现渐变*/
  93.              function changeOpacity(obj,speed,target){
  94.                  clearInterval(opacityTimer);
  95.                  var currentOpacity=obj.style.opacity*100;
  96.                  opacityTimer=setInterval(function(){
  97.                      if(target==currentOpacity){
  98.                          clearInterval(opacityTimer);
  99.                      }else{
  100.                          if(target>currentOpacity){
  101.                              speed=Math.abs(speed);
  102.                          }else{
  103.                              speed=-Math.abs(speed);
  104.                          }
  105.                          currentOpacity+=speed;
  106.                          obj.style.opacity=currentOpacity/100;
  107.                          obj.style.filter='alpha(opacity:'+currentOpacity+')';
  108.                      }
  109.                  },30);
  110.              }
  111.          </script>
  112.  
  113.          <div id="bufferAction">
  114.              <span id="bufferActionSpan">分享</span>
  115.          </div>
  116.          <script>
  117.              var opacityObj=document.getElementById("bufferAction");
  118.              opacityObj.onmouseover=function(){
  119.                  bufferAction(this,10,0);
  120.              }
  121.              opacityObj.onmouseleave=function(){
  122.                  bufferAction(this,10,-200);
  123.              }
  124.              var bufferTimer=null;
  125.              /*模拟渐进效果*/
  126.              function bufferAction(obj,speed,target){
  127.                  clearInterval(bufferTimer);
  128.                  speed=speed>0? Math.ceil(speed):Math.floor(speed);
  129.                  bufferTimer=setInterval(function(){
  130.                      if(target==obj.offsetLeft){
  131.                          clearInterval(bufferTimer);
  132.                      }else{
  133.                          if(target>obj.offsetLeft){
  134.                              speed=Math.ceil((target-obj.offsetLeft)/20);
  135.                          }else{
  136.                              speed=Math.floor((target-obj.offsetLeft)/20);
  137.                          }
  138.                          obj.style.left=obj.offsetLeft+speed+"px";
  139.                      }
  140.                  },30);
  141.              }
  142.          </script>
  143.  
  144.      </body>
  145.  
  146.  </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.      window.location="javascript:document.location.reload()";
  9.  */

【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. java中执行系统命令

    java程序中执行系统命令猛击下面的链接看看你就知道怎么用了 http://blog.csdn.net/a19881029/article/details/8063758 http://wuhongy ...

  2. log4j 不同模块输出到不同的文件

    1.实现目标 不同业务的日志信息需要打印到不同的文件中,每天或者每个小时生成一个文件.如,注册的信息打印到register.log,每天凌晨生成一个register-年月日.log文件, 登录信息的日 ...

  3. NOIP2011选择客栈[递推]

    题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖啡店均 ...

  4. 嵌入式Linux驱动学习之路(二十)USB设备驱动

    USB在接入系统的时候,以0的设备ID和主机通信,然后由主机为其分配新的ID. 在主机端,D+和D-都是下拉接地的.而设备端的D-接上拉时,表明此设备为高速设备:12M/s. D+接上拉时则是全速设备 ...

  5. HTML 学习笔记 JavaScript（创建对象）

    原博地址:http://www.cnblogs.com/dolphinX/p/3288118.html JavaScript 有Date Array String等这样的内置对象,功能强大实用简单,但 ...

  6. 为普通Object添加类似AttachedProperty的属性

    为普通Object添加类似AttachedProperty的属性   周银辉 我们知道,在WPF中对应一个DependencyObject,我们很容易通过AttachedProperty来为类型附加一 ...

  7. linux ubuntu14 更改为root用户登录

    设置使用root用户登陆首先要修改root的登陆密码sudo passwd root1.输入sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu ...

  8. knockoutJS学习笔记08：表单域绑定

    前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...

  9. .Net配置中心-Zookeper版

    简介    zookeeper的基本概念和作用这里不做介绍,现在很多的公司都在使用它,说起它的作用,可能最先想到的是配置中心,可以将配置项作为一个node存储在zookeeper中,其他应用可以“关注 ...

  10. 关于 MonoDevelop on Linux 单步调试问题的解决

    在 MonoDevelop 中默认是关闭对外部程序集(.dll)的调试,可通过如下步骤来解决这个问题. 通过菜单[Edit]-[Preferences]-[Debugger]进入到调试器的设置页,把“ ...