html5實現購物車拋物線

widuu 發布于2019-08-21 11:48 / 2084人閱讀

摘要：實現原理利用運動的合成原理，在水平方向上，執行勻速運動，在豎直方向上執行勻變速運動，合成后的物體運動軌跡便是拋物線。需要使用兩個標簽，一個父標簽，一個子標簽，運動曲線分別綁定在對應的兩個標簽上。確定起始位置和結束位置點。

實現原理

1.利用運動的合成原理，在水平方向上，執行勻速運動，在豎直方向上執行勻變速運動，合成后的物體運動軌跡便是拋物線。
2.需要使用兩個標簽，一個父標簽，一個子標簽，運動曲線分別綁定在對應的兩個標簽上。
3.確定起始位置和結束位置點。

css樣式

.parent{
    position:absolute; 
    z-index:10; 
    -webkit-transition:all 0.5s cubic-bezier( 0.39,-0.4,0.5,0 ) 0s; // 可以自定義
}
.child{
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background-color:#f9b52c; 
    -webkit-transition:all 0.5s linear 0s; // 可以自定義
}

js代碼段

    var curveMove = function ( node ){ // node 為點擊的節點
    var 
    xStar = node.offset().left + node.width() / 2, // 獲取起始點橫坐標
    yStar = node.offset().top - node.height() / 2, // 獲取起始點縱坐標
    width = 20,height = 20,
    nodeOffset = $(".aim").offset(), // 購物車偏移量
    xEnd = nodeOffset.left + width / 2, // 結束點橫坐標
    yEnd = nodeOffset.top + height / 2; // 結束點縱坐標
    $("").appendTo("body");
    var 
    outer = $(".parent").last().css({ left : xStar, top : yStar }),
    inner = outer.children();
    setTimeout(function(){ // 延時一下，避免 transition 不執行
        outer[0].style.transform = "translate3d(0," + ( yEnd - yStar )+ "px,0)";
        inner[0].style.transform = "translate3d(" + ( xEnd - xStar )  + "px,0,0)";
        }, 30 );
    };
 // 最后將已經結束的動畫節點清除，這里用到了 transitionEnd 監聽事件，代碼如下：
    document.addEventListener("webkitTransitionEnd", function( e ){
        // 監聽動畫是否執行完，若執行完則清除相應的節點，
        var node = $(e.target).remove();
        node = null; // 待系統回收
    });

云服務器 GPU云服務器 HTML5實現購物車 js 拋物線購物車實現購物車功能 html5購物車原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87128.html

實現加入購物車拋物線效果

寫在前面最近天氣剛剛轉熱，心想應該淘點春裝賣賣騷了，然后某寶逛的時候發現其加入購物車的動畫效果不錯，既完善了交互，又有功能導向作用，用戶體驗杠杠滴～作為一名前端汪，也想自己動手實現下此類酷炫的效果。抽空寫了個demo，雖然完成的效果比較粗糙，但是擁有毛坯房總好過租房吧哈哈，日后再完善不遲。現在講講自己的經驗，順便理理思路，加深印象：）準備開始開始只是在紙上作了草圖，構思了下，才發現如果要一步...

yunhao 2019-08-20 14:51 評論0 收藏0
實現加入購物車拋物線效果

寫在前面最近天氣剛剛轉熱，心想應該淘點春裝賣賣騷了，然后某寶逛的時候發現其加入購物車的動畫效果不錯，既完善了交互，又有功能導向作用，用戶體驗杠杠滴～作為一名前端汪，也想自己動手實現下此類酷炫的效果。抽空寫了個demo，雖然完成的效果比較粗糙，但是擁有毛坯房總好過租房吧哈哈，日后再完善不遲。現在講講自己的經驗，順便理理思路，加深印象：）準備開始開始只是在紙上作了草圖，構思了下，才發現如果要一步...

xiguadada 2019-08-30 15:53 評論0 收藏0
JS 實現拋物線動畫

摘要：陳家賓在做小程序的項目中，需要在添加購物車的時候，增加拋物線小球動畫。 author: 陳家賓 email: 617822642@qq.com date: 2018/2/24 在做小程序的項目中，需要在添加購物車的時候，增加拋物線小球動畫。先給大家看下效果圖（其實已經是實現后的效果了，順便給自己公司打廣告了哈哈） showImg(https://segmentfault.com/im...

zollero 2019-08-26 17:15 評論0 收藏0
Javascript中的拋物線 ~ 加入購物車小動畫

摘要：上圖即為歸零后的坐標系，對稱軸直線為在拋物線方程中，值得正負代表著拋物線的開口方向，那么值的絕對值也和拋物線的開口大小有著反比例的關系。廢話不多說,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源碼~https://github.com/Nelson2016... 運行的原理很簡單的一個小特效，接下來來說一下他的原理。顯而易見，這小東西肯定和拋物...

sarva 2019-08-29 11:09 評論0 收藏0