aof26372
aof26372

mobile_轮播图_transform 版本_transform 读写二合一

轮播图_transform 版本

 

  • 关键点：
  • 2D 变换 transform 不会改变 元素 在 文档流 中的位置
  • 定位 position 会改变 元素 在 文档流 中的位置

 

  • 语句解析太快，使用 setTimeoout(); 等待渲染       不能超过 20ms

 

  • touchstart 实现 无缝滑屏：

创建两组图片，ulList.innerHTML = ulList.innerHTML;

 

 

mobile_轮播图_transform 版本_transform 读写二合一_第1张图片

 

1. 触屏时，如果是第一组的第一张图片，则瞬间切换到第二组的第一张图片；

2. 触屏时，如果是第二组的最后一张图片，则瞬间切换到第一组的最后一张。

 

  • transform 读写二合一

关键点：

arguments 参数列表，类数组对象，调用函数时系统隐式传递的一个实参

  • function transformEle(ele, attr, val){
    if(!ele.transform){
        ele.transform = {};
    };
    
    var result = "";
    if(arguments.length > 2){
        // 写入操作
        ele.transform[attr] = val;
        
        for( var attrStr in ele.transform){
            switch(attrStr){
                case "translate":
                case "translateX":
                case "translateY":
                case "translateZ":{
                    result += attrStr+"("+ele.transform[attrStr]+"px) ";
                    break;
                };
                
                case "rotate":
                case "rotateX":
                case "rotateY":
                case "rotateZ":
                case "skew":
                case "skewX":
                case "skewY":{
                    result += attrStr+"("+ele.transform[attrStr]+"deg) ";
                    break;
                };
                
                case "scale":
                case "scaleX":
                case "scaleY":{
                    result += attrStr+"("+ele.transform[attrStr]+") ";
                    break;
                };
            };
        };
        
        ele.style.transform = result;
    }else{
        // 读取操作
        if(ele.transform[attr]){
            result = ele.transform[attr];
        }else{
            if(attr == 'scale' || attr == 'scaleX' || attr == 'scaleY'){
                result = 1;
            }else{
                result = 0;
            };
        }
    };
    
    return result;
};

 

  • 移动端 无缝滑屏
  • 自动轮播 与 无缝滑屏的冲突

mobile_轮播图_transform 版本_transform 读写二合一_第2张图片

  • DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
        <title>无缝轮播title>

        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            a {
                text-decoration: none;
            }
            
            ul,
            ol {
                list-style: none;
            }
            
            input {
                outline: none;
            }
            
            img {
                display: block;
            }
            
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
            
            #wrap {
                width: 100%;
                height: 100%;
                
                background-color: #96b377;
            }
            
            /**** ****/
            #wrap {
                position: relative;
            }
            
            #ul_list  {
                overflow: hidden;
                width: 1000%;
            }
            
            #wrap #ul_list>li {
                float: left;
            }
            
            #wrap #ul_list>li>a>img{
                width: 100%;
            }
            
            /**** 小圆点  ****/
            #ol_list {
                position: absolute;
                bottom: 10px;
                right: 10px;
                width: 75px;
                display: flex;
                justify-content: space-between;
            }
            
            #ol_list li {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: gray;
            }
            
            #ol_list li.active {
                background-color: deeppink;
            }
        style>
    head>
    
    <body>
        
        
        <section id="wrap">
            <ul id="ul_list">
                <li>
                    <a href="javascript:;"><img src="./img/Deadpool.jpg"/>a>
                li>
                
                <li>
                    <a href="javascript:;"><img src="./img/Groot.jpg"/>a>
                li>
                
                <li>
                    <a href="javascript:;"><img src="./img/Hock.jpg"/>a>
                li>
                
                <li>
                    <a href="javascript:;"><img src="./img/RocketRaccoon.jpg"/>a>
                li>
                
                <li>
                    <a href="javascript:;"><img src="./img/SpiderMan.jpg"/>a>
                li>
            ul>
            
            <ol id="ol_list">
                <li data-pindex="0" class="active">li>
                <li data-pindex="1">li>
                <li data-pindex="2">li>
                <li data-pindex="3">li>
                <li data-pindex="4">li>
            ol>
        section>
        
        
        
        
        
        <script type="text/javascript">
            // 取消默认行为
            document.addEventListener("touchstart", function(e){
                e.preventDefault();
            }, false);
            
            // 点透处理
            
            var clientWidth = document.documentElement.clientWidth;
            // 适配
            (function(){
                
                /* 1. 创建 style 标签 */
                var styleNode = document.createElement("style");

                /* 2. 给 style 标签添加内容 (屏幕分份, 大多数公司 16 份) */
                styleNode.innerHTML = "html {"+
                                           "font-size:"+clientWidth/16+"px !important"+
                                      "}";    /* IPhone 6 的 font-size: 23.4375px */

                /* 3. 把 style 标签追加到 head 标签里 */
                document.head.appendChild(styleNode);
            }());
            
            var wrap = document.getElementById("wrap");
            var ulList = document.getElementById("ul_list");
            var olList = document.getElementById("ol_list");
            
            // 克隆第二组图片
            ulList.innerHTML += ulList.innerHTML;
            var lis = document.querySelectorAll("#ul_list>li");
            var points = document.querySelectorAll("#ol_list>li");
            
            window.onload = function(){
                var styleNode = document.createElement("style");
                styleNode.innerHTML = "#ul_list {width:"+lis.length+"00%;}";
                styleNode.innerHTML += "#ul_list>li {width:"+100/lis.length+"%;}";
                document.head.appendChild(styleNode);
                
                styleNode.innerHTML += "#wrap {height:"+lis[0].offsetHeight+"px;}";
            };
            
            // 动态添加属性
            ulList.oldUlX = 0;
            ulList.oldTouchX = 0;
            ulList.curIndex = 0;
            wrap.addEventListener("touchstart", function(e){
                window.clearInterval(ulList.autoTimer);
                var touch = e.changedTouches;
                
                // 无缝轮播
                if(ulList.curIndex == 0){
                    ulList.curIndex = lis.length/2;
                }else if(ulList.curIndex == lis.length-1){
                    ulList.curIndex = lis.length/2-1;
                }
                transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                
                ulList.oldTouchX = touch[0].clientX;
                ulList.oldUlX = transformEle(ulList, "translateX");
                ulList.style.transition = "0s all ease 0s";
            },false);
            
            wrap.addEventListener("touchmove", function(e){
                var touch = e.changedTouches;
                
                var newTouchX = touch[0].clientX;
                transformEle(ulList, "translateX", ulList.oldUlX+(newTouchX - ulList.oldTouchX) );
            },false);
            
            wrap.addEventListener("touchend", function(){
                ulList.curIndex = Math.round(-transformEle(ulList, "translateX")/clientWidth);
                ulList.style.transition = "1s all ease 0s";
                
                transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                
                for(var i=0; i<points.length; i++){
                    points[i].className = "";
                };
                points[ulList.curIndex%5].className = "active";
                ulList.autoRun();
            },false);
            
            olList.addEventListener("touchstart", function(e){
                window.clearInterval(ulList.autoTimer);
                touch = e.changedTouches;
                e.stopPropagation();
                ele = touch[0].target;
                if(ele.nodeName == "LI"){
                    for(var i=0; i<points.length; i++){
                        points[i].className = "";
                    };
                    ele.className = "active";
                    
                    ulList.curIndex = +ele.dataset.pindex;
                    transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                    ulList.autoRun();
                };
            }, false);
            
            // 自动轮播
            ulList.autoRun = function(){
                window.clearInterval(ulList.autoTimer);
                ulList.autoTimer = window.setInterval(function(){
                    // 无缝轮播
                    if(ulList.curIndex == lis.length-1){
                        ulList.curIndex = lis.length/2-1;
                        ulList.style.transition = "0s none";
                        transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                    }
                    
                    ulList.curIndex++;
                    window.setTimeout(function(){
                        ulList.style.transition = "1s all ease 0s";
                        transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                    }, 50);
                    
                    for(var i=0; i<points.length; i++){
                        points[i].className = "";
                    };
                    points[ulList.curIndex%5].className = "active";
                }, 2500-50);
            };
            
            ulList.autoRun();
            
            // 读写 transform 二合一
            function transformEle(ele, attr, val){
                if(!ele.transform){
                    ele.transform = {};
                };
                
                var result = "";
                if(arguments.length > 2){
                    // 写入操作
                    ele.transform[attr] = val;
                    
                    for( var attrStr in ele.transform){
                        switch(attrStr){
                            case "translate":
                            case "translateX":
                            case "translateY":
                            case "translateZ":{
                                result += attrStr+"("+ele.transform[attrStr]+"px) ";
                                break;
                            };
                            
                            case "rotate":
                            case "rotateX":
                            case "rotateY":
                            case "rotateZ":
                            case "skew":
                            case "skewX":
                            case "skewY":{
                                result += attrStr+"("+ele.transform[attrStr]+"deg) ";
                                break;
                            };
                            
                            case "scale":
                            case "scaleX":
                            case "scaleY":{
                                result += attrStr+"("+ele.transform[attrStr]+") ";
                                break;
                            };
                        };
                    };
                    
                    ele.style.transform = result;
                }else{
                    // 读取操作
                    if(ele.transform[attr]){
                        result = ele.transform[attr];
                    }else{
                        if(attr == 'scale' || attr == 'scaleX' || attr == 'scaleY'){
                            result = 1;
                        }else{
                            result = 0;
                        };
                    }
                };
                
                return result;
            };
        script>
    body>
html>

 

转载于:https://www.cnblogs.com/tianxiaxuange/p/10019570.html

你可能感兴趣的:(mobile_轮播图_transform 版本_transform 读写二合一)

  • 【实践】Filebeats的尝鲜 JYCJ_ Golanggolang后端
    背景落盘的日志文件，查询起来比较麻烦，所以想将其存入ES中，然后通过使用Kibana来查询方案：Filebeat第三方存储：ES链路：filebeat---->[logstash]---->ES前期验证Filebeat输出ES连接问题？ES，目前使用的es版本为7.10.x，第一步：使用filebeat最新版本，连接ES容易报下面的错误:Connectionmarkedasfailedbecaus
  • 【漏洞预警】FortiOS 和 FortiProxy 身份认证绕过漏洞(CVE-2024-55591) 李火火安全阁 漏洞预警Fortinet
    文章目录一、产品简介二、漏洞描述三、影响版本四、漏洞检测方法五、解决方案一、产品简介FortiOS是Fortinet公司核心的网络安全操作系统，广泛应用于FortiGate下一代防火墙，为用户提供防火墙、VPN、入侵防御、应用控制等多种安全功能。FortiProxy则是Fortinet提供的企业级安全代理产品，主要用于内容过滤、Web访问控制和数据安全防护等场景。下一代防火墙产品FortiGate
  • ‘vite’ 不是内部或外部命令，也不是可运行的程序！ Vinca@ npmNodeJSvitenpmnode.js
    项目背景包管理工具：pnpm提示‘vite’不是内部或外部命令，也不是可运行的程序！安装条件兼容性注意⚠️⚠️⚠️Vite需要Node.js版本18+，20+。然而，有些模板需要依赖更高的Node版本才能正常运行，当你的包管理器发出警告时，请注意升级你的Node版本。解决办法查看当前node版本是否满足安装vite#查看当前系统node版本node-vnode版本过低解决办法（一次就爽）如果您本机
  • idea处理文件报错问题 大cheng
    idea处理文件报错问题1、idea上传文件获取文件路径的报错报错原因：ServletRequest的getServletContext方法是Servlet3.0添加的，本地用的是Tomcat9.0，版本比较高，支持request.getServletContext()这种写法，而线上是Tomcat6.0，只支持到Servlet2.5，需要先用request拿到HttpSession或者通过Ser
  • minio免费文件管理器（windows版本），若依RuoYi-Vue-Plus框架使用，有需要的可以下载，因为官网下载特别慢 程序员WANG 工具windowsvue.js容器
    MinIO是一款开源的对象存储系统，它提供类似AmazonS3的云存储服务，适用于各种规模的企业。MinIO设计为高性能、安全且易于使用，适合存储大量的非结构化数据，如图片、文档、视频以及大数据分析中的日志文件等。在本案例中，我们关注的是Windows版本的MinIO，它被集成到了若依RuoYi-Vue-Plus框架中，以实现文件管理功能。若依RuoYi-Vue-Plus是一个基于Vue.js的现
  • LNK1181:无法打开输入文件“m.lib“ 潮易 python
    在C++中，LNK1181错误通常意味着链接器无法找到某个库文件来链接你的程序。这可能是由于以下原因：1.库文件没有正确安装或路径设置不正确。2.编译命令没有包含正确的库参数。3.库文件已被移除或者版本不兼容。下面是一个解决LNK1181错误的基本步骤：###解决方案1：检查并确保库文件已正确安装-**查看库文件**：在你的操作系统中，找到与你的项目需要链接的库文件（m.lib）。-**确认路径*
  • 当IDEA运行时遇到jdk路径错误时解决办法。 一只小七月 解决报错jdk
    jdk的路径有误，解决办法是使用快捷键ctrl+shift+alt+s,会出现以下界面将jdk选择为不标红可用的版本即可。最后程序就能正常运行了。
  • Python批量转换doc为docx格式 测试开发K 日常工作python开发语言
    札记：对于IT从业人员会经常接触到各种文件，其中Word文档是最常见之一，它分为.doc和.docx两种格式。通过Python操作Word文档的第三方库有python-docx和pywin32，python-docx只能处理.docx格式的文件，至于.doc格式文件，可调用pywin32库直接操作，但效果不好，可能出现莫名的报错或读写缺失等情况。一．解决思路翻阅网上各种解决办法，其中最为简单的处理
  • 推荐开源项目：EPPlus.Core——.NET Core下的Excel处理库 纪亚钧
    推荐开源项目：EPPlus.Core——.NETCore下的Excel处理库项目地址:https://gitcode.com/gh_mirrors/ep/EPPlus.Core1、项目介绍在数据处理的日常工作中，对Excel文件的操作是一项常见的需求。而EPPlus.Core正是为此而生的一个.NETCore版本的Excel处理库。作为一个非官方的EPPlus库移植版，它允许你在跨平台的.NETC
  • 使用npm创建three.js项目 ShawnWeasley npmjavascriptarcgis前端node.js
    1.安装Node.js和npm首先，需要在您的计算机上安装Node.js和npm。Node.js是一个JavaScript运行环境，而npm是一个JavaScript包管理器。npm会随Node.js一起安装，因此只需要安装Node.js即可。从Node.js的官方网站(https://nodejs.org)下载并安装适合您操作系统的版本。2.创建一个新的项目在您希望创建项目的目录下，手动创建一个
  • WAVGATvcu控制器应用层软件：策略开发与实际应用 NhTvp94c 程序人生
    WAVGATvcu控制器应用层软件，策略说明。整车控制器策略开发，应用层软件，在售车型最新版本软件。按照ASPIC开发流程开发，基于AUTOSAR架构开发，满足功能安全ASILC。模型和策略说明可以分开出。都是量产车型在用，不是仿真WAVGATvcu控制器应用层软件：策略开发与实际应用引言WAVGATvcu控制器应用层软件是一款在汽车工业中备受瞩目的软件产品，它不仅严格按照ASPIC（汽车电子系统
  • MySQL 可视化工具 2301_78094384 工具mysql
    navicat优点：使用广泛，老牌软件，功能强大缺点：收费HeidiSQL免费，有免安装版本DownloadHeidiSQL//portable:便携式的下载后解压，双击运行左下角新建，然后输入配置，连接就可以使用了
  • 手把手教你 AI 顾投：在 Ollama 中使用 Python 调用金融 API 服务 老余捞鱼 AI探讨与学习人工智能python金融llama
    作者：老余捞鱼原创不易，转载请标明出处及原作者。写在前面的话：尽管Ollama本身不是一个大型语言模型（LLM）开发工具，而是一个LLM的平台。但它最近宣布了其系统中直接使用工具调用的功能，本文主要介绍了最新版本的主要更新，特别是关于功能调用的使用，并演示了如何在Ollama中使用Python调用外部API服务。一、部署Ollama在本地运行1.1设置开发环境在开始编写代码之前，最好的做法是建立一
  • 基于深度学习的推荐系统构建：Movielens 数据集 fresh的转码之路 深度学习人工智能机器学习推荐算法
    基于深度学习的推荐系统构建：Movielens数据集依赖环境代码语言：python3.11.5开发平台：pycharmtensorflow版本：2.18.0MovieLen1M数据及简介MovieLens1M数据集包含包含6000个用户在近4000部电影上的100万条评分，也包括电影元数据信息和用户属性信息。下载地址为：http://files.grouplens.org/datasets/mov
  • 风控系统之事件溯源，决策流程记录与版本控制 后端
    个人博客：无奈何杨（wnhyang）个人语雀：wnhyang共享语雀：在线知识共享Github：wnhyang-Overview背景一天，小明在风控管理台查看事件数据时，发现一笔决策结果为“拒绝”❌的交易事件，小明点开事件详情发现其触发了一条“24小时内向不同陌生账户转账超过30w”的规则，规则设置的处置方式是“拒绝”❌。小明通过策略规则却查不到那条“24小时内向不同陌生账户转账超过30w”的规则
  • python怎么安装pymysql_Python中操作mysql的pymysql模块详解 weixin_39634876
    前言pymsql是Python中操作MySQL的模块，其使用方法和MySQLdb几乎相同。但目前pymysql支持python3.x而后者不支持3.x版本。本文测试python版本：2.7.11。mysql版本：5.6.24一、安装pip3installpymysql二、使用操作1、执行SQL#!/usr/bin/envpytho#-*-coding:utf-8-*-importpymysql#创
  • C#中的异步编程模型 神之王楠 c#
    在C#中，async和await关键字是用于异步编程的重要部分，它们允许你以同步代码的方式编写异步代码，从而提高应用程序的响应性和吞吐量。这种异步编程模型在I/O密集型操作（如文件读写、网络请求等）中特别有用，因为它允许线程在等待I/O操作完成时释放，从而执行其他工作。基本概念async：这是一个修饰符，用于标记一个方法、lambda表达式或匿名方法为异步的。异步方法包含一个或多个await表达式
  • C# 异步编程场景 小码编匠 C#基础语法c#异步编程.net
    前言异步编程允许程序在等待某些操作（如文件读写、网络请求等）完成时，不必阻塞主线程，从而可以继续执行其他任务。这种非阻塞的特性对于提高应用程序的并发性和响应速度至关重要。C#通过async和await关键字，以及Task类，为异步编程提供了简洁而强大的支持。本文将深入探讨C#中的异步编程场景，包括其基本概念、工作原理以及如何在实际开发中应用异步编程技术。我们将通过实例演示如何利用C#的异步特性来编
  • 一文看懂llama2（原理&模型&训练） Qpeterqiufengyi llama
    自从Transformer架构问世以来，大型语言模型（LargeLanguageModels,LLMs）以及AIGC技术的发展速度惊人，它们不仅在技术层面取得了重大突破，还在商业应用、社会影响等多个层面展现出巨大潜力。随着ChatGPT的推出，这一技术日益走进大众视野，这也预示着一个由生成式AI塑造的未来正在加速到来。与此同时，MetaAIMetaAI在2023年推出了LLama（LargeLan
  • 用Python找到童年的乐趣，制作一款贪吃蛇小游戏。新手教程！ 2401_83703951 程序员pythonpygame开发语言
    开发工具python版本：3.6.8编辑器：pycharm相关模块importcopyimportrandomimportpygame模块安装pipinstall-ihttps://pypi.doubanio.com/simple/--trusted-hostpypi.doubanio.compygame实现效果这个就是代码运行的效果了。以前就是这样一个极为枯燥的游戏都能很多人抢着玩，一人一条命，
  • 探索SQL数据库架构比较工具：详解及应用 焦虑中
    本文还有配套的精品资源，点击获取简介：随着信息化的发展，SQL数据库在企业数据管理中扮演核心角色。面对不断更新的数据库架构，比较和管理不同数据库之间的差异变得至关重要。本文介绍了一种开源的SQL数据库架构比较工具，详述了其功能和应用价值。该工具可比较SQL数据库架构中的表结构、索引、触发器等元素，支持数据库迁移、版本控制和同步等任务。工具的源代码文件、架构设计图、使用文档和流程图等组件，为开发者提
  • 统信V20 1070e X86系统编译安装PostgreSQL-13.11版本以及主从构建 树下一少年 数据库统信UOS1070e信创postgresql13.11编译安装
    设备信息操作系统版本架构CPU内存备注统信UOSV201070eX864C8G此配置仅做编译安装验证，持续运行或数据量增长大请自行评估资源配置。统信UOSV201070eX864C8G资源包该包包含postgresql-13.11源码包、统信编译postgresql-13.11安装包通过网盘分享的文件：统信postgresql-13.11-x86.zip链接:https://pan.baidu.c
  • java多租户架构_Java 多租户：配置选项、租户生命周期和所使用的隔离性 宋俊潇 java多租户架构
    Java多租户：配置选项、租户生命周期和所使用的隔离性IBMSDKJavaTechnologyEdition(第7版的第1个发行版)中多租户实现的深入研究GavinRolleston和MichaelDawson2014年10月09日发布获取IBMSDKJavaTechnologyEdition(第7版的第1个发行版本)要想运行本文的样例应用程序，下载IBMSDKJavaTechnologyEdit
  • 提升YOLOv8性能：用Swin Transformer替换Backbone的详细实现与分析【YOLOv8】 步入烟尘 YOLO系列创新涨点超专栏YOLOv8YOLO目标跟踪
    本专栏专为AI视觉领域的爱好者和从业者打造。涵盖分类、检测、分割、追踪等多项技术，带你从入门到精通！后续更有实战项目，助你轻松应对面试挑战！立即订阅，开启你的YOLOv8之旅！专栏订阅地址：https://blog.csdn.net/mrdeam/category_12804295.html文章目录YOLOv8改进|主干篇|SwinTransformer替换Backbone（附代码+详细修改步骤+
  • Fluss安装体验 WYRM_GOLD flussflinkbigdatazookeeperkafka
    1、zookeeper安装笔者下载的是fluss0.5版本，当前fluss0.5版本需要依赖zookeeper服务。1.1下载zk下载地址:https://mirrors.aliyun.com/apache/zookeeper/zookeeper-3.8.4/apache-zookeeper-3.8.4-bin.tar.gz1.1.1zk集群规划node1192.168.40.1node2192.
  • 十.java入门【案例】 JuGeGer java入门java
    day10【练习】减肥计划案例逢七必过案例统计成绩数组求和数组中的元素查找案例数组中的元素反转评委打分案例快捷键:自动分配变量newXxx(...).var或者newXxx(...)alt+回车方法调用(...).var或者方法调用(...)alt+回车生成输出语句表达式.sout方法调用(...).sout第一章基础练习1.1减肥计划if版本需求输入星期数[1,7]，显示今天的减肥活动周一：跑步
  • YOLOv8与Transformer：探索目标检测的新架构 AI架构设计之禅 AI大模型应用入门实战与进阶大数据AI人工智能计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
    YOLOv8与Transformer：探索目标检测的新架构关键词：目标检测，深度学习，YOLOv8，Transformer，计算机视觉，卷积神经网络摘要：目标检测是计算机视觉领域的一项重要任务，其目标是从图像或视频中识别和定位特定对象。近年来，YOLO（YouOnlyLookOnce）系列算法以其高精度和高速度成为目标检测领域的佼佼者。最新版本的YOLOv8引入了Transformer架构，进一步
  • Node.js 到底是什么 yqcoder Node.js从入门到精通node.js
    Node.js是一个基于ChromeV8引擎的JavaScript运行环境，它允许开发者使用JavaScript编写服务器端代码。一、主要特点1.事件驱动和非阻塞I/O模型Node.js采用事件驱动架构，通过回调函数处理I/O操作，这使得它在处理大量并发请求时表现出色。当执行I/O操作（如文件读写、网络请求等）时，Node.js不会阻塞程序的执行，而是继续处理其他任务，当I/O操作完成后，通过回调
  • Linux离线安装docker(arm64架构cpu)极速版 gallonyin linuxdocker架构
    之前写过x86版本的快速docker安装部署，现在遇到arm64等架构cpu不适用，主要是因为安装包不通用，因此有这篇文章。cpu测试可以支持鲲鹏cpu或interlarm版本离线安装docker，10分钟极速搞定！亲测适用于CentOS8及其衍生版本。官网下载从官网中选择相应的版本，我选择了最新的包，在联网的环境下载到本地备用https://download.docker.com/linux/s
  • 【WRF后处理】基于NCL处理wrf运行结果wrfout_d01 WW、forever WRF模型原理及应用WRFNCL
    【WRF后处理】基于NCL处理wrf运行结果wrfout_d01NCL概述wrf-python和NCL总结WRF后处理数据信息查看诊断变量的获取插值参考NCL概述NCARCommandLanguage（NCL）是由美国大气研究中心（NCAR）推出的一款用于科学数据计算和可视化的免费软件。它有着非常强大的文件输入和输出功能，可读写netCDF-3、netCDF-4classic、HDF4、binar
  • 遍历dom 并且存储（将每一层的DOM元素存在数组中） 换个号韩国红果果 JavaScripthtml
    数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
  • Android+Jquery Mobile学习系列(9)-总结和代码分享 白糖_ JQuery Mobile
    目录导航   经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。   个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
  • impala参考资料 dayutianfei impala
    记录一些有用的Impala资料   1. 入门资料 >>官网翻译：     http://my.oschina.net/weiqingbin/blog?catalog=423691   2. 实用进阶 >>代码&架构分析：     Impala/Hive现状分析与前景展望：http
  • JAVA 静态变量与非静态变量初始化顺序之新解 周凡杨 java静态非静态顺序
    今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
  • 跳出iframe返回外层页面 g21121 iframe
    在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。 首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
  • JAVA多线程监听JMS、MQ队列 510888780 java多线程
    背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。 对于上面提到的方法2使用一个监听器开启多线
  • 第一个SpringMvc例子 布衣凌宇 spring mvc
    第一步：导入需要的包； 第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
  • 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
    PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
  • 通过XSD验证XML antlove xmlschemaxsdvalidationSchemaFactory
    1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
  • 文本流与字符集 百合不是茶 PrintWrite()的使用字符集名字 别名获取
    文本数据的输入输出;           输入;数据流,缓冲流         输出;介绍向文本打印格式化的输出PrintWrite();   package 文本流; import java.io.FileNotFound
  • ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
            正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
  • java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 javajvmjdb
            用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。         现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
  • 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
    在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
  • cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
        由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
  • 动态页面正文部分中文乱码排障一例 ronin47
    公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。 因为有做过系统调整，所以第一反应就是新上
  • java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
    import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
  • 从100PV到1亿级PV网站架构演变 cfyme 网站架构
    一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的 架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
  • [宇宙时代]宇宙时代的GIS是什么？ comsci Gis
           我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的          宇宙是一个高维时空
  • 详解create database命令 czmmiao database
    完整命令 CREATE DATABASE mynewdb   USER SYS IDENTIFIED BY sys_password   USER SYSTEM IDENTIFIED BY system_password   LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
  • 几句不中听却不得不认可的话 datageek
    1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
  • 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
    原文地址：http://www.kafka0102.com/2010/08/281.html   因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
  • xcode6 Auto layout and size classes dcj3sjt126com ios
    官方GUI   https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html   iOS中使用自动布局（一）   http://www.cocoachina.com/ind
  • 通过PreparedStatement批量执行sql语句【sql语句相同，值不同】 梦见x光 sql事务批量执行
    比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) {    String sql = "inseret into customer(id
  • 程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
    一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear   二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
  • NGINX IXHONG nginx
    pcre 编译安装 nginx conf/vhost/test.conf   upstream admin { server 127.0.0.1:8080; }   server {                 listen       80; &
  • 设计模式--工厂模式 kerryg 设计模式
    工厂方式模式分为三种：   1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。   2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。   3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
  • Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd javaspringbeanxml
    1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。 通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
  • 解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centosvim
    有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？ 答案是肯定的，设置下缩进格式就可以了，非常简单： 在用户的根目录下 直接vi  ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
  • netty大并发请求问题 tianzhihehe netty
    多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
  • Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
    我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。 我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。 经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他