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> ...

随机推荐

CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？
http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...
引言：Canvas绘图API快速入门
引言:Canvas绘图API快速入门在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
js callback函数
A callback is a function that is passed as an argument to another function and is executed after its ...
html form表单提交数据并后台获取
前台: HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) <h ...
Vim 扩展工具 vim-ide (转)
通过简单的配置文件将 vim 打造成专业 ide,支持 mac linux cygwin.看过数篇 vim 配置文件,必要时去定制vim 的插件,将 vim 的 ide 用户体验尽量做到极致. 使用范 ...
xshell4无法使用小键盘问题解决
今天新安装了一个Xshell4.0的客户端,登录linux服务器发现无法使用小键盘进行输入,后来把终端里的——终端类型更改成linux后重新打开标签登录服务器,发现可正常使用.默认的终端类型为:xt ...
js常用DOM操作
在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...
JavaScript的原型
//回顾构造函数 function Box(name, age) { this.name = name; //实例属性 this.age = age; this.run = function() { ...
VS 2012 插件卸载(删除自己安装的插件)
给VS 装了一个插件,装完之后感觉别扭,所以想卸载,[工具]--> [扩展和更新]-->[找到想要卸载的插件点击一下就会出现禁用或卸载]
ASP.NET自定义控件加载资源WebResource问题
最近项目用日期控件,想把My97的资源文件跟TextBox封装成一个DatePicker控件,其实很简单的意见事情,但是还是用了一天多的时间,主要的问题就是解决资源文件加载的问题.通过一天多的努力,得 ...

javascript每日一练—运动

1、弹性运动

2、图片放大缩小

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

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

随机推荐

热门专题