js动画效果

最新推荐文章于 2024-05-19 17:14:11 发布
最新推荐文章于 2024-05-19 17:14:11 发布
阅读量661 收藏
点赞数
文章标签： function cache xp 算法 div null

<html><head>
        <style>
                div{background-color:#000;height:1px;width:1px;position:absolute;overflow:hidden;}
                span{background-color:red;height:20px;width:20px;position:absolute;overflow:hidden;}
        </style>
</head><body></body></html>
<script>
        //by x!ao_f 120000512
        var xp = [];
        var yp = [];
        var ind = 0;
        document.onmousedown = function(e) {
                e = window.event||e;
                xp[ind] = e.x||e.pageX;
                yp[ind] = e.y||e.pageY;
                if (ind == 0) {
                        ind++;
                        xp[ind] = e.x||e.pageX;
                        yp[ind] = e.y||e.pageY;
                }
                document.body.innerHTML = "";
                posData = [];
                BSPLine(xp, yp, ind, 10);
                ind++;
        }
        //拟合曲线算法
        function BSPLine(x,y,n,k) {
                var i, j;
                var t, t1, t2, a, b, c, tx, ty, sx, sy;
                x[0] = x[1];
                y[0] = y[1];
                x[n + 1] = x[n];
                y[n + 1] = y[n];
                t = 1.0 / k;
                sx = (x[0] + x[1]) / 2;
                sy = (y[0] + y[1]) / 2;
                for (i = 0; i < n; i++) {
                        for (j = 1; j < k; j++) {
                                t1 = j * t;
                                t2 = t1 * t1;
                                a = (t2 - 2 * t1 + 1) / 2;
                                b = t1 - t2 + 1 / 2;
                                c = t2 / 2;
                                tx = a * x[i] + b * x[i + 1] + c * x[i + 2];
                                ty = a * y[i] + b * y[i + 1] + c * y[i + 2];
                                Line(sx, sy, tx, ty);
                                sx = tx;
                                sy = ty;
                        }
                }
                Update();
        }
        //直线算法
        function Line(x0,y0,x1,y1){
                var ary = [];
                var tmp;
                var steep = Math.abs(y1 - y0) > Math.abs(x1 - x0);
                var rev = false;
                if(steep){
                        tmp = x0; x0 = y0; y0 = tmp;
                        tmp = x1; x1 = y1; y1 = tmp;
                }
                if(x0 > x1){
                        tmp = x0; x0 = x1; x1 = tmp;
                        tmp = y0; y0 = y1; y1 = tmp;
                        rev = true;
                }
                var deltax = Math.abs(x1 - x0);
                var deltay = Math.abs(y1 - y0);
                var error = deltax / 2;
                var ystep;
                var y = y0;
                if(y0 < y1) ystep = 1; else ystep = -1;
                for(var x = x0; x <= x1; x++){
                        if(steep){
                                if(rev){
                                        ary.unshift(x);
                                        ary.unshift(y);
                                       
                                }else{
                                        ary.push(y);
                                        ary.push(x);
                                }
                        }else{
                                if(rev){
                                        ary.unshift(y);
                                        ary.unshift(x);
                                }else{
                                        ary.push(x);
                                        ary.push(y);
                                }
                        }
                        error = error - deltay;
                        if(error < 0){
                                y = y + ystep;
                                error = error + deltax;
                        }
                }
                for(var i=0;i<ary.length;i+=2){
                        Pos(ary[i],ary[i+1]);
                }
        }
        var cache = [];
        var posData = [];
        //像素点画到缓存
        function Pos(x,y){
                posData.push(x);
                posData.push(y);
                cache.push("<div style=left:");
                cache.push(x);
                cache.push("px;top:");
                cache.push(y);
                cache.push("px></div>");
        }
        //将路径显示到Body
        function Update(){
                document.body.innerHTML=cache.join("");
                if(posData.length>0){
                        cache = ["<span id=r style=left:",(posData[0]-10),"px;top:"+(posData[1]-10)+"px></span>"];
                }else{
                        cache = [];
                }
        }
        //按任意键执行动画
        var posind = 0;
        document.οnkeydοwn=function(e){
                var e = e||event
                if(e.keyCode==13){
                        document.οnmοusedοwn=null;
                        window.setInterval(function(){
                                if(posind<posData.length){
                                        r.style.left=parseInt(posData[posind++]-10)+"px";
                                        r.style.top=parseInt(posData[posind++]-10)+"px";
                                        posind+=2;
                                }
                        },1)
                }
        }
</script>

 

 

用法：

用鼠标点击画出轨迹，之后按ctrl+enter键播放

hjh202537
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html js 动画效果,JavaScript 动画效果
weixin_35988311的博客
06-03 623
使用JavaScript可以生成图像的动画效果。———————————————————————JavaScript 动画使用JavaScript可以生成图像的动画效果，技巧是使用JavaScript在不同的事件上转换显示不同的图片。下面的例子我们在页面上增加一个图像，用来当作一个链接按钮。然后我们在这个按钮上增加一个onMouseOver事件和一个onMouseOut事件，这两个事件将调用不同的函...
JavaScript 动画效果
xiangxiongfly
06-10 7951
文章目录JS动画实现概述平滑动画无缝连续滚动特效轮播图轮播图淡入淡出效果 JS动画实现 概述 在CSS3中可以通过transition过渡属性可以实现动画 JS可以利用CSS3中的transition属性实现元素动画 平滑动画 利用CSS transition属性实现平滑动画效果 <button>开始动画</button> <div id="box"></div> <script> var btn = document.queryS
【JavaScript-动画原理】如何使用js进行动画效果的实现
热门推荐
zhaochen1127的博客
09-25 1万+
利用js实现动画效果
JS实现动画效果
weixin_60323200的博客
09-14 4753
动画实现原理 核心原理：通过定时器setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 缓动效果原理 缓动就是变速运动，最常见的就是让速度慢下来 思路： 让盒子每次移动的距离慢慢变小，速度就会慢慢减下来 核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离步长 停止的条件是：让盒子位置等于目标位置.
JavaScript 动画效果的实现（附带示例）
Itmastergo的博客
01-29 1863
JavaScript 动画主要是通过修改元素样式来实现的，能够实现许多 CSS 动画所不能实现的效果，例如暂停、回放等。
展开收起js动画效果
qq_44544363的博客
01-20 5626
展开收起js动画效果 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术：Adobe Dreamweaver CC 2017 Java Script 作者：林敏静 撰写时间：2019年1月18日 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^...
javascript简易的动画效果
Sore4的博客
03-28 2568
JavaScript做一个简易的动画效果，主要还是要注意的是js部分 还是和往常一样创建一个HTML，如下图（开始操作）： 首先写一个div做成一个正方形盒子，内名为“box”，也可以给它写其他名，自由创作 再写两个div做成竖线，各自给一个不同的内名，在script用来做检测判断用的 还有再加两个input标签或者button标签，各给一个id名 如下图： 给这些div标签和input标签做好css属性样式，以及定好位置，如下图代码： 这就是在浏览器的一个样貌，颜色可以自己随意去改.
js动画效果和运动轨迹
m0_61096949的博客
07-05 1099
因为图形的轨迹等通常情况下是在css的style标签下修改的，所以这里也是使用的这种方法。.f表示f类选择器，.f>div表示该类选择器所在标签，所包含的所有的div标签。在定时器可以来修改图形的运动轨迹，在修改运动轨迹之前需要获取到该图形的id值，，后面括号里面添入比1小的值为缩小，比1大为增大，等于1则缩放为原来的形状。，这里y是一个数值类型，而px用单引号为字符串类型，所以这里。注意：边框是占有一定大小的，轮廓是不占有大小的。，比1小则所以，比1大则放大，等于1则不透明。思想：这里实现圆周远动，
js动画与html动画效果,九种原生js动画效果
weixin_42549496的博客
06-03 939
在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做(比如jquery)，这里我介绍下如何让通过原生的js来实现像框架一样的动画效果！1、匀速动画效果说明：匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的匀速动画html,body{margin:0;padding:0;}div{margin:0;padding:0;}.odiv{width:200px;...
css关闭动画,JS动画效果打开、关闭层的实现方法
weixin_34122028的博客
08-03 735
/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">层展开、关闭#main{width:500px; margin:100px;height:500px;border:1px solid red}#test{border:1px solid red;display:none;width:10px;height:10p...
JS动画效果代码3
10-30
用js实现的动画效果
JS动画效果代码2
10-30
用js实现的图片生成效果代码，学习js的朋友可以看看
Javascript动画效果（1）
10-21
主要为大家详细介绍了第一篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript动画效果（4）
10-21
主要为大家详细介绍了第四篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript动画效果（3）
10-21
主要为大家详细介绍了第三篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
链接表存储图(C++注释详解): 构建表 & 深度优先遍历 (DFS)
H13420972436的博客
05-15 439
代码实现: 构建表 & 深度优先遍历 (DFS)
【算法】二分算法——x的平方根
2302_79031646的博客
05-17 804
用二分边界算法来求解——x的平方根，从暴力求解到二分的优化细说
day09
2202_76101487的博客
05-17 742
正值少年的日常打卡！！！
BERT系列算法解读
最新发布
qq_52053775的博客
05-19 72
从而提高模型在SQuAD、MNLI和SST-2数据集上的性能。总的来看，这些优化措施显著增强了模型的表现。
javascript动画效果简单
12-16
以下是一个使用JavaScript实现的简单动画效果的例子： ```html <!DOCTYPE html> <title>JavaScript Animation #mydiv { width: 50px; height: 50px; background-color: green; position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值