程序员经验分享-hwhale

vue3手动封装一个点击滚动，左右切换的商品展示效果图，纯js

2023-11-20

 展示效果

效果图如下，默认展示第一张图片，只有两边有按钮切换，也可以点击图片切换

点击的图片从第三个开始时居中显示

 

分析一波

从底部的第三张图片开始到末尾的第八张图片都是居中显示。点击左右要进行切换，也要居中显示。所以我在这里用的的时在X轴上进行平移来进行实现。

过程

我是以十张图片为例子：

body部分代码

imgs里面的类容是上面的显示大图，用v-if来判断是否显示。

imgs2里面是下面控制的显示的小图，自定义class类名，主要根据这个类名进行判断是否显示当前点击的图片。

给imgs2的父节点绑定点击事件：@click=zhanshi

 <div class="detail">
          <div>
            <div class="imgs">
              <img
                v-if="index == 1"
                src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 2"
                src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 3"
                src="https://pic1.ajkimg.com/display/anjuke/11d225-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/971db4bdcae486d82c3fc22968303303-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 4"
                src="https://pic1.ajkimg.com/display/anjuke/add4c1-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/91ddb254a4154fbc576120d6ab917515-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 5"
                src="https://pic1.ajkimg.com/display/anjuke/f7167c-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/57311e438d4977c7ce1f8c8fbe49c01b-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 6"
                src="https://pic1.ajkimg.com/display/anjuke/6dd413-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/e834ff8faf4c1e4fd53e09229293913e-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 7"
                src="https://pic1.ajkimg.com/display/anjuke/4be035-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/c6712ca73a7a5bea397760189791f6ea-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 8"
                src="https://pic1.ajkimg.com/display/anjuke/0ae9e5-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/cbd662e82bb68d247f3405dd5f5f01bc-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 9"
                src="https://pic1.ajkimg.com/display/anjuke/6c7b2e-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/2f14341af2fe8c08a11c23e2575a74a0-800x650.jpg?frame=1"
                alt=""
              />
              <img
                v-else-if="index == 10"
                src="https://pic1.ajkimg.com/display/anjuke/424ebf-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/ca1cb31cd00ca7dfcc0a1c5ad9e3887d-800x650.jpg?frame=1"
                alt=""
              />
            </div>
            <div class="left_imgs" @click="zhanshi">
              <div class="icons" style="margin-right: 5px">
           &lt;
              </div>
              <div class="imgs2">
                <img
                  class="1"
                  src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="2"
                  src="https://pic1.ajkimg.com/display/anjuke/36b903-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/9f212ffe4ef6210c6a478b7c6d37f90d-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="3"
                  src="https://pic1.ajkimg.com/display/anjuke/11d225-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/971db4bdcae486d82c3fc22968303303-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="4"
                  src="https://pic1.ajkimg.com/display/anjuke/add4c1-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/91ddb254a4154fbc576120d6ab917515-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="5"
                  src="https://pic1.ajkimg.com/display/anjuke/f7167c-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/57311e438d4977c7ce1f8c8fbe49c01b-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="6"
                  src="https://pic1.ajkimg.com/display/anjuke/6dd413-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/e834ff8faf4c1e4fd53e09229293913e-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="7"
                  src="https://pic1.ajkimg.com/display/anjuke/4be035-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/c6712ca73a7a5bea397760189791f6ea-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="8"
                  src="https://pic1.ajkimg.com/display/anjuke/0ae9e5-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/cbd662e82bb68d247f3405dd5f5f01bc-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="9"
                  src="https://pic1.ajkimg.com/display/anjuke/6c7b2e-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/2f14341af2fe8c08a11c23e2575a74a0-800x650.jpg?frame=1"
                  alt=""
                />
                <img
                  class="10"
                  src="https://pic1.ajkimg.com/display/anjuke/424ebf-%E6%88%BF%E6%88%BF%E9%80%9A%E6%88%BF%E5%9C%B0%E4%BA%A7/ca1cb31cd00ca7dfcc0a1c5ad9e3887d-800x650.jpg?frame=1"
                  alt=""
                />
              </div>
              <div class="icons2" style="margin-left: 10px">
                >
              </div>
            </div>
          </div>
          <div>2</div>
        </div>

 初始化元素

before是用保存点击图片的前一次的类名，用来跟这一次的做比较，以此来得出位移的距离

flag是用来判断是否点击过了，主要是用来判断是不是第一次点击class为5，因为它的位移要多一倍。

num是点击一次左边按钮或者右边按钮来进行自增自减，以此控制图片的切换

let before = ref(3)
let flag = ref(false)
let num=ref(1)

黑框显示，控制图片的显示

 js代码：点击下面的小图还要出现一个黑框框，我们用if排除掉imgs2父节点的其他children。保证我们得到的imgs2，再找出imgs2的children。

显示当前点击的图片，出现黑框。主要用到排他法，找到imgs2的所有孩子节点，利用for循环把所有的黑框都去掉；结束后再单独给当前点击的节点添加黑框。

// 点击的img图片
  if (
    e.target.className != 'detail' &&
    e.target.className != 'left_imgs' &&
    e.target.className != 'imgs2'&&e.target.className!="icons"&&e.target.className!="icons2"
  ) {
   // index.value用来获取点击的类型，在body中渲染元素
   index.value = e.target.className * 1;
    num.value=e.target.className*1;
    let nodes = e.target.parentNode.children
    for (let i = 0; i < nodes.length; i++) {
      let box = document.getElementsByClassName(nodes[i].className)[0]
      box.style.border = '0'
    }
    box.style.border = '2px solid #000'
  }

位移的计算，点击图片部分

从第三个开始和第八个都是居中显示，用个if进行判断，其余节点就不会进行位移。

// img部分 用before来控制位移的距离，这一次-前一次=before，用位移的距离*before
  if ((e.target.className * 1 >= 3 && e.target.className * 1 < 9)) {
// 首次进去，判断首次是不是点击的类名为5的，为5整体向前移动294px
    if (e.target.className * 1 != 5 || flag.value) {
      flag.value = true
// 上一次的值为10的话，这次为7.我们最开始定义的就是8为最后一个中间值，before只用移动一次就可以了
      if(before.value==10&&e.target.className*1==7){
        before.value=-1;
      }else 
// 这次的类型是8，上一次的是9或者10，就不用移动
if((e.target.className*1==8&&before.value==9)||(e.target.className*1==8&&before.value==10)||(e.target.className*1==8&&before.value==10)){
        before.value=0
      }else 
// 一排我们能看见的只有五个元素，第三个为中心，最大也只能向左或者向右移动两次，大于的2次的情况比如说上一次点击的是1，这次点击的是5，差值为4，但是根本就移动不能那么多次。
if(Math.abs(e.target.className-before.value)>=2){
        if(e.target.className-before.value<0){
          before.value=-2
        }else{
          before.value=2
        }
      }else{
        before.value=e.target.className-before.value;
      }
      for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4]
        if (n) {
       box.style.transform = `translateX(${
            -1 * 147 * before.value+ n * 1
          }px)`
        } else {
// 第三次是不需要移动的
          if (e.target.className * 1 == 3) {
            box.style.transform = `translateX(0)`
          } else {
            box.style.transform = `translateX(-147px)`
          }
        }
      }
      before.value = e.target.className * 1;
    }
// 类型为5，把flag重新赋值，每一个节点都向前移动294的排序
  else {
      flag.value = true
      for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
// n用来得到元素的transition的translateX的值
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4]
// 用位移就用上一次的位移值加上这次的
        if (n) {
          box.style.transform = `translateX(-${294 - n * 1}px)`
        } else {
          box.style.transform = `translateX(-294px)`
        }
      }
// 操作执行完了之后，把这次的类型赋值给before，方便下次计算
      before.value = e.target.className * 1;
    }
  }

位移的计算，点击左右按钮部分

// 判断是不是点击的左右两边的按钮    
if((e.target.className=="icons2"||e.target.className=='icons')){
// 判断点击的右边按钮
    if(e.target.className=="icons2"){
// 点击就自增
      num.value=++num.value;
      flag.value=true;
// 判断不能超过最大值 10，超过就轮回到第一张
      if(num.value==11){
        num.value=1;
// 每一图片都要移动，所有用个for 循环
        for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
          box.style.transform = `translateX(0)`
      }
      }else{
        if ((num.value > 3 && num.value < 9))
        for (let j = 1; j <=10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4];
        if (n) {
             box.style.transform = `translateX(${
            -147 + n * 1
          }px)`
        } else{
          box.style.transform = `translateX(${
            -147
          }px)`
        }
      }
      }
// 判断是不是点击的左边按钮
    }else if(e.target.className=="icons"){
      flag.value=true;
      num.value=--num.value
      console.log(num.value,before.value);
      if(num.value!=8&&before.value!=9){
        if(num.value==0){
        num.value=10;
        for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
          box.style.transform = `translateX(-735px)`
      }
      }else{
        if ((num.value > 3 && num.value < 9))
           for (let j = 1; j <= 10; j++) {
        let box = document.getElementsByClassName(j + '')[0]
        let n = document.defaultView
          .getComputedStyle(box, null)
          .transform.substring(7)
          .split(',')[4];
          if(num.value==10){
            n=0;
          }
        if (n) {
          box.style.transform = `translateX(${147 + n * 1}px)`
        }else
        if(num.value==7)
          box.style.transform = `translateX(${147}px)`
        }
      }
      }
    }
// 把自增的值赋给index，以此来展示对应的图片
    index.value=num.value;
// 把自增过后的类名赋值给before，用来保存上一次的值，如果点完按钮再进去点击图片会有个参照
    before.value=num.value;
    let box2=document.getElementsByClassName(num.value+'')[0];   
    let nodes = e.target.parentNode.children[1].childNodes
    for (let i = 0; i < nodes.length; i++) {
      let box = document.getElementsByClassName(nodes[i].className)[0]
      box.style.border = '0'
    }
    box2.style.border = '2px solid #000'

  }

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

前端

vue3手动封装一个点击滚动，左右切换的商品展示效果图，纯js 的相关文章

  • 页面在 Google Adwords 转化跟踪上重定向

    我有一个表单 人们可以在其中提交数据 然后使用 ajax 将数据发送到服务器 我已将其设置为 Google Adwords 中的转化 下面是我使用过的代码 问题是 当用户提交表单时 在收到响应后 它会重定向回我给出的 URL 我不想重定向

  • 在 onclick 事件上请求麦克风

    有一天 我偶然发现了这个 Javascript 录音机的例子 http webaudiodemos appspot com AudioRecorder index html http webaudiodemos appspot com Au

  • javascript：全局变量泄漏

    每当我向 Firefox 提交插件时 我都会收到一封电子邮件 告诉我我的一些变量正在泄漏到全局范围内 一旦他们告诉我我解决了问题 但在那之前有什么方法 程序 来检查变量是否泄漏到全局范围内 Thanks Both JSLint http w

  • 如何检查是否存在可能的路径？

    我正在开发一个基于 javascript 的实验性游戏 玩家必须在二维平铺地图上移动才能退出 请随意检查这个小提琴并演奏 http jsfiddle net moonlife 74vLd 我只是随机放置障碍物 但有时障碍物会挡住玩家和出口之

  • 通过纯 JavaScript 获取 div 的第 n 个子元素

    我有一个名为 myDiv 的 div 元素 我怎样才能得到 myDiv 的第n个孩子DOM https en wikipedia org wiki Document Object Model操纵 Markup function reveal

  • 如何在 mongodb 聚合管道中使用 Javascript 对象？

    我有一个 JS 对象norm我想在 mongo 聚合管道中使用它 如下所示 var norm 1 1 2 1 16 3 1 413 4 1 622 5 1 6 6 1 753 7 3 001 8 2 818 9 3 291 10 2 824

  • jQuery UI Datepicker 奇怪的行为

    我在使用 jqueryUI 使用简单的日期选择器时遇到了一个奇怪的问题 我只想显示两个月的日历 包括上个月和当前月份 我使用了这段代码 function picker datepicker numberOfMonths 2 showCurr

  • Visual Studio 改变 Ctrl-K-D 的工作方式

    In Visual Studio I m using 2012 is there any way of editing the way that Ctrl K D combinations handles its Auto Formatti

  • 自调用函数未定义

    如果我声明一个函数文字 var x function alert hi console log x returns the function code However var x function alert hi console log

  • 修改 Twitter 帖子上可编辑 Div 的内容

    我正在编写一个 chrome 扩展 它可以帮助用户在 Twitter 上输入内容 当在 twitter 上写推文时 twitter 会打开一个可编辑的 div 容器 当用户输入内容时 twitter 大概正在使用某些网络框架 会生成子 di

  • 如何根据另一个下拉列表中的选择动态填充下拉列表中的选项？

    我有一个表 其中包含类别信息 例如产品 我已将它们列在下拉菜单中 现在 我需要做的是 在下一个下拉菜单中列出所选类别的子类别 我希望 javascript 是必需的 但我对 javascript 还不太熟悉 将非常感谢您的帮助 你应该使用

  • Socket IO 服务器到服务器

    服务器是否可以使用 Socket IO 连接到另一个服务器并被视为客户端 并让它加入房间 接收 io sockets in lobby emit 和更多 第一个服务器也在监听连接 消息 嘿 Brad 下面是我的完整 js 应用程序 供参考

  • JSONP 使用 JQuery 从 HTTPS 协议获取 JSON

    我正在尝试获取从 https 安全站点发送的 JSON 客户端希望不要使用任何服务器端语言 全部都是 Javascript 我读到 当使用 Jquery 中的 ajax 函数时 我必须使用 JSONP 才能从安全站点加载 JSON 我的第一

  • 如何在新窗口中打开图像或pdf文件？

    我有一个 gridview 它包含文件名和文件路径 图像和 pdf 格式文件 其中我使用了模板字段 在该字段下放置了 1 个图像按钮 单击该图像按钮 即 查看 按钮 时 我想在新窗口中打开所选文件 这是我的代码 protected void

  • AngularStrap 工具提示禁用我的自定义指令

    我正在尝试让 bs tooltip AngularStrap 指令与我自己的名为 checkStrength 的自定义指令一起使用 该指令检查密码的强度 单独使用这些指令中的任何一个时 它们都可以正常工作 但不能一起工作 This http

  • 使 Bootstrap Popover 在悬停而不是单击时出现/消失

    我正在使用 Bootstrap 构建一个网站Popover http twitter github com bootstrap javascript html popovers我不知道如何使弹出窗口出现在悬停而不是单击时 我想做的就是当有人

  • 选择单选按钮时隐藏/显示 3 个文本框

    我有 2 个单选按钮 选择一个文本框时 我想显示 3 个文本框 并在选择其他文本框时隐藏它 这是代码 这是我的 2 个单选按钮

  • 如何从除自身之外的其他（blazor）库引用js/css文件？

    我如何引用 使用位于引用的 blazor 项目中的 css cs 文件 该文件与 host cshtml 中的当前项目不同 我的意思是

  • 如何获取符号名称（文字）？

    以下情况 var myVehicle brand Tesla var isMoving Symbol var currentStatus Symbol myVehicle isMoving true myVehicle currentSta

  • Keycloak-js updateToken(minValidity) 需要澄清

    我在Keycloak js中阅读了很多该方法的示例 但没有对以下方法进行明确的解释 updateToken minValidity number KeycloakPromise

随机推荐

  • Oracle块损坏处理(MOS)

    处理 Oracle 块损坏 文档 ID 1526911 1 适用于 Oracle Database Enterprise Edition 版本 7 0 16 0 到 11 2 0 2 0 发行版 7 0 到 11 2 本文档所含信息适用于所

  • 微信小程序 如何返回上一个页面并实现刷新

    转载地址 https blog csdn net u011088792 article details 87938213 删除或编辑 之后返回 上一级并刷新 var pages getCurrentPages var beforePage

  • R语言实现RMF模型

    RMF模型说明 RMF模型是客户管理中 常被用来衡量客户价值和客户创利能力的重要方法 它主要考量三个指标 最近一次消费 Recency 近期购买的客户倾向于再度购买 消费频率 Frequency 经常购买的客户再次购买概率高 消费金额 Mo

  • 8年测试经验分享 —— 从0铸造测试技术壁垒

    前言 相信所有从事着软件测试或相关工作的同学都会思考一个问题 如何在持续且部分重复的测试活动中有效的进行测试技术积累 这个有趣的问题我先不予回答 我们先谈谈如何有效保证软件质量 作为团队中的质量保证者 需要深刻的意识到 验证系统原有功能是否

  • oracle 12c recover table恢复单表

    在 Oracle 12c 之前 如果误删一张表 常规的方法是 Flashback 闪回或 TSPITR 如果需要恢复的表空间过大 TSPITR 会耗时非常久 而开启 flashback 会消耗磁盘空间 在 12C 中oracle提供一个新功

  • java接口的详解

    文章目录 接口 1 1 接口的概念 1 2 接口语法规则 1 3 接口使用 1 4 接口特性 1 5 实现多个接口 1 6 接口间的继承 1 7 特殊的接口 1 7 1 Comparable接口实现compareTo方法 1 7 2 Com

  • 5. 一线大厂高并发缓存架构实战与性能优化

    分布式缓存技术Redis 1 冷热数据分离 2 缓存设计 2 1 缓存击穿 失效 2 2 缓存穿透 2 3 缓存雪崩 3 大V直播带货导致线上商品系统崩溃原因分析 4 突发性热点缓存重建导致系统压力暴增问题 5 缓存数据库双写不一致问题 6

  • pytest+UI自动化测试结果回填到excel并发送excel测试报告邮件

    现在写的脚本是web UI自动化 这个和接口自动化区别非常大 没法像接口那样请求 返回 校验结果 UI自动化 一个用例跑下来 是页面 页面 页面 完成 这样 但是还是想实现一种结果回填到excel中 看测试结果就直接看excel就可以了 一

  • WPF 路径动画PathAnimations的使用

    在wpf中让一个控件按照一定的路径运行的动画 叫做路径动画 这个示例演示了让一个rectangle按照一个s形曲线反复运行的动画 效果 只有一个文件 全部代码如下

  • 第三章 创建主窗口

    创建一个主窗口 具有菜单 工具栏 状态栏和对话框之类的界面和功能 实现电子制表软件的主窗口框架 效果 mainwindow h 头文件就不做太多解释 以注释的方式解释函数 ifndef MAINWINDOW H define MAINWIN

  • 收藏！超全机器学习资料合集！（附下载）

    来源 机器学习算法与自然语言处理 本文长度为1098字 建议阅读3分钟 本文为你分享机器学习爱好者必备的资源 最近在群里发现一些小伙伴在寻找资料的时候总是无处可找 网上出现很多收集免费资料再去打包收钱的人 我看不惯这样的人 所以把自己收集的

  • 深度学习03—手写数字识别实例（Tensorflow版实验）

    目录 0 实验概述 1 利用Tensorflow自动加载mnist数据集 2 手写数字识别体验 2 1 准备网络结构与优化器 2 2 计算损失函数与输出 2 3 梯度计算与优化 2 4 循环 2 5 完整代码 补充 os environ T

  • linux学习2：定时任务

    1 crontab命令 crontab e 编辑crontab定时任务 crontab l 查询定人任务 crontab r 删除当前用户所有的定时任务 1 1 每分钟将home路径下的详细信息保存到 home ls txt中 cronta

  • prometheus告警模块ALTERMANAGER中抑制规则的使用

    prometheus服务端通过配置文件可以设置告警 下面是一个告警设置的配置文件alert yml groups name goroutines monitoring rules alert TooMuchGoroutines expr g

  • 【算法】动态规划

    动态规划的定义 动态规划是运筹学的一个分支 是求解决策过程的最优化的数学方法 20世纪50年代初美国数学家R E Bellman等人在研究多阶段决策过程的优化问题时 提出了著名的最优化原理 把多阶段过程转化为一系列单阶段问题 利用各阶段之间

  • 漏洞扫描工具大全，妈妈再也不用担心我挖不到漏洞了

    1 常见漏洞扫描工具 NMAP AWVS Appscan Burpsuite x ray Goby 2 端口扫描之王NMAP Nmap是一款非常强大的实用工具 包含的功能如下 主机探测 端口扫描 服务版本扫描 主机系统指纹识别 密码破解 漏

  • 机器学习 day27（反向传播）

    1 导数 函数在某点的导数为该点处的斜率 用height width表示 可以看作若当w增加 J w b 增加k倍的 则k为该点的导数 2 反向传播 tensorflow中的计算图 由有向边和节点组成 从左向右为正向传播 神经网络模型使用正

  • 程序员的浪漫—利用Matlab 实现圣诞树动态显示

    一 前言 圣诞节是基督教纪念耶稣诞生的重要节日 亦称耶稣圣诞节 主降生节 天主教亦称耶稣圣诞瞻礼 耶稣诞生的日期 圣经 并无记载 公元336年罗马教会开始在12月25日过此节 12月25日原是罗马帝国规定的太阳神诞辰 有人认为选择这天庆祝圣

  • MES11大标准模块（ISA95）

    1 资源分配及状态管理 ResourceAllocationandStatus 该功能管理机床 工具 人员物料 其它设备以及其它生产实体 满足生产计划的要求对其所作的预定和调度 用以保证生产的正常进行 提供资源使用情况的历史记录和实时状态信

  • vue3手动封装一个点击滚动，左右切换的商品展示效果图，纯js

    展示效果 效果图如下 默认展示第一张图片 只有两边有按钮切换 也可以点击图片切换 点击的图片从第三个开始时居中显示 分析一波 从底部的第三张图片开始到末尾的第八张图片都是居中显示 点击左右要进行切换 也要居中显示 所以我在这里用的的时在X轴

热门标签