`

js 运动方法

    博客分类：
  • js
js 运动 
阅读更多
<!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>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能课堂</title>
    <style type="text/css" >



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

        body { background: #ecfaff; }

        .play { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; }

        .play .text {width:100%; position:absolute; left:0; bottom:0; height:60px;}
        .play .text div {position:absolute; left:0; top:0; width:100%; height:100%; background:black; filter:alpha(opacity:40); opacity:0.4; z-index:99;}
        .play .text span {position:absolute; left:0; top:0; width:100%; height:100%; line-height:60px; color:white; z-index:999; text-align:center; font-size:20px;}

        ol { position: absolute; right: 5px; bottom: 5px; z-index: 99999; }
        ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
        .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }

        ul { position: absolute; top: 0; left: 0; z-index: 1; }
        ul li { width: 470px; height: 150px; float: left; }
        ul img { float: left; width: 470px; height: 150px; }
    </style>

    <script >
        function getStyle(obj,name)
        {
            if(obj.currentStyle)
            {
                return obj.currentStyle[name];
            }
            else
            {
                return getComputedStyle(obj,false)[name];
            }
        }
        function move(obj,json,fnEnd)
        {
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var bStop =true;
                for(var attr in json)
                {
                    var cur=0;
                    if(attr=='opacity')
                    {
                        cur=Math.round(parseFloat(getStyle(obj,attr))*100);
                    }
                    else
                    {
                        cur=parseInt(getStyle(obj,attr));
                    }
                    var speed =(json[attr]-cur)/6;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(cur!=json[attr])
                    {
                        bStop=false;
                    }
                    if(attr=='opacity')
                    {
                        obj.style.filter='alpha(opcity:'+(cur+speed)+')';
                        obj.style.opacity=(cur+speed)/100;
                    }
                    else
                    {
                        obj.style[attr]=cur+speed+'px';
                    }
                }
                if(bStop)
                {
                    clearInterval(obj.timer);
                    if(fnEnd)fnEnd();
                }
            },30);
        }

function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{//IE
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}


    </script>
    <script>
        window.onload=function()
            {
                var oDiv=document.getElementById('play');
                var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
                var oUl=oDiv.getElementsByTagName('ul')[0];
                var now=0;
                for(var i=0;i<aBtn.length;i++)
                {
                    aBtn[i].index=i;
                    aBtn[i].onclick=function(){
                        now=this.index;
                        tab();
                    }
                }
                function tab()
                {
                    for(var i=0;i<aBtn.length;i++){
                        aBtn[i].className="";
                    }
                    aBtn[now].className='active';
                    move(oUl,{top:-150*now});
                }
                function next()
                {
                    now++;
                    if(now==aBtn.length)
                    {
                        now=0;
                    }
                    tab();
                }
                var timer=setInterval(next,1000);
              oDiv.onmouseover=function()
              {
                  clearInterval(timer);
              }
              oDiv.onmouseout=function()
                {
                    timer=setInterval(next,1000);
                }
            };
    </script>
</head>
<body>
<div class="play" id="play">
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="../images/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="../images/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="../images/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="../images/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="../images/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>
</body>
</html>
分享到：
| 简单sql优化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ThreeJS使用Curve曲线让物体沿轨迹运动DEMO

    在Web开发领域，Three.js是一个非常流行的JavaScript库，专门用于创建和展示三维图形。这个库利用WebGL技术，使得浏览器可以直接在网页上渲染高质量的3D模型和动画。本示例"ThreeJS使用Curve曲线让物体沿轨迹运动...

    09-JS运动应用.pptx

    这份"09-JS运动应用.pptx"的JavaScript教程主要聚焦于如何实现物体的运动效果，包括多物体运动和任意值运动。 首先，多物体运动框架是JavaScript动画设计中的常见需求。在示例中，提到当鼠标移入多个Div时，Div会变...

    浅析JS运动

    ### JS运动实现方法 1. **绝对定位法**：为需要运动的物体设置绝对定位，通过改变其位置属性来实现移动。 2. **改变定位属性法**：通过操作DOM元素的left、right、top、bottom属性来控制其在页面中的位置变化。 3...

    关于JS运动一些资料和源码

    JavaScript运动通常通过不断调整元素的CSS属性（如left, top, opacity等）来实现。每次改变后，浏览器会自动重绘页面，形成连续运动的假象。 五、运动函数 1. `requestAnimationFrame()`: 这是一个高性能的动画API...

    贝塞尔曲线高阶匀速运动算法 HTML5/JS 实现

    HTML5/JS实现贝塞尔曲线运动的关键技术： 1. **canvas API**：HTML5中的元素提供了绘图功能，我们可以通过JavaScript来操作canvas的绘图上下文（`CanvasRenderingContext2D`）绘制贝塞尔曲线。 2. **路径方法**：...

    基于HTML5和JavaScript的运动视频字幕添加方法.pdf

    基于HTML5和JavaScript的运动视频字幕添加方法 本文主要介绍了基于HTML5和JavaScript的运动视频字幕添加方法，并对HTML5关键代码进行了分析，以达到对运动视频进行反馈的目的。 1. HTML5中的video元素 HTML5中的...

    用javascript模拟太阳系行星的圆周运动.zip

    在本项目中，“用javascript模拟太阳系行星的圆周运动.zip”是一个包含HTML、CSS和JavaScript代码的压缩包，用于创建一个交互式的太阳系模型，展示行星围绕太阳的圆周运动。这个小型演示旨在帮助用户理解和应用Web...

    js实现缓冲运动效果的方法

    标题中的“js实现缓冲运动效果的方法”指出本文将围绕如何利用JavaScript来实现一个元素在移动过程中速度逐渐减慢直至停止的效果。具体来说，这涉及到在网页设计中为元素添加动画效果，使其行为更加自然和符合物理...

    JS弹性运动实现方法分析

    本文实例分析了JS弹性运动实现方法。分享给大家供大家参考，具体如下： 描述：像弹簧一样左右弹动，最后缓慢停下来 一、加减速运动 1.加速运动 var iSpeed=0; iSpeed++; 速度越来越快，最后冲出去 2.减速运动 var...

    JS小球抛物线轨迹运动的两种实现方法详解

    本文实例讲述了JS小球抛物线轨迹运动的两种实现方法。分享给大家供大家参考，具体如下： js实现小球抛物轨迹运动的大致思路： 1、用setInterval()方法，进行间隔性刷新，更新小球位置，以实现动态效果 2、绘制小球和...

    小球的随机运动

    至于标签中的"js动"，指的是JavaScript驱动的动画，也就是通过JavaScript控制每一帧的变化，实现动态效果。"Html5 Canvas"、"setInterval"和"小球"则明确了这个项目的主要技术点和实现方式。 总结，"小球的随机运动...

    javascript弹性运动效果简单实现方法

    ### JavaScript运动效果的其他技巧和方法 除了弹性运动，JavaScript还可以实现其他类型的动画效果，如线性运动、抛物线运动等。开发者可以使用CSS3的`transition`和`animation`属性，或者使用现代JavaScript库如...

    JS.zip_js 小球_运动边框

    在JavaScript编程领域，"JS.zip_js 小球_运动边框"这个项目涉及到了动态图形的创建和物理运动模拟。这个项目的核心是利用JavaScript来实现一个动态的小球，该小球能够在网页上自由移动，并在碰到边界时自动改变运动...

    【JavaScript源代码】原生JS实现各种运动之复合运动.docx

    ### JavaScript 实现复合运动 #### 一、复合运动概述 复合运动是指在相同的动画执行时间段内，被选中的对象有多个属性（如宽度、高度、透明度等）同时发生改变的一种动画效果。这种方式相较于单一属性变化更为复杂...

    JavaScript模拟重力状态下抛物运动的方法

    本文实例讲述了JavaScript模拟重力状态下抛物运动的方法。分享给大家供大家参考。具体分析如下： 这段JavaScript代码模拟重力状态下的抛物运动，可设置以下参数：横向初速度、纵向初速度、重力加速度（如果这个加...

    【JavaScript源代码】原生JS运动实现轮播图.docx

    【JavaScript源代码】原生JS运动实现轮播图 在网页设计中，轮播图是一种常见的展示多张图片或内容的交互方式。本教程将详细介绍如何使用原生JavaScript实现一个简单的图片轮播效果。基本原理是通过改变包含多张图片...

    JS运动特效之任意值添加运动的方法分析

    首先，我们回顾一下基础的多物体运动方法。在给出的代码示例中，当鼠标悬停在`&lt;li&gt;`元素上时，元素会开始移动（改变宽度），而当鼠标离开时，元素会返回到原来的宽度。这通过`startMove`函数实现，它使用`...

    JS运动特效之链式运动分析

    总的来说，链式运动是JavaScript运动特效中的一个重要概念，它通过巧妙地组合和调用回调函数，实现了元素的连续动画效果。这种技术在网页交互设计中有着广泛的应用，能提升用户体验并增强页面的视觉吸引力。

    Dynamics.js-可创建物理运动动画效果的js库插件

    Dynamics.js是一个强大的JavaScript库，专门用于创建富有真实感的物理运动动画效果。这款插件为开发者提供了一种直观的方式来实现动态的、基于物理规则的动画，使得网页元素的运动更加自然流畅，增强了用户的交互...

    javascript匀速运动实现方法分析

    本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考，具体如下： 匀速运动步骤： 1. 清除定时器 2. 开启定时器 3. 运动是否完成：a、运动完成，清除定时器；b、运动未完成继续 匀速运动停止条件：距离...

Magicbox
Global site tag (gtag.js) - Google Analytics