javascript每日一练

1、弹性运动

　　运动原理：加速运动+减速运动+摩擦运动；

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}

 </style>

 <script>

 window.onload = function()

 {

     var oBtn = document.getElementById('btn1');

     var oDiv = document.getElementById('div1');

     oBtn.onclick = function()

     {

         startMove(oDiv, 300);

     };

 };

 var iSpeed = 0;

 var left = 0;

 function startMove(obj, iTarget)

 {

     clearInterval(obj.timer);

     obj.timer = setInterval(function(){

         iSpeed += (iTarget - obj.offsetLeft)/5;

         iSpeed *= 0.7;

         left += iSpeed;

         if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){

             clearInterval(obj.timer);

             obj.style.left = iTarget + 'px';

         }else{

             obj.style.left = obj.offsetLeft + iSpeed + 'px';

         }        

     }, 30);

 }

 </script>

 </head>

 <body>

 <input id="btn1" type="button" value="运动" />

 <div id="div1"></div>

 <div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>

 </body>

 </html>

2、图片放大缩小

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图片放大缩小</title>

<style>

*{ margin:0; padding:0; list-style:none;}

#ulList{ margin:50px;}

#ulList li{ margin:10px; width:100px; height:100px; float:left; background:#ddd; border:1px solid black;}

</style>

<script>

window.onload = function()

{

    var oUl = document.getElementById('ulList');

    var aLi = oUl.getElementsByTagName('li');

    var zIndex = 2;

    //布局转换

    for(var i=0;i<aLi.length;i++){

        aLi[i].style.left = aLi[i].offsetLeft + 'px';

        aLi[i].style.top = aLi[i].offsetTop + 'px';

    }

    for(var i=0;i<aLi.length;i++){

        aLi[i].style.position = 'absolute';

        aLi[i].style.margin = '0';

    }

    for(var i=0;i<aLi.length;i++){

        aLi[i].onmouseover = function()

        {

            this.style.zIndex = zIndex++;

            startMove(this, {width:200, height:200, marginLeft:-50, marginTop:-50});

        };

        aLi[i].onmouseout = function()

        {

            startMove(this, {width:100, height:100, marginLeft:0, marginTop:0});

        };

    }

};

function getStyle(obj, attr)

{

    if(obj.currentStyle){

        return obj.currentStyle[attr];

    }else{

        return getComputedStyle(obj, false)[attr];

    }

}

function startMove(obj, json, fn)

{

    clearInterval(obj.timer);

    obj.timer=setInterval(function (){

        var bStop=true;

        for(var attr in json)

        {

            var iCur=0;

            if(attr=='opacity')

            {

                iCur=parseInt(parseFloat(getStyle(obj, attr))*100);

            }

            else

            {

                iCur=parseInt(getStyle(obj, attr));

            }

            var iSpeed=(json[attr]-iCur)/8;

            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

            if(iCur!=json[attr])

            {

                bStop=false;

            }

            if(attr=='opacity')

            {

                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';

                obj.style.opacity=(iCur+iSpeed)/100;

            }

            else

            {

                obj.style[attr]=iCur+iSpeed+'px';

            }

        }

        if(bStop)

        {

            clearInterval(obj.timer);

            if(fn)

            {

                fn();

            }

        }

    }, 30)

}

</script>

</head>

<body>

<ul id="ulList">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>

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

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 #msgBox{ width:500px; margin:0 auto; padding:5px;}

 .msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}

 .box{ float:left;}

 </style>

 <script>

 window.onload = function()

 {

     var oTxt = document.getElementById('txt1');

     var oBtn = document.getElementById('btn1');

     var oBox = document.getElementById('msgBox');

     oBtn.onclick = function()

     {

         var oMsg = document.createElement('div');

         var aDiv = oBox.getElementsByTagName('div');

         oMsg.className = 'msgList';

         oMsg.innerHTML = oTxt.value;

         oTxt.value = '';

         if(aDiv.length==0){

             oBox.appendChild(oMsg);

         }else{

             oBox.insertBefore(oMsg, aDiv[0]);

         }

         var iH = oMsg.offsetHeight;

         oMsg.style.height = 0;

         startMove(oMsg, {height:iH}, function(){

             startMove(oMsg, {opacity:100});

         });

     };

 };

 function getStyle(obj, attr)

 {

     if(obj.currentStyle){

         return obj.currentStyle;

     }else{

         return getComputedStyle(obj, false)[attr];

     }

 }

 function startMove(obj, json, fn)

 {

     clearInterval(obj.timer);

     obj.timer = setInterval(function(){

         var bStop = true;

         for(var attr in json){

             var iCur = 0;

             if(attr == 'opacity'){

                 iCur = Math.round((parseFloat(getStyle(obj, attr))*100));

             }else{

                 iCur = parseInt(getStyle(obj, attr));

             }

             var iSpeed = (json[attr] - iCur) / 8;

             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

             if(iCur != json[attr]){

                 bStop = false;

             }

             if(attr == 'opacity'){

                 obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed)+')';

                 obj.style.opacity = (iCur + iSpeed) / 100;

             }else{

                 obj.style[attr] = iCur + iSpeed + 'px';

             }

         }

         if(bStop){

             clearInterval(obj.timer);

             if(fn){

                 fn();

             }

         }

     }, 30);

 }

 </script>

 </head>

 <body>

 <div class="box">

     <textarea id="txt1" cols="40" rows="10"></textarea><br />

     <input id="btn1" type="button" value="提交信息" />

 </div>

 <div id="msgBox">

 </div>

 </body>

 </html>

4、无缝滚动

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 *{ margin:0; padding:0; list-style:none;}

 #div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}

 #div1 li{ float:left; padding:10px;}

 #div1 li img{ display:block;}

 #div1 ul{ position:absolute;}

 </style>

 <script>

 window.onload = function()

 {

     var oDiv = document.getElementById('div1');

     var oUl = oDiv.getElementsByTagName('ul')[0];

     var aLi = oUl.getElementsByTagName('li');

     var aBtn = document.getElementsByTagName('input');

     var iSpeed = -3;

     var timer = null;

     oUl.innerHTML += oUl.innerHTML;

     oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

     timer = setInterval(move, 30);

     aBtn[0].onclick = function()

     {

         iSpeed = -3;

     };

     aBtn[1].onclick = function()

     {

         iSpeed = 3;

     };

     oDiv.onmouseover = function()

     {

         clearInterval(timer);

     };

     oDiv.onmouseout = function()

     {

         timer = setInterval(move, 30);

     };

     function move(){

         if(oUl.offsetLeft<-oUl.offsetWidth/2){

             oUl.style.left = '0px';

         }else if(oUl.offsetLeft>0){

             oUl.style.left = -oUl.offsetWidth/2 + 'px';

         }

         oUl.style.left = oUl.offsetLeft + iSpeed + 'px';

     }

 };

 </script>

 </head>

 <body>

 <input type="button" value="向左" />

 <input type="button" value="向右" />

 <div id="div1">

     <ul>

         <li><img src="data:images/1.jpg" width="100" height="100" /></li>

         <li><img src="data:images/2.jpg" width="100" height="100" /></li>

         <li><img src="data:images/3.jpg" width="100" height="100" /></li>

         <li><img src="data:images/4.jpg" width="100" height="100" /></li>

     </ul>

 </div>

 </body>

 </html>

javascript每日一练—运动的更多相关文章

javascript每日一练（十四）——弹性运动
一.弹性运动运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
javascript每日一练（十二）——运动框架
运动框架可以实现多物体任意值运动例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
javascript每日一练（十一）——多物体运动
一.多物体运动需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
javascript每日一练（十）——运动二：缓冲运动
一.缓冲运动实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
javascript每日一练（九）——运动一：匀速运动
一.js的运动匀速运动清除定时器开启定时器运动是否完成:a.运动完成,清除定时器:b.运动未完成继续匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动 ...
javascript每日一练（十三）——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
javascript每日一练（一）——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型常见类型有:number, string, boolean, undefined, object, function ...
javascript每日一练（八）——事件三：默认行为
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...
javascript每日一练（七）——事件二：键盘事件
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

随机推荐

使用repeater开发出现回发或回调参数无效的问题
我的就是因为没有加IsPostBack,导致在页面每次刷新时都生成一遍,造成重复绑定Repeater控件,以致事件验证出错,加上就好了 protected void Page_Load(object ...
IQueryable与IEnumberable的区别(转)
转自 http://www.cnblogs.com/fly_dragon/archive/2011/02/21/1959933.html IEnumerable接口公开枚举器,该枚举器支持在指定类型 ...
protocol(协议)
可以用来声明一大堆方法(不能声明成员变量) 只要某个类遵守了这个协议,就相当于拥有这个协议中的所有方法声明只要父类遵守了某个协议,就相当于子类也遵守了 //定义一个名叫MyProtocol的 ...
SPL的基本使用
SPL是Standard PHP Library(PHP标准库)的缩写. 根据官方定义,它是"a collection of interfaces and classes that are ...
使用md5判断网站内容是否被篡改
该脚本比较简单,判断网站根目录是否被篡改,如果被篡改把篡改的文件发送到管理员邮箱 #!/bin/bash #author:luodi date:// #use md5 to check web sit ...
lua学习笔记(2)-常用调用
assert(loadstring("math.max(7,8,9)"))dofile("scripts/xxx.lua")math.floor()math.r ...
动态创建分页 LINQ+EF
public class Message { public int MessageId { get; set; } public string MessageTitle { get; set; } p ...
mysql memcache
http://blog.csdn.net/newjueqi/article/details/8350643
Delphi 实现无窗口移动（发WM_NCHITTEST消息计算，然后再发WM_SYSCOMMAND消息，带参数SC_DRAGMOVE）
procedure imgListMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer) ...
使用mod_cluster进行apache httpd server和jboss eap 6.1集群配置
本文简单介绍,使用mod_cluster进行apache httpd server和jboss eap 6.1集群配置.本配置在windows上测试通过,linux下应该是一样的.可能要稍作调整.后面 ...

javascript每日一练—运动

1、弹性运动

2、图片放大缩小

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

javascript每日一练—运动的更多相关文章

随机推荐

热门专题