旋转木马案例

旋转木马

如果接口需要的数据格式和原始数据提供的格式有差异

不要去改接口方法 也不要改原始数据

做一层中间件(数据处理函数/方法)

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 旋转木马 </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
    }

    html,
    body {
      height: 100%;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slider-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .pic-list {
      position: relative;
      width: 1200px;
      height: 600px;
    }

    .pic-list li {
      position: absolute;
      box-shadow: 0 0 4px #222;
    }

    .pic-list li img {
      width: 100%;
      height: 100%;
    }

    .btn-wrap span {
      position: absolute;
      top: -150px;
      bottom: 0;
      margin: auto;
      z-index: 2;
      width: 120px;
      height: 240px;
      line-height: 240px;
      text-align: center;
      font-size: 80px;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
      border-radius: 8px;
    }

    .btn-wrap span.prev {
      left: -120px;
    }

    .btn-wrap span.next {
      right: -120px;
    }
  </style>
</head>

<body>
  <div class="slider-wrap">
    <ul class="pic-list">
      <li><img src="images/re1.jpg" alt=""></li>
      <li><img src="images/re2.jpg" alt=""></li>
      <li><img src="images/re3.jpg" alt=""></li>
      <li><img src="images/re4.jpg" alt=""></li>
      <li><img src="images/re5.jpg" alt=""></li>
    </ul>
    <div class="btn-wrap">
      <span class="prev"> &lt; </span>
      <span class="next"> &gt; </span>
    </div>
  </div>
  <script src="js/common.js"></script>

  <script>
    var posData = [
      {
        zIndex: 0,
        top: -120,
        left: 80,
        width: 400,
        height: 250,
      },
      {

        zIndex: 1,
        top: 0,
        left: 0,
        width: 600,
        height: 375,
      },
      {

        zIndex: 2,
        top: 80,
        left: 200,
        width: 800,
        height: 500,
      },
      {

        zIndex: 1,
        top: 0,
        left: 600,
        width: 600,
        height: 375,
      },
      {

        zIndex: 0,
        top: -120,
        left: 720,
        width: 400,
        height: 250,
      }
    ];
    var oPic = $('.pic-list')
    var aLi = oPic.children
    var oBtn = $('.btn-wrap')

    posData = format(posData)
    translate()

    var tapMap = {
      'prev': function () {
        posData.push(posData.shift())
      },
      'next': function () {
        posData.unshift(posData.pop())
      },
    }
    
    oBtn.addEventListener('click', function (e) {
      if(e.target.tagName.toLowerCase() === 'span'){
        if(tapMap[e.target.className] && typeof tapMap[e.target.className] === 'function'){
          tapMap[e.target.className]()
          translate()
        }
      }
    }, false)

    function format() {
      return posData.map(function (item, idx) {
        var newData = {}
        for(var key in item) {
          if(key === 'zIndex') {
            newData[key] = item[key]
            continue
          }
          newData[key] = item[key] + 'px'
        }
        return newData
      })
    }

    function format (data) {
      return data.map(item => ({ 
        ...Object.fromEntries(Object.entries(item).map(([key, val]) => [key, val + 'px'])), 
        zIndex: item['zIndex'] 
      }))
    }

    function translate() {
      posData.forEach(function (item, idx) {
        animate (aLi[idx], item)
      })
    }
  </script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/785154.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习】(基础篇二) —— 监督学习和无监督学习

监督学习和无监督学习 本文介绍机器学习的分类&#xff0c;监督学习和无监督学习 监督学习 监督学习&#xff08;Supervised Learning&#xff09;是机器学习的一个核心分支&#xff0c;大部分的机器学习任务都是由监督学习完成的。 它涉及到使用带有标签的训练数据来训练模…

利用 Python 解析pcap文件

1、问题背景 当面对处理网络数据包分析时&#xff0c;pcap文件作为一个常见的文件格式存储了网络数据包的详细记录&#xff0c;它常常被用来进行网络故障排查或安全分析。为了充分利用这些数据&#xff0c;我们需要对其进行解析并提取出有价值的信息&#xff0c;例如数据包类型…

Why Can’t Robots Click The “I’m Not a Robot” Box On Websites?

Clicking a tiny box tells Google all they need to know about your humanity 你好,我是 Jiabcdefh。 if you’ve browsed the internet for any amount of time, you will likely come across a reCAPTCHA box. These boxes appear when you first enter certain websites…

关于Mars3d的入门

关于Mars3d的入门 一. 创建地球&#xff0c;加载瓦片图层二 矢量图层2.1 常用矢量图层2.1.1 GraphicLayer2.1.2 GeoJsonLayer 2.2 矢量图层的点击事件 三 矢量数据四 事件机制 一. 创建地球&#xff0c;加载瓦片图层 // 1. 创建地球let map new mars3d.Map("mars3dContai…

孕产妇(产科)管理信息系统源码 三甲医院产科电子病历系统成品源代码

孕产妇&#xff08;产科&#xff09;管理信息系统源码 三甲医院产科电子病历系统成品源代码 医院智慧孕产是一种通过信息化手段,实现孕产期宣教、健康服务的院外延伸,对孕产妇健康管理具有重要意义,是医院智慧服务水平和能力的体现。实行涵盖婚前检查、孕期保健、产后康复的一…

极客时间:使用Autogen Builder和本地LLM(Microsoft Phi3模型)在Mac上创建本地AI代理

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

C语言之数据在内存中的存储(1),整形与大小端字节序

目录 前言 一、整形数据在内存中的存储 二、大小端字节序 三、大小端字节序的判断 四、字符型数据在内存中的存储 总结 前言 本文主要讲述整型包括字符型是如何在内存中存储的&#xff0c;涉及到大小端字节序这一概念&#xff0c;还有如何判断大小端&#xff0c;希望对大…

python极速入门笔记(三)

1. 函数 #定义函数""" def 函数名&#xff08;参数&#xff09;:...return ** """ def calc_BMI(weight,height):BMIweight/(height**2)if BMI<18.5:category"偏瘦"elif BMI<25:category"正常"elif BMI<30:catego…

红外光气体检测:1.分子振动与红外吸收、检测系统的基本模型和红外敏感元件

分子振动与红外吸收 分子偶极矩的变化频率与分子内原子振动状态有关&#xff1a;μqd&#xff0c;其中μ是偶极矩&#xff0c;q是电荷&#xff0c;d是正负电荷中心距离。 分子在…

怎样优化 PostgreSQL 中对布尔类型数据的查询?

文章目录 一、索引的合理使用1. 常规 B-tree 索引2. 部分索引 二、查询编写技巧1. 避免不必要的类型转换2. 逻辑表达式的优化 三、表结构设计1. 避免过度细分的布尔列2. 规范化与反规范化 四、数据分布与分区1. 数据分布的考虑2. 表分区 五、数据库参数调整1. 相关配置参数2. 定…

深度学习-梯度下降算法-NLP(五)

梯度下降算法 深度学习中梯度下降算法简介找极小值问题数学上求最小值梯度梯度下降算法 找极小值问题在深度学习流程中深度学习整体流程图求解损失函数的目标权重的更新 深度学习中梯度下降算法简介 找极小值问题 引子&#xff1a; 我们训练一个人工智能模型&#xff0c;简单…

记录一次Nginx的使用过程

一、Docker安装配置nginx 1.拉取镜像 docker pull nginx2.创建挂载目录 启动前需要先创建Nginx外部挂载目录文件夹 主要有三个目录 conf&#xff1a;配置文件目录log&#xff1a;日志文件目录html&#xff1a;项目文件目录&#xff08;这里可以存放web文件&#xff09; 创建挂…

【沐风老师】3DMAX建筑体块生成插件BuildingBlocks使用方法详解

BuildingBlocks建筑体块生成插件使用方法详解 听说你还在手动建配景楼&#xff1f;有了BuildingBlocks这个插件&#xff0c;一分钟搞定喔&#xff01; 3DMAX建筑体块生成插件BuildingBlocks&#xff0c;用于快速自定义街道及生成配景楼区块。 【适用版本】 3dMax2019及更高版…

鸿蒙语言基础类库:【@ohos.process (获取进程相关的信息)】

获取进程相关的信息 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。…

【专项刷题】— 位运算

常见类型介绍&#xff1a; & &#xff1a;有 0 就是 0 | &#xff1a;有 1 就是 1 ^ &#xff1a;相同为 0 &#xff0c;相异为 1 或者 无进位相加给定一个数确定它的二进制位的第x个数是0还是1&#xff1a;将一个数的二进制的第x位改成1&#xff1a;将一个数的二进制的第x…

无人机在交通管理方面的应用与潜力

随着智能化和数字化技术的发展&#xff0c;无人机已经成为智慧交通管理体系中的重要一环。无人机能够搭载各种专业设备&#xff0c;如超清摄像头、红外热成像摄像头、目标跟踪器等&#xff0c;从而完成多任务的数据采集和快速机动的任务执行。这些数据通过无线传输实时回传&…

RxJava学习记录

文章目录 1. 总览1.1 基本原理1.2 导入包和依赖 2. 操作符2.1 创建操作符2.2 转换操作符2.3 组合操作符2.4 功能操作符 1. 总览 1.1 基本原理 参考文献 构建流&#xff1a;每一步操作都会生成一个新的Observable节点(没错&#xff0c;包括ObserveOn和SubscribeOn线程变换操作…

YOLOv10改进 | 主干篇 | 低照度增强网络PE-YOLO改进主干(改进暗光条件下的物体检测模型)

一、本文介绍 本文给大家带来的改进机制是低照度图像增强网络PE-YOLO中的PENet&#xff0c;PENet通过拉普拉斯金字塔将图像分解成多个分辨率的组件&#xff0c;增强图像细节和低频信息。它包括一个细节处理模块&#xff08;DPM&#xff09;&#xff0c;用于通过上下文分支和边…

【安全设备】日志审计

一、什么是日志审计 日志审计是一站式的日志数据管理平台&#xff0c;主要致力于提供事前预警、事后审计的安全能力&#xff0c; 通过对日志数据的全面采集、解析和深度的关联分析&#xff0c;及时发现各种安全威胁和异常行为事件。日志审计是指通过集中采集信息系统中的各类信…