做家政服务网站东莞外贸公司网站建设

做家政服务网站,东莞外贸公司网站建设,网站建设和维护要点,致力于网站开发维护学什么专业最近做了一个小需求#xff0c;写购物车小球动画效果,给大家分享一下这个功能的源码#xff0c;以便以后的使用。实现逻辑 每次点击时#xff0c;拿到点击的位置作为小球的开始位置#xff0c;再获取到购物车的结束位置。确定了两端位置之后#xff0c;给小球设置css的pat…最近做了一个小需求写购物车小球动画效果,给大家分享一下这个功能的源码以便以后的使用。实现逻辑每次点击时拿到点击的位置作为小球的开始位置再获取到购物车的结束位置。确定了两端位置之后给小球设置css的path路径使用贝塞尔曲线最后通过animate方法执行动画效果即可实现。!DOCTYPEhtmlhtml langzh-CNheadmeta charsetUTF-8/meta nameviewportcontentwidthdevice-width, initial-scale1.0/title购物车小球动画/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptstyle*{margin:0;padding:0;box-sizing:border-box;}body{font-family:PingFang SC,Helvetica Neue,Arial,sans-serif;background-color:#f5f5f5;padding:20px;color:#333;}.container{max-width:800px;margin:0auto;background:white;border-radius:12px;box-shadow:04px12pxrgba(0,0,0,0.1);padding:20px;}h1{text-align:center;color:#cf7e27;margin-bottom:20px;}.description{text-align:center;margin-bottom:30px;color:#666;}.items-container{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:30px;}.item{width:100px;padding:10px;background:#f8f8f8;border-radius:8px;text-align:center;cursor:pointer;transition:transform0.2s;}.item:hover{transform:translateY(-3px);box-shadow:04px8pxrgba(0,0,0,0.1);}.item-img{width:60px;height:60px;background:linear-gradient(135deg,#ffb800,#cf7e27);border-radius:50%;margin:0auto8px;}.cart-container{position:fixed;bottom:20px;right:20px;}.cart{width:60px;height:60px;background:#cf7e27;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:04px12pxrgba(0,0,0,0.15);}.cart-count{position:absolute;top:-5px;right:-5px;background:#ff3000;color:white;font-size:12px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;}.ball-container{position:absolute;pointer-events:none;}.ball{width:20px;height:20px;background:linear-gradient(135deg,#ff3000,#cf7e27);border-radius:50%;box-shadow:02px4pxrgba(0,0,0,0.2);position:absolute;top:0;right:0;}.control-panel{background:#f9f9f9;padding:15px;border-radius:8px;margin-top:20px;}.slider-container{margin:10px0;}label{display:block;margin-bottom:5px;font-weight:bold;color:#555;}input[typerange]{width:100%;}.value-display{text-align:center;font-size:14px;color:#777;}.code-example{background:#2d2d2d;color:#f8f8f2;padding:15px;border-radius:8px;margin-top:20px;overflow-x:auto;font-family:Fira Code,monospace;}/style/headbodydiv idapp/divscript typemoduleconst{createApp,ref,reactive}Vue;constApp{setup(){constitemsref([{id:1,name:美食,price:25},{id:2,name:饮料,price:15},{id:3,name:水果,price:20},{id:4,name:甜品,price:18},{id:5,name:快餐,price:22},{id:6,name:小吃,price:12},]);constcartreactive({count:0,total:0,});constballsref([]);constballIndexref(0);constanimationSpeedref(600);constaddToCart(item,event){cart.count;cart.totalitem.price;// 获取点击位置conststartXevent.clientX;conststartYevent.clientY;createBall(startX,startY);};// 创建小球constcreateBall(startX,startY){letendEledocument.querySelector(.cart).getBoundingClientRect();letendXMath.floor(endEle.leftendEle.width/2);letendYMath.floor(endEle.topendEle.height/2);letfatherEledocument.querySelector(.container);letballdocument.createElement(div);ball.classList.add(ball);ball.style.leftstartXpx;ball.style.topstartYpx;// 贝塞尔曲线路径ball.style.offsetPathpath(M${0}${0}C${100}${-100},${endX-startX}${endY-startY},${endX-startX}${endY-startY});fatherEle.appendChild(ball);setTimeout((){fatherEle.removeChild(ball);},Number(animationSpeed.value)-100);ball.animate(// 将偏移路径动画化{offsetDistance:[0,100%]},{duration:Number(animationSpeed.value),iterations:1,easing:cubic-bezier(.667,0.01,.333,.99),direction:alternate,});};return{items,cart,balls,ballIndex,animationSpeed,addToCart,createBall,};},template:div classcontainer h1购物车小球动画/h1 p classdescription点击商品将生成飞向购物车的小球动画多个小球实例互不干扰/p div classitems-container div v-foritem in items :keyitem.id classitem clickaddToCart(item, $event) div classitem-img/div div{{ item.name }}/div div¥{{ item.price }}/div /div /div div classcontrol-panel h3动画控制/h3 div classslider-container label动画速度: {{ animationSpeed }}ms/label input typerange min500 max1000 v-modelanimationSpeed div classvalue-display调整小球飞行的速度/div /div /div div classcart-container div classcart span购/span div classcart-count{{ cart.count }}/div /div /div,};constappcreateApp(App);app.mount(#app);/script/body/html