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

随机推荐

Hadoop安装（2）安装hadoop 前的centos 设置
将虚拟机网络连接设为:Bridged 添加用户:hadoop,设置密码.关闭防火墙,selinux.暂且不关闭不需要的任务. 参照:http://www.cnblogs.com/xia520pi/ar ...
Windows SQL Server 2012 R2 安装Intel I217-V/I218-V网卡驱动(转)
1.下载Intel官方驱动: https://downloadcenter.intel.com/Detail_Desc.aspx?agr=Y&DwnldID=23071&lang=zh ...
STL_函数模板
#include <iostream>#include <string>using namespace std; #define MAX(T) \ T max_##T (T x ...
eclipse 使用maven 创建纯spring mvc项目
接着eclipse 使用maven 创建web3.1项目创建完成后, 讲spring mvc加入到项目中先修改pom.xml文件注意红色字部分 <project xmlns="h ...
WebApp 里Meta标签大全
1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...
PHPMailer发送邮件方法
/** * * 测试邮件发送s * @param 服务器 $Host * @param 端口 $Port * @param 昵称 $Fromname * @param 身份验证用户名 $Usernam ...
安装程序时出现错误代码0x80070422
通过win10应用商店,下载应用,安装时出现错误代码0x80070422. 需要打开services.msc,将windows update服务打开.
Linux查看所有用户用什么命令1
用过Linux系统的人都知道,Linux系统查看用户不是会Windows那样,鼠标右键看我的电脑属性,然后看计算机用户和组即可. 那么Linux操作系统里查看所有用户该怎么办呢?用命令.其实用命令 ...
手工制作OTG连接线让小白实现OTG功能
说到OTG功能,很重要的一点是,现在不少网上的720P高清视频体积已经超过4GB,我的小白也支持exFat及NTFS磁盘格式,可存储播放大于4GB的高清影音文件,也能通过OTG读取播放NTFS格式U盘 ...
如何使用VC++6.0发布程序（即release版本程序）
大家都知道VC编译器默认生成debug版本的程序,但是debug版本程序无法运行在没有安装VC的电脑上, 这就要就我们生成release版本的程序,因为release版本在未安装VC的电脑上也能运行( ...

javascript每日一练—运动

1、弹性运动

2、图片放大缩小

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

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

随机推荐

热门专题