JavaScript完美运动框架

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量120 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feilixiaozi1/article/details/104341943
版权

完美运动框架

多物体运动，多属性同步运动，可进行透明度运动

        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }
            else{
                return getComputedStyle(obj,1)[name];
            }
        }
		/*json格式，startMove(oDiv,{'width':300,'height':300,'opacity':100},
		function(){
                    alert('完成');
                });*/
        function startMove(obj,json,func){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var isStop=true;
                var cur=0;
                for(var attr in json){
                    if(attr=='opacity'){
                        cur=parseFloat(getStyle(obj,attr))*100;
                    }
                    else{
                        cur=parseInt(getStyle(obj,attr));
                    }
                    if(cur!=json[attr]){
                        isStop=false;
                    }
                    var speed=(json[attr]-cur)/6;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(attr=='opacity'){
                        obj.style.opacity=(cur+speed)/100;
                    }
                    else{
                        obj.style[attr]=cur+speed+'px';
                    }
                }
                if(isStop){
                    clearInterval(obj.timer);
                    if(func){
                        func();
                    }
                }
            },30);
        }

网络照片翻看模板（源码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{margin: 0; padding: 0;}
        img{position: absolute;}
        ul{margin: 0; padding: 0;}
        li{list-style: none;}
        #main{position: relative; width: 400px; height: 550px; margin: 50px auto; background: #ccc;} 
        .big_pic{width: 400px; height: 400px; position: absolute; overflow: hidden;}
        .big_pic li{
            width: 400px; height: 400px; position: absolute;
            z-index: 0;overflow: hidden;
        }
        .mark_left{
            width: 200px;height: 400px; position: absolute;
            top: 0;left: 0;background: red;opacity: 0;
            z-index: 3000;
        } 
        .mark_right{
            width: 200px;height: 400px;position: absolute;
            top: 0;right: 0;background: green;opacity: 0;
            z-index: 3000;
        }
        .prev{
            width: 60px;height: 60px;position: absolute;
            top: 160px;left: 10px;
            background: url(pic/左箭头.jpg) no-repeat center center;
            opacity: 0; z-index: 3001;cursor: pointer;
        }
        .next{
            width: 60px;height: 60px;position: absolute;
            top: 160px; right: 10px;
            background: url(pic/右箭头.jpg);
            opacity: 0;z-index: 3001;cursor: pointer;
        }
        .text{
            width: 200px;height: 20px;position: absolute;
            top: 400px;left: 0;z-index: 3000;
        }
        .length{
            width: 200px;height: 20px;position: absolute;
            top: 400px;right: 0;z-index: 3000;text-align: right;
        }
        .bg{
            width: 400px;height: 20px;
            position: absolute;background: red;
            top: 400px;left: 0;z-index: 2999;
        }
        .small_pic{
            width: 390px;height: 130px;position: relative;
            background:#ccc;
            top: 420px;left: 5px;
            overflow: hidden;
        }
        .small_pic ul{
            position:absolute;
        }
        .small_pic li{
            width: 130px;height: 130px;float: left;opacity: 0.6;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('main');
            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 oDivSmall=getByClass(oDiv,'small_pic')[0];
            var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
            var aLiSmall=oDivSmall.getElementsByTagName('li');
            var oUlBig=getByClass(oDiv,'big_pic')[0];
            var aLiBig=oUlBig.getElementsByTagName('li');
            var nowIndex=2;
            var now=0;
            oUlSmall.style.width=aLiSmall.length*aLiSmall[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(var i=0;i<aLiSmall.length;i++){
                aLiSmall[i].index=i;
                aLiSmall[i].onclick=function(){
                    if(this.index==now)return;
                    now=this.index;
                    tab();
                };
            function tab(){
                aLiBig[now].style.zIndex=nowIndex++;
                for(var i=0;i<aLiSmall.length;i++){
                    startMove(aLiSmall[i],'opacity',60);
                }
                startMove(aLiSmall[now],'opacity',100);
                aLiBig[now].style.height=0;
                startMove(aLiBig[now],'height',400);
                if(now==0){
                    startMove(oUlSmall,'left',0);
                }
                else if(now==aLiSmall.length-1){
                    startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
                }
                else{
                startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
                }
            }  
                aLiSmall[i].onmouseover=function(){
                    startMove(this,'opacity',100);
                };
                aLiSmall[i].onmouseout=function(){
                    if(this.index!=now)
                    startMove(this,'opacity',60);
                };
            //左右按钮
            oBtnPrev.onclick=function(){
                now--;
                if(now==-1){now=aLiSmall.length-1;}
                tab();
            };
            oBtnNext.onclick=function(){
                now++;
                if(now==aLiSmall.length){now=0;}
                tab();
            }
            }
        };
        function getByClass(oParent,sClass){
            var aEle=oParent.getElementsByTagName('*');
            var aResult=[];
            for(var i=0;i<aEle.length;i++){
                if(aEle[i].className==sClass){
                    aEle[i],timer=null;
                    aResult.push(aEle[i]);
                }
            }
            return aResult;
        }

        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }
            else{
                return getComputedStyle(obj,1)[name];
            }
        }

        function startMove(obj,attr,iTarget){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var cur=0;
                if(attr=='opacity'){
                    cur=parseFloat(getStyle(obj,attr))*100;
                }
                else{
                    cur=parseInt(getStyle(obj,attr));
                }
                var speed=(iTarget-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(iTarget==cur){
                    clearInterval(obj.timer);
                }
                else{
                    if(attr=='opacity'){
                        obj.style.opacity=(cur+speed)/100;
                    }
                    else{
                    obj.style[attr]=cur+speed+'px';
                }
            }
            },30);
        }
    </script>
</head>
<body>
    <div id="main" class="pic">
        <ul class="big_pic">
            <div class="prev"></div>
            <div class="next"></div>
            <a href="#" class="mark_left"></a>
            <a href="#" class="mark_right"></a>
            <li style="z-index: 1;"><img src="pic/A.jpg"></li>
            <li ><img src="pic/B.jpg"></li>
            <li><img src="pic/C.jpg"></li>
            <li><img src="pic/D.jpg"></li>
            <li><img src="pic/E.jpg"></li>
            <li><img src="pic/F.jpg"></li>
        </ul>
        <div class="text">加载图片说明...</div>
        <div class="length">计算图片数量...</div>
        <div class="bg"></div>
        <div class="small_pic">
            <ul style="width: 390px;">
                <li style="opacity: 1;"><img src="pic/11.jpg"></li>
                <li><img src="pic/12.jpg"></li>
                <li><img src="pic/13.jpg"></li>
                <li><img src="pic/14.jpg"></li>
                <li><img src="pic/15.jpg"></li>
                <li><img src="pic/16.jpg"></li>
            </ul>
        </div>
    </div>
</body>
</html>

上述程序的演示实例

最好的年纪与你相遇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript运动框架大集结---拥有JavaScript完美运动框架你将制作任意基于web2.0网页动画
Mikyou的专栏
03-19 1433
JS运动框架大集结---拥有JS完美运动框架你将制作任意基于web2.0网页动画 JS运动框架的发展演变 1 starmove(iTarget) 原始运动框架 /////////////////////////////////// window.onload=function(){ var oDiv=document.getElementById("div1"); v
完美运动框架（原生js实现）
weixin_42632751的博客
08-02 442
//导入js文件，调用函数即可用 //这个运动框架,支持多物体多样式的链式运动,和多物体多样式的同时运动(做的是缓冲运动) function startMove(obj,json,fn){ //1、下一个物体运动运动开始前清除定时器 clearInterval(obj.timer); //2、让每一个运动的物体都单独拥有一个定时器 这样就能支持多物体同时运动了 obj.timer = ...
JS完美运动框架的封装过程
叶兴胜
11-04 2515
JS完美运动框架的封装过程 原文   http://guowenfh.github.io/2015/12/21/JS-Animated-Frames/ 主题 JavaScript 运动框架的实现思路 运动，其实就是在一段时间内改变 left 、 right 、 width 、 height 、 opactiy 的值，到达目的地之后停止。 现在按照以下步骤来进行我们的运动
JavaScript 完美运动框架
浮生途的博客
05-06 139
function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } function startMove(obj, json, fnEnd) { clearIn...
javascript完美运动框架
smile_1101的博客
08-27 615
导读：本文将总结我从事js运动处理的过程，整合成一个简单框架，方便调用。            我认为基础运动的本质就是:对要处理的载体进行平移，拉伸，收缩，旋转和放大。本文是从单运动到多运动到链式运动到完美运动方向展开。                 单向运动：只是让物体朝一个方向运动或让其变宽、变高等；          多运动： 我们现在面临的不止一个物体，而是多个物体一起运
javascript 完美运动框架
djrk76507的博客
03-09 128
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; }};function startMove(obj,json,fn){ c...
JavaScript - 完美运动框架
AugSnow的博客
08-01 3180
第一版运动框架 该框架通过妙味课堂学习视频时候跟着封装的。如下所示 function startMove(obj,json,endFn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0;
JavaScript完美运动框架进阶之旅
lurr88的博客
03-21 198
导语：运动框架的实现思路运动，其实就是在一段时间内改变left、right、width、height、opacity的值，到达目的地之后停止。现在按照以下步骤来进行我们的运动框架的封装：匀速运动、缓冲运动、多物体运动、任意值变化。运动框架的实现思路（一） 匀速运动速度动画运动基础思考：如何让 div 动起来？如下：设置元素绝对定位，只有绝对定位后，left,top等值才会生效。offsetLeft...
Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理
ltx06的专栏
03-03 528
转自：http://www.cnblogs.com/IcemanZB/p/4195196.html?utm_source=tuicool 大家一听这名字就知道，有了这套框架 网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的，就是不能让好几个值一块运动。 那这个问题怎么解决呢？ 我们先来看看之前的运动框架 function getStyle(obj,
Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)
10-24
主要介绍了Javascript 完美运动框架,逐行分析代码，让你轻松了运动的原理,需要的朋友可以参考下
JavaScript运动框架 链式运动到完美运动（五）
10-19
本篇文章主要探讨的是JavaScript运动框架中的一个重要概念——链式运动，以及如何将其运用到完美运动中。 链式运动是指在一个动画完成之后无缝衔接另一个动画，形成连续的视觉效果。这种技术常见于网站设计中，例如...
JS运动特效之完美运动框架实例分析
10-18
本篇文章将探讨“JS运动特效之完美运动框架实例分析”，着重讲解如何处理元素运动中的属性检测与判断，以确保所有设定的运动都能正确完成。 在JavaScript中，我们通常使用定时器（`setInterval`）来实现动画效果，...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 397
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1051
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 823
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 990
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 892
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Jasmine：全能JavaScript单元测试框架
"JavaScript单元测试框架-Jasmine" Jasmine是一个由Pivotal Labs开发的JavaScript测试框架，起源于JsUnit，后者是JUnit的JavaScript版本。由于JsUnit的维护停滞，Jasmine应运而生，它是一个独立的框架，适用于各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值