加速器之家发布的文章 - 加速器之家

登录

加速器之家

累计撰写 1,061 篇文章
累计收到 0 条评论

搜索到 1061 篇与的结果

2024-08-22
调用腾讯、优酷视频播放器APi 工作中经常用到一些腾讯的或者优酷的视频，以下是调用视频接口的方法，注意线上才有效。调用腾讯视频播放器APi<!doctype html> <html> <head> <meta charset="utf-8"> <title>调用腾讯视频播放器APi</title> <script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script> </head> <body> <div id="videoCon" class="video"></div> <script> var video = new tvp.VideoInfo(); video.setVid("w0605len8by");//视频vid var player = new tvp.Player(750, 450);//视频高宽 player.setCurVideo(video); player.addParam("autoplay","0");//是否自动播放，1为自动播放，0为不自动播放 player.addParam("wmode","opaque"); player.addParam("showend",0); player.addParam("adplay",0); player.addParam("wmode","transparent"); player.addParam("pic","http://ossweb-img.qq.com/images/roco/act/a20120925movie/video_pic.jpg");//默认图片地址 player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf");//是否调用精简皮肤，不使用则删掉此行代码 player.write("videoCon"); </script> </body>调用优酷视频播放器APi<script src="http://player.youku.com/jsapi" charset="utf-8"></script>player =newYKU.Player('youkuplayer',{ styleid:'0', //播放样式0-9 client_id: '', //登录优酷在后台创建一个应用结可以拿到 vid: 'ID', //视频ID 跟腾讯的vid是一样的道理 autoplay:true, //是否自动播放视频 show_related:true, //播放完成是否显示相关视频 embsig: '', //嵌入式播放器签名(非网站类应用必须设置) password: 'md5('播放密码'+client_id)',//免密码播放 events:{ onPlayerReady:function(){/*your code*/},//播放器准备就绪调用 onPlayStart:function(){/*your code*/},//播放器开始播放时调用 onPlayEnd:function(){/*your code*/}//播放器结束播放时调用 player.create({ onpause:function(){ console.log('暂停了') }, onallended:function(){ console.log('播放完了') }, onfullscreen:function(){ if (this.isFullScreen == true) { console.log("全屏了") }else { console.log("取消全屏了") } } }) functionplayVideo(){ player.playVideo();//播放 } functionpauseVideo(){ player.pauseVideo();//暂停 } functionseekTo(s){ player.seekTo(s);//定位至指定时间 } functioncurrentTime(){ returnplayer.currentTime();//当前播放时间 }
- 2024年08月22日
- 7 阅读
- 0 评论
- 0 点赞
$解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题$ 2024-08-22
解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题 Failed to compile../src/views/Login.vueModule not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'原因：当前找不到less-loader，默认vue-cli工具帮我们创建了项目，并没有帮我们安装less-loader，我们只需安装less-loader和less即可。安装好之后，我们发现并不能生效，我们只需重新启动即可
- 2024年08月22日
- 5 阅读
- 0 评论
- 0 点赞
2024-08-22
npm ERR! missing script: serve 报错解决方法 npm ERR! missing script: servenpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\HuiPu\AppData\Roaming\npm-cache\_logs\2020-05-15T13_59_05_166Z-debug.log这是因为vue 版本问题，使用 npm run start 来运行项目 npm run start
- 2024年08月22日
- 5 阅读
- 0 评论
- 0 点赞
2024-08-22
swiper插件的使用 swiper插件简单又好用，推荐给大家，例子：swiper3.0一、形式1html代码：<div class="swiper-container" id="al-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="https://www.tpxhm.com/fdetail/6.html"><img src="https://www.tpxhm.com/fdetail/images/d1.jpg" alt="" /></a></div> <div class="swiper-slide"><a href="https://www.tpxhm.com/fdetail/6.html"><img src="https://www.tpxhm.com/fdetail/images/d2.jpg" alt="" /></a></div> </div>    <div class="swiper-pagination" id="al-pagination"></div>  </div> <script> var swiper = new Swiper('#al-container', { pagination: '#al-pagination', nextButton: '#al-button-next', prevButton: '#al-button-prev', slidesPerView: 1, paginationClickable: true, spaceBetween: 30, autoplay: 4500, speed:600, autoplayDisableOnInteraction : false, loop: true }) </script>css样式更改、定制#al-container{ width: 1063px; height: 731px; float: left; margin-left: 65px;} #al-pagination{bottom: 62px;} #al-pagination .swiper-pagination-bullet{ background: #fff; opacity: 1; } #al-pagination .swiper-pagination-bullet-active{ background: blue;} #al-button-next{ background: url(images/btn_r.png) no-repeat; top: 8%; width: 36px; height: 36px;} #al-button-prev{ background: url(images/btn_l.png) no-repeat; top: 8%;width: 36px; height: 36px;}二、形式2html代码：<div class="swiper_list"> <div class="tab"> <span class="active">选项1</span> <span>选项2</span> <span>选项3</span> </div> <div class="swiper-container" id="swper1-container" > <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://www.tpxhm.com/fdetail/images/cj_67.jpg" width="100%" alt=""></div> <div class="swiper-slide"><img src="https://www.tpxhm.com/fdetail/images/last3_02.jpg" width="100%" alt=""></div> <div class="swiper-slide"><img src="https://www.tpxhm.com/fdetail/images/last2_02.jpg" width="100%" alt=""></div> </div> </div> </div>var mySwiper2 = new Swiper('#swper1-container', { autoplay: 3000, //可选选项，自动滑动 onSlideChangeStart: function(swiper) { var j = mySwiper2.activeIndex; $('.tab span').removeClass('active').eq(j).addClass('active'); }, //pagination: '.pagination1', }); /*列表切换*/ $('.tab span').bind('click', function(e) { e.preventDefault(); //得到当前索引 var i = $(this).index(); $('.tab span').removeClass('active').eq(i).addClass('active'); mySwiper2.slideTo(i, 1000, false); });三、形式3<div class="swiper-container" id="al-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="https://www.tpxhm.com/fdetail/6.html"><img src="https://www.tpxhm.com/fdetail/images/d1.jpg" alt="" /></a></div> <div class="swiper-slide"><a href="https://www.tpxhm.com/fdetail/6.html"><img src="https://www.tpxhm.com/fdetail/images/d2.jpg" alt="" /></a></div> </div>    <div class="swiper-pagination" id="al-pagination"></div>  </div> <script> var swiper = new Swiper('#al-container', { pagination: '#al-pagination', paginationClickable: true, direction: 'vertical', // 如果需要前进后退按钮 nextButton: '#al-button-next', keyboardControl : true, mousewheelControl : true, direction:'vertical', mousewheelForceToAxis : true, autoplay:3000 }); </script>swiper4.0html代码：<div class="swiper-container" id="swiper-container1"> <div class="swiper-wrapper"> <div class="swiper-slide"> 1 </div> <div class="swiper-slide"> 2 </div> </div>  <div class="swiper-pagination"></div>  <div class="swiper-button-next" id="swiper-button-next1"></div> <div class="swiper-button-prev" id="swiper-button-prev1"></div> </div>js代码： var swiper = new Swiper('#swiper-container1', { slidesPerView: 4, spaceBetween: 13, centeredSlides: false, autoplay: { delay: 2500, disableOnInteraction: true, }, loop: true, loopFillGroupWithBlank: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '#swiper-button-next1', prevEl: '#swiper-button-prev1', }, });
- 2024年08月22日
- 4 阅读
- 0 评论
- 0 点赞
2024-08-22
html前端按钮效果常见按钮特效整理：1 .zkbtn--上下抖动.zkbtn{animation:td 1.5s infinite; -webkit-animation:td 1.5s infinite; } @-webkit-keyframes td{ 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);} 40%{-webkit-transform:translateY(-4px);} 60%{-webkit-transform:translateY(-8px);} } @keyframes td{ 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0);} 40%{-webkit-transform:translateY(-4px);transform:translateY(-4px);} 60%{-webkit-transform:translateY(-8px);transform:translateY(-8px);}2 .amint-da---缓慢放大.amint-da{ animation: scaleOut 1s 1s infinite ease; } @-webkit-keyframes scaleOut { 0% { transform: scale(0.95); opacity: 0.9; } 50% { transform: scale(1); opacity: 0.95; } 100% { transform: scale(1.05); opacity: 1; } }3 鼠标悬停缓慢向上移动-5px;.p3{transition:all .2s linear; -webkit-transition:all .2s linear; -moz-transition:all .2s linear; -ms-transition:all .2s linear; -o-transition:all .2s } .p3 li:hover{transform:translateY(-5px);}4 .c_stykebrn按钮不停放大.c_stykebrn{ -moz-animation:fd 1s linear infinite backwards; -ms-animation:fd 1s linear infinite backwards; -o-animation:fd 1s linear infinite backwards; -webkit-animation:fd 1s linear infinite backwards; animation:fd 1s linear infinite backwards; } @keyframes fd{ 0%{ transform:scale(1); } 50%{ transform:scale(1.1); } 100%{ transform:scale(1); } }5 .animated around按钮左右移动.animated { animation-duration: 1s; /*动画时间*/ animation-fill-mode: both; /*播放后的状态*/ animation-duration: 2s; /*动画时间*/ animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/ } .around{ animation-name:aroundAnimation; /*动画的名称*/ transform-origin: center bottom; /*设置动画旋转元素的基点为*/ cursor: pointer; } @keyframes aroundAnimation{ 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43%{ transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(-20px,0,,0); } 70%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(-10px,0px,0); } 80%{ transform: translate2d(10px,0,0); } } 2. .laybtn{animation: showb 2s .2s linear both infinite; -webkit-animation: showb 2s .2s linear both infinite; -moz-animation: showb 2s .2s linear both infinite; -o-animation: showb 2s .2s linear both infinite; -ms-animation: showh 1s .2s linear both infinite;} @-webkit-keyframes showb{ 0%,100%,20%,50%,80% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.9); transform: scale(0.9); } 60% { -webkit-transform: scale(0.9); transform: scale(0.9); } }6 .animate-hotspot-down按钮上下抖动@keyframes hotspot-down{25%{transform:translateY(-2px)}50%,100%{transform:translateY(0)}75%{transform:translateY(2px)}} .animate-hotspot-down{-webkit-animation:hotspot-down 2s linear infinite;animation:hotspot-down 2s linear infinite}7 .鼠标悬停刀片加抖动效果.banner_btn{display: block; width: 312px; height:78px ; background: url(images/banner_btn_03.png) no-repeat center top; position: absolute; left: 50%; margin-left: -420px; bottom: 155px; color: #fff; font-size: 48px; font-family: '方正'; font-weight: bold; text-align: center; line-height: 78px; overflow: hidden;transition:all .2s linear;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-ms-transition:all .2s linear;-o-transition:all .2s linear;} .banner_btn:before { content: ' '; position: absolute; background: #fff; width: 10px; height: 100px; top: 0; left: -200px; opacity: 0.2; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: skewX(-25deg); transform: skewX(-25deg); overflow: hidden; } .banner_btn:hover:before { width: 30px; left: 350px; } .banner_btn:hover{ color: #fff;transform:translateY(-2px);-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-ms-transform:translateY(-2px);-o-transform:translateY(-2px); }8、按钮左右走动.junp img{ webkit-animation: jump 3s linear normal both infinite; -o-animation: jump 3s linear normal both infinite; animation: jump 3s linear normal both infinite; } @keyframes jump{ 0%{ transform: translateX(0); } 50%{ transform: translateX(15px); } 100%{ transform: translateX(0); } }9、晃动效果.sp1{ -webkit-animation: fan 2s infinite; animation: fan 2s infinite; } .sp1{ top:84px; right:173px; } @keyframes fan { 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); } }10、缩小放大.chatcar{ width:50px; height:50px; background:#000; animation:chatchars 2s ease;} @keyframes chatchars{ 0%{left: 120px; transform:scale(0.1);} 20%{left: 20px;} 40%{left: 40px;} 100%{left: 12px; transform:scale(1);}11、挂在绳索上摇摆动画.als { position: absolute; width: 5rem; height: 5rem; background:#000; -webkit-transform-origin: center -20rem; transform-origin: center -20rem; -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; } @keyframes swing { 0% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 12.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 37.5% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 62.5% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 75% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 87.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } }12.红包抖动效果.swt-float{z-index:2147483650;position:fixed;top:0;left:2%;width:100px;top:40%;-webkit-animation:tada 1.5s linear normal both infinite;-o-animation:tada 1.5s linear normal both infinite;animation:tada 1.5s linear normal both infinite} @-moz-keyframes tada{0%{-moz-transform:scale(1)} 10%,20%{-moz-transform:scale(.9) rotate(-3deg)} 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)} 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)} 100%{-moz-transform:scale(1) rotate(0)} } @-webkit-keyframes tada{0%{-webkit-transform:scale(1)} 10%,20%{-webkit-transform:scale(.9) rotate(-3deg)} 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)} 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)} 100%{-webkit-transform:scale(1) rotate(0)} }14.打字效果.shuru{animation:typing 4s steps(11,end) infinite,blink-caret .5s step-end infinite alternate} @keyframes typing{0%{width:0}25%{width:22ch}100%{width:22ch}} @keyframes blink-caret{50%{border-color:transparent}} @-webkit-keyframes anim1{0%{top:0;opacity:1}100%{top:-100px;opacity:1}}15.按钮不停旋转20度.btn{ -webkit-animation: swing 2s linear normal both infinite; -o-animation: swing 2s linear normal both infinite; animation: swing 2s linear normal both infinite; } @keyframes swing{ 0%{ transform: rotate(5deg); } 50%{ transform: rotate(-5deg); } 100%{ transform: rotate(5deg); } } @-webkit-keyframes swing{ 0%{ -webkit-transform: rotate(5deg); } 50%{ -webkit-transform: rotate(-5deg); } 100%{ -webkit-transform: rotate(5deg); } }16.鼠标悬停显示按钮html:<ul class="p4_cr"> <li> <a href="https://www.tpxhm.com/fdetail/7.html"> <a href="https://www.tpxhm.com/fdetail/7.html" class="pubtn p4_btn">按钮>></a> </a> </li> <li>css:.p4_btn{ display: block; width: 192px; height: 51px; font-size: 24px; color: #fff; line-height: 51px; background: linear-gradient(90deg, #fc6550, #f92676); border-radius: 45px; position: absolute; left: 35px;bottom:-30px;} .p4_cr li a.pubtn{transition: all 0.5s linear; -webkit-transition: all 0.5s linear; opacity: 0; } .p4_cr li:hover{transform:translate(0px,-20px);-webkit-transform:translate(0px,-20px); } .p4_cr li:hover a.pubtn{bottom: -30px;opacity: 1; color: #fff;}15.按钮上下动目标{animation: float 4s ease infinite;} @keyframes float { 0%,100% { transform: translate3d(0,0,0) } 40% { transform: translate3d(0,-20px,0) } }16.从小大的圆形.mubiao{ width:5px;height:5px; margin: 300px auto; background: #000; border-radius:50%; animation:vs 3s linear infinite backwards} @keyframes vs{0%{box-shadow:0 0 156px #000} 25%{box-shadow:0 0 0 80px #000} 50%{box-shadow:0 0 0 156px #000} 25%{box-shadow:0 0 0 80px #000} 100%{box-shadow:0 0 156px #000} }17.放大隐藏.目标{ width: 50px; height: 50px; background: #000; -webkit-animation:scaleout 3.3s infinite ease-in-out; animation:scaleout 3.3s infinite ease-in-out;} @-webkit-keyframes scaleout { 0% { -webkit-transform:scale(1.0) } 100% { -webkit-transform:scale(2.1); opacity:0; } }@keyframes scaleout { 0% { transform:scale(1.0); -webkit-transform:scale(1.0); opacity:0; } 10% { transform:scale(1.0); -webkit-transform:scale(1.0); opacity:1; } 100% { transform:scale(2.1); -webkit-transform:scale(2.1); opacity:0; } }18.放大缩小.目标{ width: 50px; height: 50px; background: #000; animation:pulseScale 2s infinite;} .pulseScale{-webkit-animation-name:pulseScale;animation-name:pulseScale} @-webkit-keyframes pulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 100%{-webkit-transform:translateZ(0)} } @keyframes pulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 100%{transform:translateZ(0)} }19.鼠标悬停翻转.swtBtn{-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;} .swtBtn:hover{-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);-o-transform:rotateY(360deg);-webkit-transform:rotateY(360deg) ;transform:rotateY(360deg)}20.按钮放大效果<style> .btn{ display: block; width: 200px; height: 50px; background-color: #D72602; position: relative; color: #fff; text-decoration: none; text-align: center; line-height: 50px; font-size: 25px; border-radius: 45px;} .div2 { position: absolute; right: 0px; top: 0; bottom: 0; margin: auto; pointer-events: none; background-color: #ffffff; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; width: 200px; height: 150px; -webkit-animation: ball-scale 1s 0s ease-in-out infinite; -moz-animation: ball-scale 1s 0s ease-in-out infinite; -ms-animation: ball-scale 1s 0s ease-in-out infinite; -o-animation: ball-scale 1s 0s ease-in-out infinite; animation: ball-scale 1s 0s ease-in-out infinite; } @-webkit-keyframes ball-scale { 0% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } @keyframes ball-scale { 0% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } </style> <a href="javascript:;" class="btn"> 了解详情 <div class="div2"></div> </a>
- 2024年08月22日
- 6 阅读
- 0 评论
- 0 点赞