购物车抛物线原理

最新推荐文章于 2025-05-18 13:54:13 发布

转载最新推荐文章于 2025-05-18 13:54:13 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaominsweet/p/6483905.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了两种购物车飞入特效的实现方法：一种使用二次函数进行路径计算，通过JavaScript控制元素沿抛物线轨迹移动；另一种利用CSS动画实现商品图标从商品详情页面飞入购物车的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天看了一些购物车的飞入特效，和参考了网上的一些前端写的，自己概括了2种。

第一种是利用2次函数 y=ax2+bx+c

<script type="text/javascript">
  var parabola = function(config){
    var b = 0,
      INTERVAL = 15,
      timer = null,
      x1,y1,x2,y2,originx,originy,diffx,diffy;

    this.config = config || {};
    // 起点
    this.origin = $(this.config.origin)||null;
    // 终点
    this.target = $(this.config.target)||null;
    // 运动的元素
    this.element = $(this.config.element)||null;
    // 曲线弧度
    this.a = this.config.a || 0.002;
    // 运动时间(ms)
    this.time = this.config.time || 1000;

    this.init = function(){
      x1 = this.origin.offset().left;
      y1 = this.origin.offset().top;
      x2 = this.target.offset().left;
      y2 = this.target.offset().top;
      originx = x1;
      originy = y1;
      diffx = x2-x1;
      diffy = y2-y1,
        speedx = diffx/this.time;

      // 已知a = 3, 根据抛物线函数 y = a*x*x + b*x + c 将抛物线起点平移到坐标原点[0, 0]，终点随之平移，那么抛物线经过原点[0, 0] 得出c = 0;
      // 终点平移后得出：y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1)
      // 即 diffy = a*diffx*diffx + b*diffx;
      // 可求出常数b的值
      b = (diffy - this.a*diffx*diffx)/diffx;
      this.element.css({
        left: x1,
        top: y1
      })
      return this;
    };

    // 确定动画方式
    this.moveStyle = function(){
      var moveStyle = 'position',
        testDiv = document.createElement('div');
      if('placeholder' in testDiv){
        ['','ms','moz','webkit'].forEach(function(pre){
          var transform = pre + (pre ? 'T' : 't') + 'ransform';
          if(transform in testDiv.style){
            moveStyle = transform;
          }
        })
      }
      return moveStyle;
    }

    this.move = function(){
      var start = new Date().getTime(),
        moveStyle = this.moveStyle(),
        _this = this;

      timer = setInterval(function(){
        if(new Date().getTime() - start > _this.time){
          clearInterval(timer);
          _this.element.css({
            left: x2,
            top: y2
          })
          typeof _this.config.callback === 'function' && _this.config.callback(_this.element);
          return;
        }
        x = speedx * (new Date().getTime() - start);
        y = _this.a*x*x + b*x;
        if(moveStyle === 'position'){
          _this.element.css({
            left: x+originx,
            top: y+originy
          })
        }else{
          if(window.requestAnimationFrame){
            window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)');
          }else{
            _this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)';
          }
        }
      },INTERVAL)
      return this;
    }

    this.init();
  };


</script>

第二种是利用css

$(function () {
  var $orgImg = $('.origin', this);
  var $targetDiv = $('.target');
  var $fxImg = $orgImg.clone().css({
    'position': 'absolute',
    'z-index': 10000,
    'width': $orgImg.width(),
    'height': $orgImg.height(),
    'border-radius': '50%'
  }).css($orgImg.offset()).appendTo('body');


    $fxImg
      .animate({
        left: [$targetDiv.offset().left + $targetDiv.width() - $fxImg.width(), 'linear'],
        top: [$targetDiv.offset().top + $targetDiv.height() - $fxImg.height(), 'easeOutQuad']
      }, 600)
      .fadeOut(200, function () {
         $fxImg.detach();
      });

})
$('.parabola-el').on('click', function(){


});
只需要引入

<script src="./js/jquery-ui.min.js"></script>
及 jquery.js  即可

转载于:https://www.cnblogs.com/xiaominsweet/p/6483905.html