一、图片放大缩小

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>图片放大缩小</title>
  6.  <style>
  7.  *{ margin:0; padding:0; list-style:none;}
  8.  #ulList{ margin:50px;}
  9.  #ulList li{ margin:10px; width:100px; height:100px; float:left; background:#ddd; border:1px solid black;}
  10.  </style>
  11.  <script>
  12.  window.onload = function()
  13.  {
  14.      var oUl = document.getElementById('ulList');
  15.      var aLi = oUl.getElementsByTagName('li');
  16.      var zIndex = 2;
  17.  
  18.      //布局转换
  19.      for(var i=0;i<aLi.length;i++){
  20.          aLi[i].style.left = aLi[i].offsetLeft + 'px';
  21.          aLi[i].style.top = aLi[i].offsetTop + 'px';
  22.      }
  23.  
  24.      for(var i=0;i<aLi.length;i++){
  25.          aLi[i].style.position = 'absolute';
  26.          aLi[i].style.margin = '0';
  27.      }
  28.  
  29.      for(var i=0;i<aLi.length;i++){
  30.          aLi[i].onmouseover = function()
  31.          {
  32.              this.style.zIndex = zIndex++;
  33.              startMove(this, {width:200, height:200, marginLeft:-50, marginTop:-50});
  34.          };
  35.          aLi[i].onmouseout = function()
  36.          {
  37.              startMove(this, {width:100, height:100, marginLeft:0, marginTop:0});
  38.          };
  39.      }
  40.  };
  41.  
  42.  function getStyle(obj, attr)
  43.  {
  44.      if(obj.currentStyle){
  45.          return obj.currentStyle[attr];
  46.      }else{
  47.          return getComputedStyle(obj, false)[attr];
  48.      }
  49.  }
  50.  
  51.  function startMove(obj, json, fn)
  52.  {
  53.      clearInterval(obj.timer);
  54.      obj.timer=setInterval(function (){
  55.          var bStop=true;
  56.          for(var attr in json)
  57.          {
  58.  
  59.              var iCur=0;
  60.  
  61.              if(attr=='opacity')
  62.              {
  63.                  iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
  64.              }
  65.              else
  66.              {
  67.                  iCur=parseInt(getStyle(obj, attr));
  68.              }
  69.  
  70.              var iSpeed=(json[attr]-iCur)/8;
  71.              iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  72.  
  73.              if(iCur!=json[attr])
  74.              {
  75.                  bStop=false;
  76.              }
  77.  
  78.              if(attr=='opacity')
  79.              {
  80.                  obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
  81.                  obj.style.opacity=(iCur+iSpeed)/100;
  82.              }
  83.              else
  84.              {
  85.                  obj.style[attr]=iCur+iSpeed+'px';
  86.              }
  87.          }
  88.  
  89.          if(bStop)
  90.          {
  91.              clearInterval(obj.timer);
  92.  
  93.              if(fn)
  94.              {
  95.                  fn();
  96.              }
  97.          }
  98.      }, 30)
  99.  }
  100.  </script>
  101.  </head>
  102.  
  103.  <body>
  104.  <ul id="ulList">
  105.      <li></li>
  106.      <li></li>
  107.      <li></li>
  108.      <li></li>
  109.      <li></li>
  110.      <li></li>
  111.      <li></li>
  112.      <li></li>
  113.      <li></li>
  114.      <li></li>
  115.      <li></li>
  116.      <li></li>
  117.      <li></li>
  118.      <li></li>
  119.      <li></li>
  120.      <li></li>
  121.      <li></li>
  122.      <li></li>
  123.      <li></li>
  124.      <li></li>
  125.  </ul>
  126.  </body>
  127.  </html>

二、信息滑动淡入加载显示

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  <style>
  7.  #msgBox{ width:500px; margin:0 auto; padding:5px;}
  8.  .msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}
  9.  
  10.  .box{ float:left;}
  11.  </style>
  12.  
  13.  <script>
  14.  window.onload = function()
  15.  {
  16.      var oTxt = document.getElementById('txt1');
  17.      var oBtn = document.getElementById('btn1');
  18.      var oBox = document.getElementById('msgBox');
  19.  
  20.      oBtn.onclick = function()
  21.      {
  22.          var oMsg = document.createElement('div');
  23.          var aDiv = oBox.getElementsByTagName('div');
  24.  
  25.          oMsg.className = 'msgList';
  26.          oMsg.innerHTML = oTxt.value;
  27.          oTxt.value = '';
  28.  
  29.          if(aDiv.length==0){
  30.              oBox.appendChild(oMsg);
  31.          }else{
  32.              oBox.insertBefore(oMsg, aDiv[0]);
  33.          }
  34.  
  35.          var iH = oMsg.offsetHeight;
  36.          oMsg.style.height = 0;
  37.  
  38.          startMove(oMsg, {height:iH}, function(){
  39.              startMove(oMsg, {opacity:100});
  40.          });
  41.  
  42.      };
  43.  };
  44.  
  45.  function getStyle(obj, attr)
  46.  {
  47.      if(obj.currentStyle){
  48.          return obj.currentStyle;
  49.      }else{
  50.          return getComputedStyle(obj, false)[attr];
  51.      }
  52.  }
  53.  
  54.  function startMove(obj, json, fn)
  55.  {
  56.      clearInterval(obj.timer);
  57.      obj.timer = setInterval(function(){
  58.          var bStop = true;
  59.  
  60.          for(var attr in json){
  61.              var iCur = 0;
  62.  
  63.              if(attr == 'opacity'){
  64.                  iCur = Math.round((parseFloat(getStyle(obj, attr))*100));
  65.              }else{
  66.                  iCur = parseInt(getStyle(obj, attr));
  67.              }
  68.  
  69.              var iSpeed = (json[attr] - iCur) / 8;
  70.              iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  71.  
  72.              if(iCur != json[attr]){
  73.                  bStop = false;
  74.              }
  75.  
  76.              if(attr == 'opacity'){
  77.                  obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed)+')';
  78.                  obj.style.opacity = (iCur + iSpeed) / 100;
  79.              }else{
  80.                  obj.style[attr] = iCur + iSpeed + 'px';
  81.              }
  82.          }
  83.  
  84.          if(bStop){
  85.              clearInterval(obj.timer);
  86.  
  87.              if(fn){
  88.                  fn();
  89.              }
  90.          }
  91.      }, 30);
  92.  }
  93.  </script>
  94.  </head>
  95.  
  96.  <body>
  97.  <div class="box">
  98.      <textarea id="txt1" cols="40" rows="10"></textarea><br />
  99.      <input id="btn1" type="button" value="提交信息" />
  100.  </div>
  101.  <div id="msgBox">
  102.  
  103.  </div>
  104.  </body>
  105.  </html>

三、无缝滚动

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  <style>
  7.  *{ margin:0; padding:0; list-style:none;}
  8.  #div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}
  9.  #div1 li{ float:left; padding:10px;}
  10.  #div1 li img{ display:block;}
  11.  #div1 ul{ position:absolute;}
  12.  </style>
  13.  <script>
  14.  window.onload = function()
  15.  {
  16.      var oDiv = document.getElementById('div1');
  17.      var oUl = oDiv.getElementsByTagName('ul')[0];
  18.      var aLi = oUl.getElementsByTagName('li');
  19.      var aBtn = document.getElementsByTagName('input');
  20.      var iSpeed = -3;
  21.      var timer = null;
  22.  
  23.      oUl.innerHTML += oUl.innerHTML;
  24.      oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
  25.  
  26.      timer = setInterval(move, 30);
  27.  
  28.      aBtn[0].onclick = function()
  29.      {
  30.          iSpeed = -3;
  31.      };
  32.  
  33.      aBtn[1].onclick = function()
  34.      {
  35.          iSpeed = 3;
  36.      };
  37.  
  38.      oDiv.onmouseover = function()
  39.      {
  40.          clearInterval(timer);
  41.      };
  42.  
  43.      oDiv.onmouseout = function()
  44.      {
  45.          timer = setInterval(move, 30);
  46.      };
  47.  
  48.      function move(){
  49.          if(oUl.offsetLeft<-oUl.offsetWidth/2){
  50.              oUl.style.left = '0px';
  51.          }else if(oUl.offsetLeft>0){
  52.              oUl.style.left = -oUl.offsetWidth/2 + 'px';
  53.          }
  54.          oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
  55.      }
  56.  
  57.  };
  58.  </script>
  59.  </head>
  60.  
  61.  <body>
  62.  <input type="button" value="向左" />
  63.  <input type="button" value="向右" />
  64.  <div id="div1">
  65.      <ul>
  66.          <li><img src="data:images/1.jpg" width="100" height="100" /></li>
  67.          <li><img src="data:images/2.jpg" width="100" height="100" /></li>
  68.          <li><img src="data:images/3.jpg" width="100" height="100" /></li>
  69.          <li><img src="data:images/4.jpg" width="100" height="100" /></li>
  70.      </ul>
  71.  </div>
  72.  </body>
  73.  </html>

javascript每日一练（十三）——运动实例的更多相关文章

  1. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  2. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  3. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  4. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

  5. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  6. javascript每日一练（九）——运动一：匀速运动

    一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动 ...

  7. javascript每日一练（二）——javascript（函数，数组）

    一.函数 什么是函数 function show(){}//不带参数 function show(){return 123;}//不带参数,有返回值 function show(arg1, arg2, ...

  8. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  9. javascript每日一练（八）——事件三：默认行为

    一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...

随机推荐

  1. Android JNI入门第二篇——Java参数类型与本地参数类型对照

    前面一篇通过简单的例子介绍了android中JNI的使用.这一篇从基础上了解一些Java参数类型与本地参数类型区别. 1)        java中的返回值void和JNI中的void是完全对应的哦! ...

  2. MVC3.0部署问题小结

    环境:MVC3.0,IIS7 Mvc3.0的部署除像正常部署aspx程序一样外,另外还需要注意的几点:1. 安装MVC3.0 确保服务器上安装了MVC3.0,默认版本是“3.0.20105.0” 2. ...

  3. 快速构建ASP.NET MVC Admin主页

    前言 后台开发人员一般不喜欢调样式,搞半天样式出不来,还要考虑各种浏览器兼容,费心费力不讨好,还好互联网时代有大量的资源共享,避免我们从零开始,现在就来看怎么快速构建一个ASP.NET MVC后台管理 ...

  4. C++学习之虚继承

    http://blog.csdn.net/wangxingbao4227/article/details/6772579 C++中虚拟继承的概念 为了解决从不同途径继承来的同名的数据成员在内存中有不同 ...

  5. Python之美[从菜鸟到高手]--urlparse源码分析

    urlparse是用来解析url格式的,url格式如下:protocol :// hostname[:port] / path / [;parameters][?query]#fragment,其中; ...

  6. C#学习日记之数据库连接

    一.webconfig设置和参数解释 在C#中新建一个网站时,webconfig文件中会有一个默认的数据库连接语句,如下 <connectionStrings> <add name= ...

  7. Oracle 字段是多个值的字符串的查询处理

    1.创建两张表一张用户表(T_User),一张兴趣小组表T_Group,其中小组成员字段存储用户ID列表以逗号隔开, 表:T_User 编号(F_ID) 名称(用户名) 1 张三 2 李四 3 王五 ...

  8. myeclipse部署时An internal error occurred 错误的几种情况

    myecplise上将工程部署到应用下时,经常出现 An internal error occurred during: "Add Deployment". java.lang.N ...

  9. 本地机apache配置基于域名的虚拟主机详解

    1.打开apache的httpd.conf文件,找到# Virtual hosts#Include conf/extra/httpd-vhosts.conf这一段把Include conf/extra ...

  10. PHP中magic_quotes_gpc和 magic_quotes_runtime区别及其反斜线转义问题

    php中关于反斜线转义: php中数据的魔法引用函数 magic_quotes_gpc  或 magic_quotes_runtime      设置为on时,当数据遇到 单引号' 和 双引号&quo ...