佚名
佚名

纯CSS3实现图片无间断轮播效果

前言：图片轮播效果现在在各大网站都是非常普遍的，以前我们都是通过postion的left or right来控制dom的移动，这里我要说的是利用css3来制作轮播！相比以前通过postion来移动dom来说，css3的实现方式更为优雅！

我相信使用过css3的童鞋们应该都知道我们是用css哪个大哥属性了吧！嗯，对的，就是translate3d我在前几天还特地写过一篇文章来介绍它，不熟悉的童鞋可以点击关键字链接过去看看！知道的童鞋们，那我们继续往下看！

效果图如下所示：

纯CSS3实现图片无间断轮播效果_第1张图片

首先，我们先说下思路

非无限循环: 直接设置每次移动的位移数值，然后根据时间段执行，比如索引从0-10，直接判断是否到0了，最后是否到10了，然后到了0或者10的时候直接将索引设置我相反的索引数就可以了。

无限循环: 无限循环的就需要考虑前后的衔接了，比如第一张图跟最后一张图，在执行的最后一张图的时候应该会出现第一张图，那么相反之下出现第一张图然后往右翻的时候就应该出现最后一张图。那么这是这么做到的呢？其实很简单，那就是clone克隆最后一个dom到第一个dom的前面，然后clone第一个dom到最后一个dom的后面，可能我这么说，大家听起来有点晕。那么我们直接看看下面的代码就知道原理了！

HTML:

XML/HTML Code 复制内容到剪贴板
  1. >  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">  
  7.     <meta content="yes" name="apple-mobile-web-app-capable" />  
  8.     <meta content="black" name="apple-mobile-web-app-status-bar-style" />  
  9.     <meta content="telephone=no" name="format-detection" />  
  10.     <title>轮播DEMO | 科博网-钟科的个人博客title>  
  11.     <style>  
  12.         *{ padding:0; margin:0; border:0; }   
  13.         .wrap{ position: relative; height: 500px; width:360px; overflow:hidden; border:1px solid #ccc; margin:10px auto;  }   
  14.         .wrap-list{ width:9999px; transform:translate3d(-360px,0,0); transition-delay: .3s; transition:ease; }   
  15.         .wrap-list img{ float:left; width:360px; height: 500px; }   
  16.         .btns{ text-align:center; }   
  17.         .btns button{ width:100px; height: 30px; }   
  18.     style>  
  19. head>  
  20. <body>  
  21. <div class="wrap">  
  22.     <div class="wrap-list">  
  23.           
  24.         <img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">  
  25.         <img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">  
  26.         <img src="http://img.mrco.cn/E32rcqdZn0uMt9JbXr0w0K95.jpg">  
  27.         <img src="http://img.mrco.cn/uWHhrhupbMphjzsYtS7IRSD_.jpg">  
  28.         <img src="http://img.mrco.cn/k2wZVNRo0YNU7i-wuC_-84Du.jpg">  
  29.         <img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">  
  30.           
  31.         <img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">  
  32.     div>  
  33. div>  
  34. <div class="btns">  
  35.     <button id="btnLeft">左button>  
  36.     <button id="btnRight">右button>  
  37. div>  
  38. <script src="http://s.mrco.cn/scripts/libs/zepto/zepto.min.js?0.0.1">script>  
  39. <script src="http://s.mrco.cn/scripts/libs/zepto/selector.js?0.0.1">script>  
  40. <script src="http://s.mrco.cn/scripts//libs/zepto/touch.js?0.0.1">script>  
  41. body>  
  42. html>  

JavaScript:

JavaScript Code 复制内容到剪贴板
  1. $(function(){   
  2.         var index = 1,          //默认的当前索引为1，因为clone了最有一个dom在第一个前面做衔接   
  3.             moveWidth = 360;    //每次需要移动的像素值   
  4.         //左移动   
  5.         $('#btnLeft').on('click',function(){   
  6.             //每次+1   
  7.             index++;   
  8.             //通过索引乘以移动像素值，那么就得到了移动的步位   
  9.             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });   
  10.             //这里的判断是衔接的关键所在，如果当前索引已经是最后一个dom了,也就是我们clone好的这个dom了，那就说明已经需要开始重新开始新的一轮了   
  11.             if(index == $('.wrap-list img').size() - 1){   
  12.                 //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作   
  13.                 setTimeout(function () {   
  14.                     //重置索引为1,相当于重头开始   
  15.                     index = 1;   
  16.                     //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;   
  17.                     $('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})   
  18.                 }, 300);   
  19.             }   
  20.         });   
  21.         //右移动   
  22.         $('#btnRight').on('click',function(){   
  23.             //每次减一   
  24.             index--;   
  25.             //通过索引乘以移动像素值，那么就得到了移动的步位   
  26.             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });   
  27.             //这里的判断是衔接的关键所在,跟向右移是一个意思，等于0的时候就是到了clone的dom了，也就需要重新开始新的一轮了   
  28.             if(index === 0) {   
  29.                 //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作   
  30.                 setTimeout(function () {   
  31.                     //这里就需要设置到除去两个clone的dom之外的最后一个dom索引来   
  32.                     index = $('.wrap-list img').size() - 2;   
  33.                     //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;   
  34.                     $('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})   
  35.                 }, 300);   
  36.             }   
  37.         });   
  38.     });  

以上所述是小编给大家介绍的纯CSS3实现图片无间断轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

你可能感兴趣的:(纯CSS3实现图片无间断轮播效果)

  • systemd-networkd 的 *.network 配置文件详解 笔记250323 kfepiza 网络通讯传输协议物联#控制台命令行Shell脚本shcmd等#LinuxCentOSUbuntu等笔记tcp/ip网络linux
    systemd-networkd的*.network配置文件详解笔记250323查看官方文档可以用mansystemd.network命令,或访问:https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html名称systemd.network—网络配置概要network.network描述一个纯INI风格的
  • HTML实现酷炫3D相册 算法与编程之美 编程之美csshtmljscss3javascript
    欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！目录1、创建文件目录2、调背景色3、制作3D相册4、将图片散开，围成一圈。5、绘制透明底盘6、最终效果1、创建文件目录在Hbuilder在新建一个目录，创建css和js文件。图12、调背景色在style块里面给整个页面渲染成黑色调。*{padd
  • 新需求如何实现 火火PM打怪中 考公笔记笔记
    作为产品经理，面对新需求时，我会结合产品管理和项目管理的双重逻辑，采用以下结构化流程，确保需求既能满足用户价值，又能高效落地：一、需求澄清与价值验证（NPDP核心逻辑）需求背景挖掘与需求提出方（用户/业务/领导）深度沟通，明确：痛点场景：需求解决的具体问题（例如“政务数据共享接口调用失败率高”）。期望目标：量化成功标准（如“接口成功率从70%提升至95%”）。工具：5W1H分析法、用户故事地图（U
  • CSS动画：逐帧动画与steps()函数 双囍菜菜 前端随记css前端
    逐帧动画与steps()函数：精准掌控动画节奏关键词：steps()函数、雪碧图、精灵动画、帧动画优化文章目录逐帧动画与steps()函数：精准掌控动画节奏一、逐帧动画的本质：时间函数的维度突破1.1线性动画的局限性1.2steps()函数数学解析二、视觉化解析：steps()工作原理2.1时间轴切片演示2.2与线性动画对比三、商业级案例：RPG游戏角色行走动画3.1雪碧图制作规范3.2完整实现代
  • 【Html+CSS】3D旋转相册 小木荣 web前端csshtml3d
    3D旋转木马相册&3D盒子相册因为代码大部分相同，就放一起了注释一下就是另一个相册3D旋转木马相册body{background-color:#000;/*视距，使子元素获得视距效果*/perspective:900px;}section{margin:20vhauto;position:relative;width:200px;height:200px;/*开启3D空间*/transform-s
  • 如何在 Bash 中不依赖 curl 或 wget 发出 HTTP 请求并实现文件传输——/dev/tcp的妙用 vortex5 bashhttptcp/ip
    1.前言在Bash脚本编程中，发送HTTP请求通常依赖于像curl或wget这样的外部工具。然而，Bash本身隐藏着一个鲜为人知的功能：通过内置的/dev/tcp或/dev/udp伪设备，可以直接与网络进行交互，而无需额外安装任何工具。这个特性最初由KornShell(ksh)引入，后来被Bash继承，其设计初衷是为了方便用户通过网络发送数据，例如生成报告或执行简单的网络操作。然而，这个功能也因其
  • （含import）两行代码，将ppt的每一页幻灯片保存为图片。（如果你没装office，只装了WPS也可以，只不过更麻烦一些） 几道之旅 人工智能智能体及数字员工powerpointwps
    文章目录第一步:安装包第二步：写代码，运行第三步：如果你是Office，现在已经搞定了。但我是WPS，会报错：第四步：直接去包里改代码第五步：保存对包中代码的修改，重新运行咱最开头的代码第六步：成功了第一步:安装包pipinstallpython-office第二步：写代码，运行#安装库：pipinstallpython-officeimportoffice#单页转图片office.ppt.ppt
  • Python知识分享第十四天 闵少搞AI python开发语言
    “”"1.面向对象相关概述概述面向对象是一种编程思想强调的是以对象为基础完成的各种操作它是基于面向过程的扩展Python中是同时支持面向对象和面向过程这两种编程思想的思想特点更符合人们的思考习惯把复杂的问题简单化把人们(程序员)从执行者变成了指挥者2.面向对象三大特征介绍封装继承多态封装概述封装就是隐藏对象的属性和实现细节仅对外提供公共的访问方式举例:插板电脑手机好处提高代码的安全性弊端代码量增加
  • 《基于自适应正负样本对比学习的特征提取框架》-核心公式提炼简洁版 2022年neural networks 阳光明媚大男孩 学习深度学习人工智能论文笔记
    论文源地址以下是从文档中提取的关于“基于对比学习的特征提取框架（CL-FEFA）”中正负样本对比学习实现的技术细节，包括详细的数学公式、特征提取过程以及特征表示方式的说明。1.正负样本的定义与构造在CL-FEFA框架中，正负样本的定义是动态且自适应的，基于特征提取的结果，而不是预先固定的。这种自适应性是CL-FEFA区别于传统对比学习（如SimCLR、SupCon）的一个关键点。定义方式：指示矩阵
  • QGIS结合天地图API实现批量经纬度转地址的完整指南 网优随笔 QGIS开源软件
    一、技术背景与工具选择地理编码（Geocoding）是将地址转换为地理坐标的过程，反向地理编码（ReverseGeocoding）则是将经纬度坐标转换为结构化地址。QGIS作为开源GIS平台，通过插件扩展可实现批量地理编码操作。天地图作为我国权威地理信息服务平台，其API提供高精度的地理编码服务。本文将以QGIS3.22+版本为基础，结合天地图Web服务API，实现5000条级数据的批量反向地理编
  • Vue 中的日期格式化实践：从原生 Date 到可视化展示！！！ 小丁学Java 产品资质管理系统vue.js前端javascriptts
    Vue中的日期格式化实践：从原生Date到可视化展示在数据可视化场景中，日期时间的格式化显示是一个高频需求。本文将以一个邀请码关系树组件为例，深入解析Vue中日期格式化的核心方法、性能优化和最佳实践，并配合Mermaid流程图直观展示处理流程！一、️核心方法：原生Date对象处理代码实现privateformatDate(dateString:string|null):string{if(!dat
  • 机器学习怎么做特征工程 全栈你个大西瓜 人工智能机器学习人工智能特征工程数据预处理特征变换特征降维特征构造
    一、特征工程通俗解释特征工程就像厨师做菜前的食材处理：原始数据是“生肉和蔬菜”，特征工程是“切块、腌制、调料搭配”，目的是让机器学习模型（食客）更容易消化吸收，做出更好预测（品尝美味）。二、为什么要做特征工程？数据质量差：原始数据常有缺失、噪声、不一致问题（如年龄列混入“未知”）。模型限制：算法无法直接理解原始数据（如文本、日期需要数值化）。提升效果：好特征能显著提升模型性能（准确率提升10%~5
  • OpenLayers集成天地图服务开发指南 喆星时瑜 WebGIS#天地图OpenLayersGIS天地图WebGISHTML地图地图API
    以下是一份面向GIS初学者的OpenLayers开发详细教程，深度解析代码：一、开发环境搭建1.1OpenLayers库引入ol.css：包含地图控件、图层等可视化样式ol.js：OpenLayers核心功能库推荐使用固定版本号（如v7.3.0）确保稳定性1.2地图容器设置.map{//设置地图控件显示尺寸height:95vh;width:95vw;}使用视口单位(vh/vw)实现响应式布局保留
  • Ubuntu实时读取音乐软件的音频流 冬瓜~ Linux开发ubuntu音视频数据库portaudio
    文章目录一.前言二.开发环境三.具体操作四.实际效果一.前言起因是这样的，我需要在Ubuntu中，实时读取正在播放音乐的音频流，然后对音频进行相关的处理。本来打算使用的Pipewire+Helvum的方式实现，好处是可以直接利用Helvum图形化工具对软件输出的音频进行重定向，但是由于使用的是Ubuntu20.04，默认的音频服务器使用的是PulseAudio，替换为Pipewire后，播放的音频
  • 机器学习——KNN超参数 练习AI两年半 机器学习人工智能深度学习
    sklearn.model_selection.GridSearchCV是scikit-learn中用于超参数调优的核心工具，通过结合交叉验证和网格搜索实现模型参数的自动化优化。以下是详细介绍：一、功能概述GridSearchCV在指定参数网格上穷举所有可能的超参数组合，通过交叉验证评估每组参数的性能，最终选择最优参数组合。其核心价值在于：自动化调参：替代手动参数调试，提升效率3。交叉验证支持：通
  • 应用程序编程接口API的类型与结构 恶霸不委屈 API程序人生
    应用程序编程接口，ApplicationProgrammingInterface是一组定义不同软件组件如何相互交互的规则和协议。它为不同的软件应用程序提供了一种接口，使得它们能够相互通信和交互，而无需了解其内部实现细节。目录API的主要类型API的组成部分API的作用和优势使用API的例子如何使用API总结API的主要类型WebAPI：这是最常见的一种API类型，通常用于通过网络与远程服务器进行通
  • 利用docker部署单节点milvus并实现图像化管理 听说唐僧不吃肉 Linuxdockermilvus
    Docker部署单机版milvus使用DockerCompose安装Milvusstandalone（即单机版），进行一个快速milvus的体验。1.前提条件系统可以使用centos或者ubuntu系统已经安装docker和docker-composemilvus版本这里选择2.3.12.启动etcd、minio、milvus由于milvus依赖etcd和minio，因此需要先启动这2个组件。同样
  • Spring容器初始化扩展点：ApplicationContextInitializer web14786210723 面试学习路线阿里巴巴springjava后端
    目录一、什么是ApplicationContextInitializer？1、核心作用2、适用场景二、ApplicationContextInitializer的使用方式1、实现ApplicationContextInitializer接口2、注册初始化器三、ApplicationContextInitializer的执行时机四、实际应用案例1、动态设置环境变量2、注册自定义的Bean定义五、注意
  • 向量数据库技术系列三-Chroma介绍 恰恰虎 chromadb数据库向量
    一、前言Chroma是一个开源的AI原生向量数据库，旨在帮助开发者更加便捷地构建大模型应用，将知识、事实和技能等文档整合进大型语言模型（LLM）中。它提供了简单易用的API，支持存储嵌入及其元数据、嵌入文档和查询、搜索嵌入等功能。主要有以下特点:轻量级：Chroma是一个基于向量检索库实现的轻量级向量数据库，不需要复杂的配置和大规模基础设施支持，非常适合小型或中型项目。易用性：提供简单的API，易
  • Windows下重叠I/O模型 智驾 Windows开发windows开发重叠IO模型
    目录一.Windows下重叠I/O模型二．重叠模型的优点三．重叠模型的基本原理五、实现重叠模型的步骤六.客户端情况的注意事项七．已知问题原文链接：https://blog.csdn.net/zhongguoren666/article/details/1827928在此感谢原作者。一.Windows下重叠I/O模型重叠模型的优点重叠模型的基本原理关于重叠模型的基础知识重叠模型的实现步骤多客户端情况
  • 如何用3个月零基础入门网络安全？_网络安全零基础怎么学习 白帽黑客啊一 学习web安全安全python网安入门
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包前言写这篇教程的初衷是很多朋友都想了解如何入门/转行网络安全，实现自己的“黑客梦”。文章的宗旨是：1.指出一些自学的误区2.提供客观可行的学习表3.推荐我认为适合小白学习的资源.大佬绕道哈！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包一、自学网络安全学习的误区和陷阱1.不要试图先成为一名程序员（以编程为基础的学习）
  • 大模型Agent 和 RAG 的关系 大数据追光猿 大模型语言模型人工智能学习方法transformer
    Agent和RAG（Retrieval-AugmentedGeneration）是两种在自然语言处理（NLP）和人工智能领域中广泛使用的技术，它们在功能、目标和实现方式上既有区别又有联系。以下是它们的关系及其协同作用的详细分析。1.Agent和RAG的定义（1）Agent定义：Agent是一种智能体，能够感知环境并采取行动以完成特定任务。在NLP领域，Agent通常指一个基于大语言模型（LLM）的
  • SpringBoot集成Flink-CDC，实现对数据库数据的监听 rkmhr_sef 面试学习路线阿里巴巴springbootflink数据库
    一、什么是CDC？CDC是ChangeDataCapture（变更数据获取）的简称。核心思想是，监测并捕获数据库的变动（包括数据或数据表的插入、更新以及删除等），将这些变更按发生的顺序完整记录下来，写入到消息中间件中以供其他服务进行订阅及消费。二、Flink-CDC是什么？CDCConnectorsforApacheFlink是一组用于ApacheFlink的源连接器，使用变更数据捕获(CDC)从
  • uni-app 与webView 互相传值 九亿少女无法触及的梦ى uni-app
    uni-app向webView传值在uni-app传值有多种实现方式，主要推荐evalJS，次要webSorcket重点：1.webView要找到正确的children！如果页面中只有一个webView标签则直接可以currentWebview.children()[0]2.H5页面中的监听function必须写在全局，不要写在任何load事件中！//index.vueletcurrentWebv
  • springBoot 和springCloud 版本对应关系 m0_74824894 面试学习路线阿里巴巴springbootspringcloud后端
    请求下面链接：拿到的json数据，格式化https://start.spring.io/actuator/info[这里是图片001]https://start.spring.io/actuator/info云原生脚手架CloudNativeAppInitializer(aliyun.com)[这里是图片002]https://start.aliyun.com/idea阿里云脚手架插件：Aliba
  • 深入解析Flink Kafka Connector的分布式流数据采集架构与底层实现 数据与算法架构提升之路 #Flinkflinkkafkaconector源码
    目录1.FlinkKafka连接器的分布式流采集架构1.1架构组成1.2分布式流模型2.数据分区分配策略3.为什么重写序列化和偏移量管理3.1与Flink分布式架构集成3.2与Flink检查点机制集成同时承接多级并行架构3.3OffsetsInitializer与细粒度偏移量控制3.4与Flink的Source接口统一4.版本兼容性管理5.有界流处理支持5.1实现原理5.2API使用示例5.3多种
  • 抗积分饱和（Anti-Windup）常见的处理方法 鹿屿二向箔 控制算法
    抗积分饱和（Anti-Windup）是PID控制中防止积分项在输出受限时过度累积的关键技术。以下是主要方法及其实现步骤：1.积分限幅（IntegralClamping）原理：直接限制积分项的最大/最小值。实现：integral=max(min(integral+error*dt,integral_max),integral_min)优点：简单易实现。缺点：需合理设置限幅值，可能影响动态性能。2.积
  • AtCoder备赛冲刺必刷题（C++） | 洛谷 AT_abc396_a Triple Four 热爱编程的通信人 c++算法开发语言
    本文分享的必刷题目是从蓝桥云课、洛谷、AcWing等知名刷题平台精心挑选而来，并结合各平台提供的算法标签和难度等级进行了系统分类。题目涵盖了从基础到进阶的多种算法和数据结构，旨在为不同阶段的编程学习者提供一条清晰、平稳的学习提升路径。欢迎大家订阅我的专栏：算法题解：C++与Python实现！附上汇总贴：算法竞赛备考冲刺必刷题（C++）|汇总【题目来源】洛谷：AT_abc396_a[ABC396A]
  • C/C++数据类型--整型类型 蓝心湄 C/C++数据类型c语言
    概念数据类型表示的是数据的身份决定它可以进行什么操作、占用多少空间与数据结构的区别数据类型更倾向于表示数据的身份数据结构表示的是怎么操作数据（是在类型的基础上进行对数据的操作的）C语言允许使用的类型类型的分类算术类型：基本类型和枚举类型纯量类型：算术类型和指针类型组合类型：数组类型和结构体类型整型数据基本整型（int）长度为2字节或4字节短整型（shortint）长度为2字节长整型（longint
  • ASP.NET Web的 Razor Pages应用，配置热重载，解决.NET Core MVC 页面在更改后不刷新 坐望云起 开发语言asp.net前端后端RazorPagesmvc.netcore
    RazorPages应用，修改页面查看修改效果，如果没有热重载，改一句话跑一次，这个活就没法干了。1、VS2022中的NuGet中安装RuntimeCompilationMicrosoft.AspNetCore.Mvc.Razor.RuntimeCompilation需要配套你的.netsdk版本，我这里用的是6.0，所以这个也用了6.0.0。2、找到你的Properties\launchSett
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他