运动框架中级

多个物体同时运动

•例子：多个Div，鼠标移入变宽

–单定时器，存在问题

–每个Div一个定时器

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div {width:100px; height:50px; background:red; margin-top:50px;}
</style>
<script>
window.onload=function()
{
    var aDiv=document.getElementsByTagName(‘div‘);
    var i=0;

    for(i=0; i<aDiv.length; i++)
    {
        aDiv[i].timer=null;
        aDiv[i].onmouseover=function()
        {
            startMove(this, 3000);
            }
        aDiv[i].onmouseout=function()
        {
            startMove(this, 100);
            }
        }
    }
function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        //算速度
        var iSpeed=(iTarget-obj.offsetWidth)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        //判断
        if(obj.offsetWidth==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            obj.style.width=obj.offsetWidth+iSpeed+‘px‘;
        }
    }, 30)
}

</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

large div onclick

<!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>
#div1 {width:100px; height:100px; background:red; border:1px solid black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
setInterval(function (){
    var oDiv=document.getElementById(‘div1‘);
    //没转换成整数，会变成+1
    oDiv.style.width=oDiv.offsetWidth-1+‘px‘;
}, 30);

</script>
</head>

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

large div onclick 2

<!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>
#div1 {width:100px; height:100px; background:red; border:1px solid black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//获取行间样式的函数
function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}

setInterval(function (){
    var oDiv=document.getElementById(‘div1‘);

    //oDiv.style.width=oDiv.offsetWidth-1+‘px‘;
    oDiv.style.width=parseInt(getStyle(oDiv, ‘width‘))-1+‘px‘;
}, 30);

</script>
</head>

<body>

large div onclick 3

多物体运动框架

•定时器作为物体的属性

•参数的传递：物体、目标值

•例子：多个Div淡入淡出

–所有东西都不能公用

–属性与运动对象绑定：速度、其他属性值（如透明度等）

<!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>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);

    oDiv.onmouseover=function ()
    {
        startMove(oDiv, ‘opacity‘, 100);
    }

    oDiv.onmouseout=function ()
    {
        startMove(oDiv, ‘opacity‘, 30);
    }
}
//获取行间样式
function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}
//判断 对象 属性 数值的函数
function startMove(obj, attr, iTarget)
{
    //开启单个定时器
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var iCur=0;
        //判断属性是不是透明度
        if(attr==‘opacity‘)
        {
            iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
        }
        else
        {
            iCur=parseInt(getStyle(obj, attr));
        }
        //判断速度
        var iSpeed=(iTarget-iCur)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

        //终止条件
        if(iCur==iTarget)
        {
            clearInterval(obj.timer);
        }
        //不终止判断
        else
        {
            //把以前转换数值转换过来
            if(attr==‘opacity‘)
            {
                obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
                obj.style.opacity=(iCur+iSpeed)/100;

                document.getElementById(‘txt1‘).value=obj.style.opacity;
            }
            else
            {
                //继续加
                obj.style[attr]=iCur+iSpeed+‘px‘;
            }
        }
    }, 30)
}

</script>
</head>

moveup moveout div

loffset属性的Bug

•有边框的Div变宽

–用currentStyle代替offset

l原有运动框架的问题

•只能让某个值运动起来

•如果想让其他值运动起来，要修改程序

l扩展的运动框架

•运动属性作为参数

•封装opacity

–小数的问题

l效果思路

•两边的按钮——淡入淡出

•大图下拉——层级、高度变化

•下方的li——多物体淡入淡出

•下方的Ul——位置计算

l左右按钮

•淡入淡出

–鼠标移到按钮上，按钮会消失

»层级问题

»按钮和遮罩上都得加上事件

l下方Li效果

•点击切换大图——选项卡

•Li淡入淡出——移入移出

•Ul移动——位置计算

l大图片切换

•图片层级——zIndex一直加1

•图片下拉效果(运动框架)

–可以改为淡入淡出

l加入自动播放

•和选项卡一样

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果 —— www.miaov.com 妙味课堂</title>
<link rel="stylesheet" type="text/css" href="miao_style.css">
<script src="../move.js"></script>
<script>
function getByClass(oParent, sClass)
{
    var aEle=document.getElementsByTagName(‘*‘);
    var i=0;
    var aResult=[];

    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aResult.push(aEle[i]);
        }
    }

    return aResult;
}

window.onload=function ()
{
    var oDiv=document.getElementById(‘playeimages‘);
    var oBtnPrev=getByClass(oDiv, ‘prev‘)[0];
    var oBtnNext=getByClass(oDiv, ‘next‘)[0];
    var oMarkLeft=getByClass(oDiv, ‘mark_left‘)[0];
    var oMarkRight=getByClass(oDiv, ‘mark_right‘)[0];

    var oSmallUl=getByClass(oDiv, ‘small_pic‘)[0].getElementsByTagName(‘ul‘)[0];
    var aSmallLi=oSmallUl.getElementsByTagName(‘li‘);
    var oBigUl=getByClass(oDiv, ‘big_pic‘)[0];
    var aBigLi=oBigUl.getElementsByTagName(‘li‘);
    var iNow=0;
    var iMinZindex=2;
    var i=0;

    oSmallUl.style.width=aSmallLi.length*aSmallLi[0].offsetWidth+‘px‘;

    //上面的左右按钮
    oBtnPrev.onmouseover=oMarkLeft.onmouseover=function ()
    {
        startMove(oBtnPrev, ‘opacity‘, 100);
    }

    oBtnPrev.onmouseout=oMarkLeft.onmouseout=function ()
    {
        startMove(oBtnPrev, ‘opacity‘, 0);
    }

    oBtnNext.onmouseover=oMarkRight.onmouseover=function ()
    {
        startMove(oBtnNext, ‘opacity‘, 100);
    }

    oBtnNext.onmouseout=oMarkRight.onmouseout=function ()
    {
        startMove(oBtnNext, ‘opacity‘, 0);
    }

    //小图点击，大图显示
    for(i=0;i<aSmallLi.length;i++)
    {
        aSmallLi[i].index=i;
        aSmallLi[i].onmouseover=function ()
        {
            startMove(this, ‘opacity‘, 100);
        }
        aSmallLi[i].onmouseout=function ()
        {
            if(this.index!=iNow)
            {
                startMove(this, ‘opacity‘, 60);
            }
        }

        aSmallLi[i].onclick=function ()
        {
            if(this.index==iNow)return;
            iNow=this.index;

            tab();
        }

        function tab()
        {
            for(i=0;i<aSmallLi.length;i++)
            {
                startMove(aSmallLi[i], ‘opacity‘, 60);
            }
            startMove(aSmallLi[iNow], ‘opacity‘, 100);
            aBigLi[iNow].style.zIndex=iMinZindex++;
            aBigLi[iNow].style.height=0;

            startMove(aBigLi[iNow], ‘height‘, oBigUl.offsetHeight);

            if(iNow==0)
            {
                startMove(oSmallUl, ‘left‘, 0);
            }
            else if(iNow==aSmallLi.length-1)
            {
                startMove(oSmallUl, ‘left‘, -(iNow-2)*aSmallLi[0].offsetWidth);
            }
            else
            {
                startMove(oSmallUl, ‘left‘, -(iNow-1)*aSmallLi[0].offsetWidth);
            }
        }

        oBtnPrev.onclick=function ()
        {
            iNow--;
            if(iNow==-1)
            {
                iNow=aSmallLi.length-1;
            }

            tab();
        }

        oBtnNext.onclick=function ()
        {
            iNow++;
            if(iNow==aSmallLi.length)
            {
                iNow=0;
            }

            tab();
        }
    }
}
</script>
</head>

<body>
<div id="playimages" class="play">
    <ul class="big_pic">
        <div class="prev"></div>
        <div class="next"></div>

        <div class="text">加载图片说明……</div>
        <div class="length">计算图片数量……</div>

        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>
        <div class="bg"></div>

        <li style="z-index:1;"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
        <li><img src="images/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>

</body>

picture onclick

body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }

.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }

.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; }

.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; cursor: pointer; filter:alpha(opacity: 0); opacity:0; }
.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001;cursor: pointer; filter:alpha(opacity: 0); opacity:0; }

.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }
.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }

picture onclick

l多物体运动

l任意值运动

时间： 2024-10-11 23:18:21

运动框架中级的相关文章

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background

Farseer.net轻量级开源框架 中级篇：数据库切换

导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 动态数据库访问 下一篇:Farseer.net轻量级开源框架 中级篇: SQL执行报告 上文中讲述了,在项目运行过程中,如何通过代码动态改变数据库的访问,这种方式更加倾向于实体类相同,有多个相同的表结构. 本篇中讲述的是,如何快速切换不同的数据库.比如你现在使用在使用SqlServer 哪天数据库老板心血来潮,让你换成Oracle了,怎么办? 这种数据库的切换在ORM中能明显突出

封装运动框架单个属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>封装运动框架的单个属性</title> <style> div{ width: 100px; height: 100px; font-weight:bold;">pink; position: absolute; left: 10px

带无缝滚动的轮播图（含JS运动框架）

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)

JS 之完美运动框架

完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; oDiv.onmouseover=function(){ move(this,{width:200,height:200}); } } function getStyle(obj,attr){ if (obj.currentStyle) { r

JavaScript的运动框架学习总结

一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 7. 实现完美运动框架 二.内容 1. 入门案例——实现匀速运动 ①. 要求:只要简单的实现传入的对象和运动的最终目标,便能操作该对象的left属性的大小匀速的变化到目标大小. ②. 具体代码: 1 <!DOCTYPE html> 2 <html lang="en">

JS的完美运动框架

function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } //注意:在多物体运动框架中,所有东西都不能公用 !否则出问题,BUG:将必要的变量加到物体的属性中就行.即:属性与运动对象绑定:速度.其他属性值(如透明度等等) function startMove(obj, jso

多用途运动框架

该运动框架可以用于改变宽度.高度.字体大小.透明度.Left.top等值 先上一个获取真正样式的函数 //定义getStyle函数,获取真正样式 function getStyle(obj,attr){ if(obj.currentStyle){//兼容IE return obj.currentStyle[attr]; }else if(window.getComputedStyle(obj,false)){//兼容FF return getComputedStyle(obj,false)[at

【repost】JavaScript运动框架之速度时间版本

一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之后停止 位移 top,left 折叠 width,height 淡入淡出 opacity 时间有关系 setInterval setTimeout 用javascript直接获取行间样式很容易,但如果要获取非行间样式那我们只能借助函数了.我这里编写了一个名为getStyle的函数,专门处理取非行间的