运动高级--框架开发

链式运动框架开发

回调函数

•运动停止时，执行函数

/**
 * @author miaov
 */
//获取行间样式
function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}
//计算对象 属性 数值 未执行函数

function startMove(obj, attr, iTarget, fn)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        //1.取当前的值
        var iCur=0;
        //判断对象是不是opacity 透明度
        if(attr==‘opacity‘)
        {
            iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
        }
        else
        {
            iCur=parseInt(getStyle(obj, attr));
        }

        //2.算速度
        var iSpeed=(iTarget-iCur)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

        //3.检测停止
        if(iCur==iTarget)
        {
            clearInterval(obj.timer);

            if(fn)
            {
                fn();
            }
        }
        else
        {
            if(attr==‘opacity‘)
            {
                obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
                obj.style.opacity=(iCur+iSpeed)/100;
            }
            else
            {
                obj.style[attr]=iCur+iSpeed+‘px‘;
            }
        }
    }, 30)
}

move

•运动停止时，开始下一次运动

•例子：土豆网右下角菜单

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;font: 12px/1.25 tahoma,arial,宋体,sans-serif;}
li{list-style:none;}
a{text-decoration:none;}
body{width:100%;height:100%;background:#000;_position:relative;overflow:hidden;}
.page{position:fixed;_position:absolute;right:0;bottom:0;}
#miaov_bottom{width:203px;height: 50px;background:url(minibar.png) no-repeat 0 0;position:absolute;right:-165px;bottom:0;z-index: 20001;}
#nav{height: 22px;margin: 5px 0 0 43px;width: 125px;}
#nav li{float: left;width: 25px;}
#nav li a{display: block;height: 22px;width: 25px;}
#nav li .show,#nav li a:hover{background: url(minibar.png) no-repeat 0 -51px;}
#nav .li_1 .show,#nav .li_1 a:hover{background-position:-25px -51px}
#nav .li_2 .show,#nav .li_2 a:hover{background-position:-50px -51px}
#nav .li_3 .show,#nav .li_3 a:hover{background-position:-75px -51px}
#nav .li_4 .show,#nav .li_4 a:hover{background-position:-100px -51px}
.miaov{color: #FFFFFF;height: 16px;margin: 4px 0 0 8px;overflow: hidden;width: 160px;}
#but{ bottom: 0;display: block;height: 50px;position: absolute;right: 0;width: 33px;z-index:20002;}
.but_hide{background: url(minibar.png) no-repeat -170px 0;}
.but_hide:hover{background-position:-203px 0;}
.but_show{background: url(minibar.png) no-repeat -236px 0;}
.but_show:hover{background-position:-269px 0;}
#miaov_box{bottom:-315px;display:none;height: 315px;padding: 0 0 48px;position: absolute;right: 1px;width: 200px; z-index: 20000;}
.bg{background: url(mini_jpgs.jpg) no-repeat 0 0;height: 315px;opacity: 0.9;position: absolute;right: 0;top: 0;width: 200px;}
.nav2_bg{bottom: 48px;height: 176px;left: 0;position: absolute;width: 34px;background: url(mini_jpgs.jpg) no-repeat 0 -139px;}
#list_nav{background: url(minibar.png) no-repeat scroll 0 -255px transparent;height: 139px;left: 0;position: absolute;top: 2px;width: 34px;}
#list_nav a{ color: #FFFFFF;display: block;height: 27px;line-height: 25px;text-align: center;text-decoration: none;}
#list_nav .show{color: #FF9900;}
#list_nav a:hover{color:#FFFF00;}
.clos{ background: url(minibar.png) no-repeat 0 -76px ;cursor: pointer;height: 9px;position: absolute;right: 10px;top: 14px;width: 9px;}
.box_right{color: #FFFFFF;
    height: 285px;
    overflow: hidden;
    position: absolute;
    right: 6px;
    top: 28px;
    width: 150px;}
</style>
<script type="text/javascript" src="../move.js"></script>
<script type="text/javascript">
window.onload=function ()
{
    var oBtnShow=document.getElementById(‘but‘);
    var oBtnClose=document.getElementById(‘btn_close‘);
    var oBottom=document.getElementById(‘miaov_bottom‘);
    var oBox=document.getElementById(‘miaov_box‘);

    oBtnShow.onclick=function ()
    {
        startMove(oBottom, ‘right‘, 0, function (){
            oBox.style.display=‘block‘;
            startMove(oBox, ‘bottom‘, 0);
        });
    };

    oBtnClose.onclick=function ()
    {
        startMove(oBox, ‘bottom‘, -315, function (){
            oBox.style.display=‘none‘;
            startMove(oBottom, ‘right‘, -165);
        });
    };
};
</script>
</head>
<body>
<div class="page">
    <div id="miaov_bottom">
        <ul id=‘nav‘>
            <li><a href="###"></a></li>
            <li class=‘li_1‘><a href="###"></a></li>
            <li class=‘li_2‘><a href="###"></a></li>
            <li class=‘li_3‘><a href="###"></a></li>
            <li class=‘li_4‘><a href="###"></a></li>
        </ul>
        <h2 class="miaov">妙味课堂 www.miaov.com</h2>
    </div>
    <a class="but_show" id="but" href="###"></a>
    <div id="miaov_box">
        <div class="bg"></div>
        <div class="nav2_bg"></div>
        <ul id="list_nav">
            <li><a  class="show" href="http://www.miaov.com" target="_blank">天气</a></li>
            <li class="tab2"><a href="http://www.miaov.com" target="_blank">星座</a></li>
            <li class="tab3"><a href="http://www.miaov.com" target="_blank">排行</a></li>
            <li class="tab4"><a href="http://www.miaov.com" target="_blank">热点</a></li>
            <li class="tab5"><a href="http://www.miaov.com" target="_blank">直播</a></li>
        </ul>
        <a class=‘clos‘ id="btn_close"></a>
        <div class="box_right">
            <div>北京</div>
                <div>
                    <div>
                        <strong><em>今天</em> (周二)</strong>
                        <img title="晴" src="01.gif" class="pic">
                    </div>
                    <span>-1~10C°</span>
                    <span>晴</span>
                    <span>微风小于3级</span>
                </div>
                <div >
                    <div>
                        <strong><em>明天</em> (周三)</strong>
                        <img title="多云" src="02.gif" class="pic">
                    </div>
                    <span>0~11C°</span>
                    <span>多云</span>
                    <span>北风3-4级</span>
                </div>
                <div>
                    <div>
                        <strong><em>后天</em> (周四)</strong>
                        <img title="晴" src="01.gif" class="pic">
                    </div>
                    <span>-1~12C°</span>
                    <span>晴</span>
                    <span>北风3-4级 转 微风小于3级</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

menus

完美运动框架开发

l多个值同时变化

•setStyle同时设置多个属性

–参数传递

»Json的使用

»for in遍历属性

支持对象传入多个属性！

/**
 * @author miaov
 */
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)
        {
            //1.取当前的值
            var iCur=0;

            if(attr==‘opacity‘)
            {
                iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                iCur=parseInt(getStyle(obj, attr));
            }

            //2.算速度
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

            //3.检测停止
            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)
}

move2

•运用到运动框架

•检测运动停止

–标志变量

•例子：伸缩同时淡入淡出的菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
#ul1 li {width:100px; height:20px; line-height:20px; text-align:center; position:relative; float:left; list-style:none; background:#9F3; border:1px solid #660;}
#ul1 li div {background:#CCC; overflow:hidden; position:absolute; top:20px; width:100%; height:0; filter:alpha(opacity:0); opacity:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="move2.js"></script>
<script>
window.onload=function ()
{
    var oUl=document.getElementById(‘ul1‘);
    var aLi=oUl.getElementsByTagName(‘li‘);
    var i=0;

    for(i=0;i<aLi.length;i++)
    {  //获取li中的鼠标抚摸事件
        aLi[i].onmouseover=function ()
        {
            //获取当前抚摸这个li的事件内的div
            var oDiv=this.getElementsByTagName(‘div‘)[0];
               //设置属性
            oDiv.style.height=‘auto‘;
            var iHeight=oDiv.offsetHeight;
            oDiv.style.height=0;
                 //用引进来的函数设置透明度
            startMove(oDiv, {opacity: 100, height:iHeight});
        };
             //获取当前鼠标抬起事件
        aLi[i].onmouseout=function ()
        {
            var oDiv=this.getElementsByTagName(‘div‘)[0];
          //把div隐藏
            startMove(oDiv, {opacity: 0, height: 0});
        };
    }
};
</script>
</head>

<body>
<ul id="ul1">
    <li>
        首页
        <div>
            我的论坛<br />
            我的微博
            我的博客<br />
            我的笔记
        </div>
    </li>
    <li>
        产品
        <div>
            销量<br />
            品质<br />
质量<br />
二维码<br />
是否合格<br />
            vsfd<br />
            sadfsd
        </div>
    </li>
    <li>
        关于
        <div>
            网站问题<br />
            网站报错  <br />
            网站漏洞
            举报网站<br />
            联系我们
        </div>
    </li>
</ul>
</body>
</html>

get move

运动框架总结

l运动框架演变过程

•startMove(iTarget)  运动框架

•startMove(obj, iTarget)  多物体

•startMove(obj, attr, iTarget)  任意值

•startMove(obj, attr, iTarget, fn)  链式运动

•startMove(obj, json)  多值运动

•startMove(obj, json, fn)  完美运动框架

运动框架开发应用

•例子：多图片展开、收缩

–布局转换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
#ul1 {width:366px; margin:0 auto; position:relative;}
#ul1 li {list-style:none; width:100px; height:100px; background:#CCC; border:1px solid black; float:left; margin:10px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title
<script src="move2.js"></script>
//记得加载函数
<script>
window.onload=function ()
{
    var oUl=document.getElementById(‘ul1‘);
    var aLi=oUl.getElementsByTagName(‘li‘);
    var i=0;

    //1.布局转换
    for(i=0;i<aLi.length;i++)
    {
        //aLi[i].innerHTML=‘left:‘+aLi[i].offsetLeft+‘, top:‘+aLi[i].offsetTop;
        aLi[i].style.left=aLi[i].offsetLeft+‘px‘;
        aLi[i].style.top=aLi[i].offsetTop+‘px‘;
    }
    //2加绝对定位
    for(i=0;i<aLi.length;i++)
    {
        aLi[i].style.position=‘absolute‘;
        aLi[i].style.margin=‘0‘;
    }

    //3.加事件
    for(i=0;i<aLi.length;i++)
    {
        aLi[i].onmouseover=function ()
        {
            startMove(this, {width: 200, height: 200, marginLeft: -50, marginTop: -50});
        };

        aLi[i].onmouseout=function ()
        {
            startMove(this, {width: 100, height: 100, marginLeft: 0, marginTop: 0});
        };
    }
};
</script>
</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

onmove picture

抚摸图片后实现效果

原理 抚摸到哪个设那个index+1；

•例子：新浪微博

–链式运动

引入move.js

<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);

    oDiv.onmouseover=function ()
    {
        //函数封装里面加事件
        startMove(oDiv, ‘width‘, 300, function (){
            startMove(oDiv, ‘height‘, 300, function (){
                startMove(oDiv, ‘opacity‘, 100);
            });
        });
    };

    oDiv.onmouseout=function ()
    {
        startMove(oDiv, ‘opacity‘, 30, function (){
            startMove(oDiv, ‘height‘, 100, function (){
                startMove(oDiv, ‘width‘, 100);
            });
        });
    };
};
</script>

moves

先变宽在变高，

•无缝滚动

–走到一半拉回来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
body{ background:#9F0;}
#div1 {position:relative; border:1px solid black; width:680px; height:132px; margin:10px auto; overflow:hidden;}
#div1 ul {position:absolute; left:0; background:#CCC;}
#div1 ul li {list-style:none; float:left; width:150px; height:112px; padding:10px;}
#div1 ul li img {width:150px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
    var aLi=oUl.getElementsByTagName(‘li‘);
    //获取小箭头
    var aA=document.getElementsByTagName(‘a‘);
    var timer=null;
    var iSpeed=10;
    //动态设置ul的宽
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=aLi.length*aLi[0].offsetWidth+‘px‘;

    function fnMove()
    {
        //跑一半拉回来
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left=0;
        }
        else if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+‘px‘;
        }
        oUl.style.left=oUl.offsetLeft+iSpeed+‘px‘;
    }

    timer=setInterval(fnMove, 30);
    //添加小箭头事件
    aA[0].onclick=function ()
    {
        iSpeed=-10;
    };
    aA[1].onclick=function ()
    {
        iSpeed=10;
    };
    //添加鼠标移入停止事件
    oDiv.onmouseover=function ()
    {
        clearInterval(timer);
    };
    //添加移除开始移动
    oDiv.onmouseout=function ()
    {
        timer=setInterval(fnMove, 30);
    };
};
</script>
</head>

<body>
<a href="javascript:;">←</a>
<a href="javascript:;">→</a>
<div id="div1">
    <ul>
        <li><img src="1.jpg" /></li>
        <li><img src="2.jpg" /></li>
        <li><img src="3.jpg" /></li>
        <li><img src="4.jpg" /></li>
    </ul>
</div>
</body>
</html>

rolling picture

实现效果，鼠标移入图片则暂停！移除循环图片

点击左右箭头，设置图片移动方向

本节重点

l链式运动

l完美运动

l布局转换

l无缝滚动

时间： 2024-10-10 17:47:40

运动高级--框架开发的相关文章

C高级 框架开发中红黑树结构

引言  -- 红黑树历史 红黑树是数据结构学习中一道卡. 底层库容器中必不可少的算法. 历经各种实战运用,性能有保障. 同样红黑树不好理解, 就算理解了, 代码也不好写. 就算写了, 工程库也难构建. 关于红黑树基础讲解推荐看下面博主的红黑树博文系列,感觉不错. 红黑树(一)之 原理和算法详细介绍 对于红黑树小背景简介摘抄如下: 红黑树(英语:Red–black tree)是一种自平衡二叉查找树,是在计算机科学中用到的一种数据结构,典型的用途是实现关联数组.它是在1972年由鲁道夫·贝尔发明的,

如何定义和区分高级软件开发工程师

在软件开发领域,高级开发工程师通常是指那些编写代码超过 3 年的人.这些人可能会被放到领导的位置,但经常会产生非常糟糕的结果.Matt Briggs 是一名高级开发工程师兼 Scrum 管理员.他认为,单纯使用年限来划分开发人员存在问题,两个同样具有 10 年开发经验的开发人员可能大不相同.近日,他发表了一篇博文,根据开发者所能发挥的作用划分软件开发工程师的成长阶段. 初级开发工程师 初级开发工程师通常是指那些刚刚结束学生生涯的开发者.他们以为自己什么都懂,但是面临问题时却又一筹莫展.他们不熟悉

Yii2.0高级框架数据库增删改查的一些操作（转）

yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 ----------------------------------------------------------------------------------------------------- User::find()->all();    //返回所有用户数据:User::findOne($id);   //返回 主键 id=1  的一条数

Yii2.0高级框架数据库增删改查的一些操作

yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 ----------------------------------------------------------------------------------------------------- User::find()->all();    //返回所有用户数据:User::findOne($id);   //返回 主键 id=1  的一条数

【FastDev4Android框架开发】RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout(三十一)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 话说RecyclerView已经面市很久,也在很多应用中得到广泛的使用,在整个开发者圈子里面也拥有很不错的口碑,那说明RecyclerView拥有比ListView,GridVi

如何定义和区分高级软件开发工程师？

原文地址 看来,我已经不只是高级的啦~ 在软件开发领域,高级开发工程师通常是指那些编写代码超过3年的人.这些人可能会被放到领导的位置,但经常会产生非常糟糕的结果.Matt Briggs是一名高级开发工程师兼Scrum管理员.他认为,单纯使用年限来划分开发人员存在问题,两个同样具有10年开发经验的开发人员可能大不相同.近日,他发表了一篇博文,根据开发者所能发挥的作用划分软件开发工程师的成长阶段. 初级开发工程师 初级开发工程师通常是指那些刚刚结束学生生涯的开发者.他们以为自己什么都懂,但是面临问题

直播|python大咖实力领跑，分分钟扫盲电商网站自动化测试框架开发

作为大数据时代的软件测试工程师--你应该会的更多,还在单纯的只会点页 面测试BUG?又或者只懂功能测试技能.接口功能测试技能.自动化测试.性 能测试.敏捷测试.大数据其中某一个?是时候掌握新技能了,康忙北鼻! [前言] Selenium一直以来都被视作测试人员成功向自动化脚本开发转型的首选入门, 随着python语言的火热程度的持续攀升,基于python+Selenium实现自动化脚本 的开发也备受业内测试人员的追捧. 本课程基于Selenium3,python及BDD框架,结合大型电商京东实战

Django高级实战 开发企业级问答网站

第1章 Django高级实战-开发企业级问答网站课程项目结合:需求分析/Django高级用法/算法/设计模式/TestCase测试/云计算服务.本章将具体介绍课程的学习内容和目标,描述问答网站的业务场景.用途.重要性.实用性.学习本课程需要具备的知识,项目使用的技术栈,重难点:让同学们对课程的技术范畴,广度和难度有心理准备.演示网站的所有功能,结果导向,一目了然.... 第2章 Django项目的一些最佳实践最佳实践目的是使生产或管理实践的结果达到最优,并减少出错的可能性.本章讲的一些实践方法在

高级Java开发人员最常访问的几个网站

这是高级Java开发人员最常访问的几个网站.?这些网站提供新闻,一般问题或面试问题的答案,精彩的讲座等.质量是优秀网站的关键因素,这此网站都有较高的质量内容.下面逐一介绍: 1. Stackoverflow Stackoverflow.com可能是编程世界中最受欢迎的网站.有数百万个好问题和答案.学习API或编程语言通常依赖于代码示例,stackoverflow有很多代码段. stackoverflow的另一件好事是它是社交的.您可以在某些标签下查看问题,例如 "java"和"