君莫邪儿

js 动画，一个图片旋转的动画

自己用div来代替图片，制作的一个点击让图片相册360 纵向旋转的效果图

  
  
  
  
   
   
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
       <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
   
   
   
       <title>北京理工篮园科技技术有限公司</title> 
   
   
   
       <script type="text/javascript" src="/libs/jquery/jquery-1.4.2.min.js"></script> 
   
   
   
       <style type="text/css"> 
   
   
   
    
   
   
   
           html{ 
   
   
   
           overflow-x: hidden; 
   
   
   
           overflow-y: hidden; 
   
   
   
           } 
   
   
   
           body { 
   
   
   
               margin:0; 
   
   
   
               padding:0; 
   
   
   
                
   
   
   
           } 
   
   
   
    
   
   
   
           p { 
   
   
   
               font-family:"华文新魏"; 
   
   
   
               font-size:18pt; 
   
   
   
           } 
   
   
   
           #main{ 
   
   
   
              width:1100px; 
   
   
   
              height:600px; 
   
   
   
              border:0px solid #000; 
   
   
   
              margin:auto; 
   
   
   
              background-image:url('/images/bgline.jpg'); 
   
   
   
    
   
   
   
           } 
   
   
   
           #top{ 
   
   
   
              width:980px; 
   
   
   
              height:128px; 
   
   
   
               
   
   
   
              margin:auto;    
   
   
   
           } 
   
   
   
           #header1{ 
   
   
   
              width:980px; 
   
   
   
              height:32px; 
   
   
   
           } 
   
   
   
           #header2{ 
   
   
   
              width:980px; 
   
   
   
              height:94px; 
   
   
   
              border:0px solid #000; 
   
   
   
           } 
   
   
   
           #header3{ 
   
   
   
              width:980px; 
   
   
   
              height:2px; 
   
   
   
           } 
   
   
   
           #showPro{ 
   
   
   
              width:980px; 
   
   
   
              height:462px; 
   
   
   
              border:1px solid #000; 
   
   
   
              margin:auto; 
   
   
   
           } 
   
   
   
           #showLeft{ 
   
   
   
              position:absolute; 
   
   
   
              width:200px; 
   
   
   
              height:420px; 
   
   
   
              border:1px solid #000; 
   
   
   
              margin-top:20px; 
   
   
   
              margin-left:90px; 
   
   
   
              float:left; 
   
   
   
              z-index:99; 
   
   
   
           } 
   
   
   
           #showRight{ 
   
   
   
              position:absolute; 
   
   
   
              width:200px; 
   
   
   
              height:420px; 
   
   
   
              border:1px solid #000; 
   
   
   
              margin-top:20px; 
   
   
   
              margin-left:700px; 
   
   
   
              float:left; 
   
   
   
              z-index:99; 
   
   
   
           } 
   
   
   
           .photo{ 
   
   
   
              position:absolute; 
   
   
   
              width:100px; 
   
   
   
              height:150px; 
   
   
   
              border:1px solid #000;  
   
   
   
           } 
   
   
   
           .photo_header{ 
   
   
   
              position:absolute; 
   
   
   
              width:100px; 
   
   
   
              height:150px; 
   
   
   
              border:1px solid #000; 
   
   
   
              
   
   
   
              opacity:0.5; 
   
   
   
              z-index:999; 
   
   
   
              margin-top:15px; 
   
   
   
              margin-left:25px;    
   
   
   
           } 
   
   
   
           .photo_show{ 
   
   
   
              position:absolute; 
   
   
   
              width:100px; 
   
   
   
              height:150px; 
   
   
   
              border:1px solid #000; 
   
   
   
              
   
   
   
              opacity:0.5; 
   
   
   
              z-index:99999; 
   
   
   
              margin-top:135px; 
   
   
   
           } 
   
   
   
           .photo_buttom{ 
   
   
   
              position:absolute; 
   
   
   
              width:100px; 
   
   
   
              height:150px; 
   
   
   
              border:1px solid #000;  
   
   
   
              opacity:0.5; 
   
   
   
              z-index:9999; 
   
   
   
              margin-top:255px; 
   
   
   
              margin-left:25px; 
   
   
   
               
   
   
   
           } 
   
   
   
           .photo_behined{ 
   
   
   
              position:absolute; 
   
   
   
              width:100px; 
   
   
   
              height:150px; 
   
   
   
              border:1px solid #000; 
   
   
   
               
   
   
   
              opacity:0.2; 
   
   
   
              z-index:99; 
   
   
   
              margin-top:135px; 
   
   
   
              margin-left:50px; 
   
   
   
               
   
   
   
           } 
   
   
   
           #showMain{ 
   
   
   
              position:absolute; 
   
   
   
              border:1px solid #000; 
   
   
   
              width:900px; 
   
   
   
              height:300px; 
   
   
   
              z-index:0; 
   
   
   
              margin-top:80px; 
   
   
   
              margin-left:40px; 
   
   
   
           } 
   
   
   
    
   
   
   
       </style> 
   
   
   
       <script> 
   
   
   
          $(function(){ 
   
   
   
              $("#showLeft div").click(function(){ 
   
   
   
                  changImg("showLeft",this.id); 
   
   
   
              }); 
   
   
   
              $("#showRight div").click(function(){ 
   
   
   
                  changImg("showRight",this.id); 
   
   
   
              }); 
   
   
   
               
   
   
   
          }); 
   
   
   
          function changImg(info,id){ 
   
   
   
                  var standars=$("#"+info+" .photo_show").css("margin-top"); 
   
   
   
                  var clickTop=$("#"+id).css("margin-top"); 
   
   
   
                  var len1=standars.substr(0,standars.length-2); 
   
   
   
                  var len2=clickTop.substr(0,clickTop.length-2); 
   
   
   
                  var flag=len2-len1; 
   
   
   
                  if(flag<0){ 
   
   
   
                   // alert("向下"); 
   
   
   
                       //div个数 
   
   
   
                       var list=$("#"+info+" div").length; 
   
   
   
                            for(var i=1;i<=list;i++){ 
   
   
   
                                   var moveId="#"; 
   
   
   
                                   if(info=='showLeft'){ 
   
   
   
                                       moveId+="photo"+i; 
   
   
   
                                   }else{ 
   
   
   
                                       moveId+="photoRight"+i; 
   
   
   
                                       //alert(m);photoRight4 
   
   
   
                                   } 
   
   
   
                                   var tempValue=$(moveId).attr("value"); 
   
   
   
                                    if(tempValue==1){ 
   
   
   
                                        
   
   
   
                                        
   
   
   
                                       $(moveId).attr("value",2); 
   
   
   
                                       $(moveId).animate({ 
   
   
   
                                                  "margin-top":"255", 
   
   
   
                                                  "margin-left":"25" 
   
   
   
                                            },  
   
   
   
                                            { 
   
   
   
                                                   duration: 500, 
   
   
   
                                                   complete: function(){ 
   
   
   
                                                      //$("#showMain").css("background",$("#photo"+i).css("background")); 
   
   
   
                                                   } 
   
   
   
                                       }); 
   
   
   
                                       $(moveId).removeClass("photo_show"); 
   
   
   
                                       $(moveId).addClass("photo_buttom"); 
   
   
   
                                    } 
   
   
   
                                    if(tempValue==2){ 
   
   
   
                                        
   
   
   
                                       $(moveId).attr("value",3); 
   
   
   
                                       $(moveId).animate({ 
   
   
   
                                                  "margin-top":"135", 
   
   
   
                                                  "margin-left":"50" 
   
   
   
                                            },  
   
   
   
                                            { 
   
   
   
                                                   duration: 500, 
   
   
   
                                                   complete: function(){ 
   
   
   
                                                   } 
   
   
   
                                       }); 
   
   
   
                                       $(moveId).removeClass("photo_buttom"); 
   
   
   
                                       $(moveId).addClass("photo_behined"); 
   
   
   
    
   
   
   
                                    } 
   
   
   
                                    if(tempValue==3){ 
   
   
   
                                        
   
   
   
                                       $(moveId).attr("value",4); 
   
   
   
                                       $(moveId).animate({ 
   
   
   
                                                  "margin-top":"15", 
   
   
   
                                                  "margin-left":"25" 
   
   
   
                                            },  
   
   
   
                                            { 
   
   
   
                                                   duration: 500, 
   
   
   
                                                   complete: function(){ 
   
   
   
                                                   } 
   
   
   
                                       }); 
   
   
   
                                       $(moveId).removeClass("photo_behined"); 
   
   
   
                                       $(moveId).addClass("photo_header"); 
   
   
   
                                    } 
   
   
   
                                    if(tempValue==4){ 
   
   
   
                                       //alert("ddd"); 
   
   
   
                                        
   
   
   
                                       $(moveId).attr("value",1); 
   
   
   
                                       $(moveId).animate({ 
   
   
   
                                                  "margin-top":"135", 
   
   
   
                                                  "margin-left":"0" 
   
   
   
                                            },  
   
   
   
                                            { 
   
   
   
                                                   duration: 500, 
   
   
   
                                                   complete: function(){ 
   
   
   
                                                     //alert(id); 
   
   
   
                                                     var tempColor=$("#"+id).css("background"); 
   
   
   
                                                     $("#showMain").css("background",tempColor); 
   
   
   
                                                   } 
   
   
   
                                       }); 
   
   
   
                                       $(moveId).removeClass("photo_header"); 
   
   
   
                                       $(moveId).addClass("photo_show"); 
   
   
   
                                    } 
   
   
   
                            } 
   
   
   
                   } 
   
   
   
                           
   
   
   
                  if(flag>0){ 
   
   
   
                            var list=$("#"+info+" div").length; 
   
   
   
                            for(var i=1;i<=list;i++){ 
   
   
   
                                   //alert(i); 
   
   
   
                                   var moveId="#"; 
   
   
   
                                   if(info=='showLeft'){ 
   
   
   
                                       moveId+="photo"+i; 
   
   
   
                                   }else{ 
   
   
   
                                       moveId+="photoRight"+i; 
   
   
   
                                       //alert(m);photoRight4 
   
   
   
                                   } 
   
   
   
                                   var tempValue=$(moveId).attr("value"); 
   
   
   
                                    if(tempValue==1){ 
   
   
   
                                        
   
   
   
                                       $(moveId).attr("value",4); 
   
   
   
                                       $(moveId).animate({ 
   
   
   
                                                  "margin-top":"15", 
   
   
   
                                                  "margin-left":"25" 
   
   
   
                                            },  
   
   
   
                                            { 
   
   
   
                                                   duration: 500, 
   
   
   
                                                   complete: function(){ 
   
   
   
                                                      //$("#showMain").css("background",$("#photo"+i).css("background")); 
   
   
   
                                                   } 
   
   
   
                                       }); 
   
   
   
                                       $(moveId).removeClass("photo_show"); 
   
   
   
                                       $(moveId).addClass("photo_header"); 
   
   
   
                                    } 
   
   
   
                                    if(tempValue==2){ 
   
   
   
                                        
   
   
   
                                       $(moveId).attr("value",1); 
   
   
   
                                       $(moveId).animate({ 
   
   
   
                                                  "margin-top":"135", 
   
   
   
                                                  "margin-left":"0" 
   
   
   
                                            },  
   
   
   
                                            { 
   
   
   
                                                   duration: 500, 
   
   
   
                                                   complete: function(){ 
   
   
   
                                                   } 
   
   
   
                                       }); 
   
   
   
                                       $(moveId).removeClass("photo_buttom"); 
   
   
   
                                       $(moveId).addClass("photo_show"); 
   
   
   
    
   
   
   
                                    } 
   
   
   
                                    if(tempValue==3){ 
   
   
   
                                        
   
   
   
                                       $(moveId).attr("value",2); 
   
   
   
                                       $(moveId).animate({ 
   
   
   
                                                  "margin-top":"255", 
   
   
   
                                                  "margin-left":"25" 
   
   
   
                                            },  
   
   
   
                                            { 
   
   
   
                                                   duration: 500, 
   
   
   
                                                   complete: function(){ 
   
   
   
                                                   } 
   
   
   
                                       }); 
   
   
   
                                       $(moveId).removeClass("photo_behined"); 
   
   
   
                                       $(moveId).addClass("photo_buttom"); 
   
   
   
                                    } 
   
   
   
                                    if(tempValue==4){ 
   
   
   
                                       //alert("ddd"); 
   
   
   
                                        
   
   
   
                                       $(moveId).attr("value",3); 
   
   
   
                                       $(moveId).animate({ 
   
   
   
                                                  "margin-top":"135", 
   
   
   
                                                  "margin-left":"50" 
   
   
   
                                            },  
   
   
   
                                            { 
   
   
   
                                                   duration: 500, 
   
   
   
                                                   complete: function(){ 
   
   
   
                                                      var tempColor=$("#"+id).css("background"); 
   
   
   
                                                     $("#showMain").css("background",tempColor); 
   
   
   
                                                   } 
   
   
   
                                       }); 
   
   
   
                                       $(moveId).removeClass("photo_header"); 
   
   
   
                                       $(moveId).addClass("photo_behined"); 
   
   
   
                                    } 
   
   
   
                            } 
   
   
   
                  } 
   
   
   
                   
   
   
   
          } 
   
   
   
       </script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
      <div id="main"> 
   
   
   
         <div id="top"> 
   
   
   
            <div id="header1"></div> 
   
   
   
            <div id="header2"><img src="/images/main_logo.jpg"/></div> 
   
   
   
            <div id="header3"><img src="/images/main_logoline.jpg"/></div> 
   
   
   
         </div> 
   
   
   
         <div id="showPro"> 
   
   
   
            <div id="showLeft"> 
   
   
   
               <div id="photo4" value="4" class="photo_header" style="background:#7c7116;" ></div> 
   
   
   
               <div id="photo1" value="1" class="photo_show" style="background:#df6810;"></div> 
   
   
   
               <div id="photo2" value="2" class="photo_buttom" style="background:#10df85;"></div> 
   
   
   
               <div id="photo3" value="3" class="photo_behined" style="background:#012210;"></div> 
   
   
   
            </div> 
   
   
   
            <div id="showRight"> 
   
   
   
              <div id="photoRight4" value="4" class="photo_header" style="background:#7c7116;" ></div> 
   
   
   
              <div id="photoRight1" value="1" class="photo_show" style="background:#df6810;"></div> 
   
   
   
              <div id="photoRight2" value="2" class="photo_buttom" style="background:#10df85;"></div> 
   
   
   
              <div id="photoRight3" value="3" class="photo_behined" style="background:#012210;"></div> 
   
   
   
           </div> 
   
   
   
            <div id="showMain" style=""> 
   
   
   
             
   
   
   
            </div> 
   
   
   
         </div> 
   
   
   
      </div> 
   
   
   
   </body> 
   
   
   
   </html>

很简陋的代码，但觉得很实用。

可以加入让其自动旋转的操作

  
  
  
  
   
   
   
   var autospeed = 3000; 
   
   
   
          //定义索引，图片从最后一张开始转起 
   
   
   
          var index1=4; 
   
   
   
          var index2=4; 
   
   
   
          //左侧自动转向 
   
   
   
          function autoroll1() { 
   
   
   
                   //alert(index); 
   
   
   
                   dinalChangImg("showLeft","photo"+index1); 
   
   
   
                   //dinalChangImg("showRight","photoRight"+index); 
   
   
   
                   index1--; 
   
   
   
                   timer1 = setTimeout(autoroll1, autospeed); 
   
   
   
                   if(index1<1) 
   
   
   
                    index1=4; 
   
   
   
                   //ul.animate({left:"-1000px"},speed); 
   
   
   
           }; 
   
   
   
           autoroll1();

本文出自 “君莫邪儿” 博客，转载请与作者联系！

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
C#中使用split分割字符串互联网打工人no1 c#
1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
Google earth studio 简介陟彼高冈yu 旅游
GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java 算法华为 javascript
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
数组去重好奇的猫猫猫
整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS 算法数据结构 c++
题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
docker igotyback eureka 云原生
Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
在Ubuntu中编译含有JSON的文件出现报错芝麻糊76 Linux kill_bug linux ubuntu json
在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
Xinference如何注册自定义模型玩人工智能的辣条哥人工智能 AI 大模型 Xinference
环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
大雄的新恐龙：养育生命，的确不易沧浪先生
哆啦A梦这个动画片，我小时候没有看过，长大了之后似乎对这种充满童真童趣的动画片也没有太多的喜爱，所以结果很明显，我并没有看过哆啦A梦这个动画片。但是近年来大屏幕的兴起，让各家影视剧制作者发现了电影化的好处，没错，电影不仅影响力更大，钱赚得也多。《哆啦A梦·大雄的新恐龙》是最新的一部大屏幕电影，大雄和柯南一样，都永远长不大，而且他和他的小伙伴日复一日、年复一年地和机器猫哆啦A梦在一起玩耍，永远的神奇
Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python 开发语言
一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 error react mongodb 数据库
背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
利用python实现图片格式之间的相互转换难得北窗高卧 python 开发语言
一、概要图片一般有多种格式，常见的图片格式包括：JPEG（.jpg或.jpeg）：一种广泛使用的有损压缩格式，适用于摄影图像和网页上的图片。PNG（.png）：一种无损压缩格式，支持透明度和更好的图像质量，常用于图标、图形和需要透明背景的图片。该图片是4通道的，外加一个透明通道。如截屏GIF（.gif）：一种支持动画和透明度的格式，常用于简单的动画和图标。BMP（.bmp）：一种无损格式，存储图像
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
更改npm镜像源为淘宝镜像骆小骆基于node.js
npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
COCO 格式的数据集转化为 YOLO 格式的数据集 QYQY77 YOLO python
"""--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances
NPM私库搭建-verdaccio（Linux） Beam007 npm linux 前端
1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件，解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改：/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
golang获取用户输入的几种方式余生逆风飞翔 golang 开发语言后端
一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的
8 冰鈊夢
transition动画transform.box{width:200px;height:200px;background-color:gold;margin:50pxauto0;transition:all1sease;}.box:hover{transform:translate(50px,50px);}.box2{width:200px;height:200px;background-col
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
极度休闲的一天淡泊孤峰
国庆国庆，普天同庆。在家躺着看大家游山玩水，长辈走亲戚，我的微信一天没几条消息，标准结局，习惯了。哈利波特系列电影真不错，童年总幻想着像主角哈利一样，像《龙族》少年楚子航浪迹江湖，风云天下。而现在却败给华为ICT大赛题还有永无止境的代码视频，唉，真可笑！
动画电影《心灵奇旅》教你怎么做人，皮克斯为全人类上了一课韩漫小说
皮克斯出品，必属精品。不知从什么时候，这句话成了中国影迷和动画迷对皮克斯的认可和肯定。作为八十年代的人，虽然现在已经迈入中年，但是从小就对动画片十分痴迷。从《奥特曼》到《高达》，从《黑猫警长》到《海贼王》。动画伴我成长，给了我很多快乐。接触皮克斯的动画，是《玩具总动员》，看了真的令人感动。这不仅是儿童的欢乐片，也是给八零九零后奉献的精美大作。然而这一次的《心灵奇旅》，更是让我对皮克斯刮目相看。这次
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js 前端 javascript node.js npm
node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Dom 周华华 JavaScript html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
【Spark九十六】RDD API之combineByKey bit1129 spark
1. combineByKey函数的运行机制 RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一首先看一下combineByKey的方法说明：
msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解 daizj mysql 设置密码
MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；问题原因：你输入的密码是明文。不允许这么输入。解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串，然后
路漫漫其修远兮吾将上下而求索周凡杨学习思索
王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注
Hadoop(二)对话单的操作朱辉辉33 hadoop
Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,)
web报表工具FineReport常用函数的用法总结（日期和时间函数）老A不折腾 finereport 报表工具 web开发
web报表工具FineReport常用函数的用法总结（日期和时间函数）说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。 DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。
c++ 宏定义中的##操作符墙头上一根草 C++
#与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a) #a #define h(a) g(a) int main() { &nbs
分析Spring源代码之，DI的实现 aijuans spring DI 现源代码
(转) 分析Spring源代码之，DI的实现 2012/1/3 by tony 接着上次的讲，以下这个sample [java] view plain copy print
for循环的进化 alxw4616 JavaScript
// for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le
网络编程Socket和ServerSocket简单的使用百合不是茶网络编程基础 IP地址端口
网络编程;TCP/IP协议网络:实现计算机之间的信息共享,数据资源的交换协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去端口:用于计算机之间的通信每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535 查看被使用的
JDK1.5 生产消费者 bijian1013 java thread 生产消费者 java多线程
ArrayBlockingQueue：一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部是在队列中存在时间最长的元素。队列的尾部是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法：
JAVA版身份证获取性别、出生日期及年龄 bijian1013 java 性别出生日期年龄
工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import
【Java范型六】范型与枚举 bit1129 java
首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的 public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null;
【Nginx五】Nginx常用日志格式含义 bit1129 nginx
1. log_format 1.1 log_format指令用于指定日志的格式，格式： log_format name(格式名称) type(格式样式) 1.2 如下是一个常用的Nginx日志格式： log_format main '[$time_local]|$request_time|$status|$body_bytes
Lua 语言 15 分钟快速入门 ronin47 lua 基础
- - 单行注释 - - [[ [多行注释] - - ]] - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring'
java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 ) bylijinnan java
the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维
mongoDB文档型数据库特点开窍的石头 mongoDB文档型数据库特点
MongoDD: 文档型数据库存储的是Bson文档-->json的二进制特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的文档型数据库：不用定好数据结构，
[毕业季节]欢迎广大毕业生加入JAVA程序员的行列 comsci java
一年一度的毕业季来临了。。。。。。。。正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的
PHP操作Excel – PHPExcel 基本用法详解 cuiyadll PHP Excel
导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties
IBM Webshpere MQ Client User Issue (MCAUSER) darrenzhu IBM jms user MQ MCAUSER
IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i
网线的接法 dcj3sjt126com
一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。二、PC连PC （交叉线）A端：(568A)：白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。三、HUB连HUB&nb
Vimium插件让键盘党像操作Vim一样操作Chrome dcj3sjt126com chrome vim
什么是键盘党？键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。在chrome里安装 vimium 插件
MongoDB查询（2）——数组查询[六] eksliang mongodb MongoDB查询数组
MongoDB查询数组转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述 MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹
cordova读写文件（1） gundumw100 JavaScript Cordova
使用cordova可以很方便的在手机sdcard中读写文件。首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&
HTML5 FormData 进行文件jquery ajax 上传到又拍云 ileson jquery Ajax html5 FormData
html5 新东西：FormData 可以提交二进制数据。页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <
swift appearanceWhenContainedIn:(version1.2 xcode6.4) 啸笑天 version
swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION; 解决方法：在swift项目中新建oc类如下： #import &
java实现SMTP邮件服务器 macroli java 编程
电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。　　◆ SMTP 协议　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的
mongodb group by having where 查询sql qiaolevip 每天进步一点点学习永无止境 mongo 纵观千象
SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: {
Struts2 Pojo（六） Luob. POJO strust2
注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q
struts2步骤 wuai struts
1、添加jar包 2、在web.xml中配置过滤器 <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.st

js 动画，一个图片旋转的动画

你可能感兴趣的:(js,动画,360,休闲,imageRoll)