随风奔跑尿飞扬
随风奔跑尿飞扬

js自定义动画函数实现轮播图

缓动动画函数

传入三个参数，分别为：操作元素，操作属性，回调函数

原理： 将定时器ID存储在“操作元素”的属性中，每次调用函数先清除此“操作元素”原有的定时器，以解决动画抖动、多个定时器无法清理的问题。 操作属性可以有多个，以循环的方式遍历属性，当所有的动画完成后调用回调函数

function animate(ele,json,callback,loopTime) {
    clearInterval(ele.timeId);
    loopTime = loopTime?loopTime:20;
    ele.timeId = setInterval(function () {
        var flag = true;
        for (var arr in json) {
            if (arr === 'zIndex') {
                ele.style[arr] = json[arr];  //z-index属性没有单位，直接设置
            }else if (arr === 'opacity') {
                var current = getStyle(ele,arr)*100; //将数值放大一百倍而不使用原有的小数方式
                var target = json[arr]*100;
                var step= (target - current)/10; 
                step = step<0?Math.floor(step):Math.ceil(step); //因为步移距离有正数和负数，所以需要判断取整方式。（0.2取1，向上取整，-0.2取-1，向下取整）
                current += step;
                ele.style[arr] = current/100;
            }else {
                var current = parseInt(getStyle(ele,arr));
                var target = json[arr];
                var step= (target - current)/10;
                step = step<0?Math.floor(step):Math.ceil(step);
                current += step;
                ele.style[arr] = current+'px';
            }
            if (current !== target){
                flag = false
            }
        }
        if (flag){
            clearInterval(ele.timeId);
            if (callback){
                callback();
            }
        }
        console.log('目标位置：'+target+' 当前位置： '+current+'步移距离：'+step)
    },loopTime)
}

上面得代码不够完美，至于缺点在哪就交给你们啦。下面是经过优化得代码。轮播图用得就是这段代码

function animate(ele,target,step,loopTime) {
    var current = ele.offsetLeft;
    // var target = 400;
    step = step?step:10;
    loopTime = loopTime?loopTime:20;
    //这里传入的ele是一个对象，为对象添加了一个属性存储定时器ID。 因为这种方式底层是以内存地址引用的
    //所以这里的属性会被全局保存下来
    clearInterval(ele.timeToolId);
    ele.timeToolId = setInterval(function () {
        current += target>current?step:-step;

        if ( Math.abs(target - current) > Math.abs(step)){
            ele.style.left = current+'px';
        } else {
            ele.style.left = target+'px';
            clearInterval(ele.timeToolId);
        }
    },loopTime)
}

旋转木马轮播图

思路： 首先以定位的方式布局，布局完成后在编写js代码。 将每个图片的位置存放到数组中，每次旋转时将数组的最后一位调换到第一位或反之（依据左右滚动而定）,再使用动画函数赋值。最后一张图片与第一章图片相同，这样形成无缝的效果。

素材我就不放了，交给各位自己度娘了


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }

    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }

    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }

    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }

    .all ol li.current {
      background: #DB192A;
    }

    #arr {
      display: none;
    }

    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #arr #right {
      right: 5px;
      left: auto;
    }
  style>
head>
<body>
<div class="all" id='box'>
  <div class="screen">
    <ul>
      <li><img src="images/1.jpg" width="500" height="200"/>li>
      <li><img src="images/2.jpg" width="500" height="200"/>li>
      <li><img src="images/3.jpg" width="500" height="200"/>li>
      <li><img src="images/4.jpg" width="500" height="200"/>li>
      <li><img src="images/5.jpg" width="500" height="200"/>li>
    ul>
    <ol>
    ol>
  div>
  <div id="arr"><span id="left"><span><span id="right">>span>div>
div>
<script src="common.js">script>
<script>
  var box = document.getElementById('box');
  var screen = box.children[0];
  var screenWidth = screen.offsetWidth;
  var ulObj = screen.children[0];
  var olObj = screen.children[1];
  var arr = document.getElementById('arr');
  var arrLeft = document.getElementById('left');
  var arrRight = document.getElementById('right');
  var current = 0;
  var timeId = 0;
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  for (var i=0;i<ulObj.children.length-1;i++){
    var liObj = document.createElement("li");
    liObj.innerHTML = i+1;
    liObj.setAttribute('index',i);
    liObj.onmouseover = function() {
        animate(ulObj,-this.getAttribute('index')*screenWidth);
        for (var j=0;j<olObj.children.length;j++) {
          olObj.children[j].className='';
        }
        current = -this.getAttribute('index');
        this.className = 'current';
    };
    olObj.appendChild(liObj);
  }
  olObj.children[0].className = 'current';
  box.onmouseover = function () {
    arr.style.display = 'block';
    clearInterval(timeId);
  };
  box.onmouseout = function () {
    arr.style.display = 'none';
    timeId = setInterval(right,2000);
  };
  arrLeft.onclick = function () {
    if (current !==0 ){
      current++;
      animate(ulObj,current*screenWidth);
      for (var j=0;j<olObj.children.length;j++) {
        olObj.children[j].className='';
      }
      olObj.children[Math.abs(current)].className='current';
    }
  };
  arrRight.onclick = right;
  function right() {
    if (Math.abs(current)===ulObj.children.length-1){
      current =0;
      ulObj.style.left = '0px';
    }
    if (Math.abs(current)<ulObj.children.length-1) {
      current--;
      animate(ulObj,current*screenWidth);
      for (var j=0;j<olObj.children.length;j++) {
        olObj.children[j].className='';
      }
      if (Math.abs(current)===ulObj.children.length-1){
        olObj.children[Math.abs(current)-1].className='';
        olObj.children[0].className='current';
      }else{
        olObj.children[Math.abs(current)].className='current';
      }
    }
  }
  timeId = setInterval(right,2000);

script>
body>
html>

你可能感兴趣的:(js)

  • [Unity技术] Unity3D高级编程网络层剖析数据协议原理 王 银 UnityUnity辅助拓展json
    协议包的格式，json,msgpack,protobuf以及自定义格式项目的网路层在建设中，除了选择传输协议TCP，UDP，以及应用层协议HTTP方式外，还需要选择在传输过程中的业务层协议格式。前面我们分析了TCP，UDP，HTTP的原理与应用，这里我们来了解下在传输层和应用层之上的业务层中，网络数据传输格式的选择以及它们的利弊。我们将在这里剖析JSON，MessagePack，Protobuf的
  • java 字符串日期字段格式化前端显示 qq_36608622 java开发语言
    在Java应用程序中，如果你有一个字符串类型的日期字段，并希望将其格式化后显示在前端，可以通过多种方式实现。这通常涉及到在后端将字符串转换为Date或LocalDateTime等对象，然后使用适当的注解或配置来确保它们以正确的格式序列化为JSON发送到前端。以下是几种常见方法：方法一：使用@JsonFormat注解(Jackson)如果你使用的是Jackson来处理JSON序列化和反序列化，可以在
  • 【Node.js】Koa2 整合接口文档 秀秀_heo Node.js后端开发node.js
    部分学习来源：https://blog.csdn.net/qq_38734862/article/details/107715579依赖//koa2-swagger-uiUI视图组件swagger-jsdoc识别写的/***/转jsonnpminstallkoa2-swagger-uiswagger-jsdoc--save配置config\swaggerConfig.jsconstRouter=r
  • 前端知识速记—JS篇：箭头函数 无限大. 前端知识速记javascript前端开发语言
    前端知识速记—JS篇：箭头函数什么是箭头函数？箭头函数是ES6引入的一种新的函数书写方式，其语法更为简洁，常用于替代传统的函数表达式。箭头函数的基本语法如下：constfunctionName=(parameters)=>{//函数体};通过这种方式，开发者可以以更简练的形式定义函数，提高代码的可读性。箭头函数的基本特性1.简化语法箭头函数最直接的优势就是语法简单，特别是在定义短小的函数时，能显著
  • Vue.js 组合函数（Composables） 轻口味 VUE.JS入门与实践vue.js前端javascript
    Vue.js组合函数（Composables）今天我们来聊聊Vue3中的一个重要概念：组合式函数（Composables）。如果你对如何在Vue3中复用有状态逻辑感兴趣，那么这篇文章将为你解答。什么是组合式函数？在Vue应用中，组合式函数是利用Vue的组合式API（CompositionAPI）来封装和复用有状态逻辑的函数。这使得我们可以将组件的逻辑提取到独立的函数中，从而在不同的组件之间共享和复
  • ambari-server页面错位问题解决 王木头 ambarihadoop大数据
    背景：项目新安装的ambari集群页面错位如下解决办法（临时）：修改ambari-server的前端文件：/usr/lib/ambari-server/web/javascripts/app.js原代码：initNavigationBar:function(){if(App.get('router.mainController.isClusterDataLoaded')){$('body').on
  • Web-3.0（Solidity）基础教程 奶龙牛牛 区块链
    Solidity是以太坊智能合约编程语言，用于编写去中心化应用（DApp）。如果你想开发Web3.0应用，Solidity是必学的。Remix-EthereumIDE（在线编写Solidity）特性RemixIDEHardhat适用场景适合初学者和小项目测试适合专业开发和大项目使用方式在线工具（浏览器）本地开发（命令行）环境无需安装，直接在线使用需要Node.js+NPM调试工具内置调试器（Deb
  • 解决React Native运行问题：编程指南 心之飞跃 reactnativereact.jsjavascript编程
    ReactNative是一种流行的跨平台移动应用开发框架，但有时候你可能会遇到无法运行ReactNative应用的问题。本文将提供一些常见问题的解决方法，帮助你快速解决ReactNative应用无法运行的情况。确保环境配置正确在开始解决ReactNative运行问题之前，首先要确保你的开发环境配置正确。以下是一些需要注意的关键点：Node.js：确保已经安装了最新版本的Node.js，并且可以通过
  • 通过JS逆向，爬取音乐（仅供学习交流，严禁非法使用） 纵码奔腾 python网络爬虫
    今天通过JS逆向，爬取自己喜欢的音乐，仅供交流，严禁非法使用。暂时还没有使用协程进行优化。fromplatformimportsystemimportrequestsimportexecjsimportosimportrelist_url="https://xxx/discover/toplist?id=3778678"yuanshi_url="https://xxxx/#/song?id=145
  • 华为OD机试算法目录题库-1 国王护卫队 华为OD面试最新手撕代码华为od算法python
    (D卷,200分)-攀登者2（Java&JS&Python&C）(D卷,100分)-最大时间（Java&JS&Python）(D卷,200分)-最长子字符串的长度(二)（Java&JS&Python&C）(D卷,200分)-最小矩阵宽度（Java&JS&Python&C）(D卷,200分)-最小传输时延Ⅱ（Java&JS&Python）(D卷,200分)-最大社交距离（Java&JS&Python
  • 创建Vue3.0工程和常用 Composition API 黎明之道 VUE1024程序员节
    一、创建Vue3.0工程1.使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##创建vuecreatevue_tes
  • node.js基础入门语法总结 @dahai node.jsnode.jsnpm前端
    目录目录1.node内置fs模块1.fs.readFile()2.fs.writeFile()3.注意点2.path模块1.path.join()2.path.basename()3.path.extname()3.http模块1.创建基本的web服务器步骤2.res.end返回中文乱码问题4.模块化1.模块作用域2.module对象，向外共享模块作用域中的成员3.module.exports对象
  • 【前端面试】深入了解Node.js基础 贾明恣 前端面试node.js
    前端与node.jsNode.js不是一门语言也不是框架，而是JavaScript运行时环境。基于GoogleV8引擎、同时它通过封装和抽象操作系统提供的底层功能，以及使用Libuv等c++/c的核心模块，扩展了JavaScript功能，使得JavaScript能够同时具有DOM操作(浏览器)和I/O、文件读写、操作数据库(服务器端)……能力，是目前最简单的全栈式语言。前端开发者经常需要安装Nod
  • 推荐使用：Node.js 参考架构 解然嫚Keegan
    推荐使用：Node.js参考架构nodejs-reference-architectureTheRedHatandIBMNode.jsReferencearchitecture.Theteams'opinion'onwhatcomponentsourcustomersandinternalteamsshouldusewhenbuildingNode.jsapplicationsandguidanc
  • 推荐项目：Node.js参考架构 卢千怡
    推荐项目：Node.js参考架构nodejs-reference-architectureTheRedHatandIBMNode.jsReferencearchitecture.Theteams'opinion'onwhatcomponentsourcustomersandinternalteamsshouldusewhenbuildingNode.jsapplicationsandguidanc
  • Node.js 中文编码问题全解析 skinGap node.jsJenkinsandroid-studio
    Node.js中文编码问题全解析问题背景在Node.js中执行Gradle命令时遇到中文输出乱码问题。这个问题涉及Windows系统、Java进程和Node.js三个层面的编码处理。问题分析最初的错误代码gradleProcess.stdout.setEncoding('utf-8');//错误：假设输出是UTF-8编码gradleProcess.stdout.on('data',(data)=>
  • 【前端】Electron入门开发教程，从介绍Electron到基础引用以及部分深度使用，附带常见的十个报错问题的解决方案和代码优化。 爱上大树的小猪 前端electronjavascript
    Electron是一个使用JavaScript、HTML和CSS等Web技术创建跨平台桌面应用程序的框架。它结合了Chromium渲染引擎和Node.js运行时，允许开发者构建高质量的桌面应用。下面是一个简要的Electron开发教程，从基础到深入，并包括一些常见的报错问题及其解决方案。一、介绍ElectronElectron能够使用前端技术栈开发桌面应用，支持Windows、macOS和Linu
  • JSON( JSON基础,ESP8266 JSON解析)ESP8266通过JSON实现物联网数据通讯( ESP8266客户端请求JSON信息, ESP8266客户端发送JSON信息) @@庆 json物联网esp8266嵌入式硬件
    JSONJSON基础JSON(JavaScriptObjectNotation)是一种通用的轻量级数据交换文本格式。它很容易让人阅读和编写，也便于机器进行解析和生成。它使用JavaScript语法来存储和描述数据对象，但是JSON完全独立于JavaScript。JSON可适用于多种流行编程语言。这些特性使JSON成为理想的数据交换格式。数据以“名”“值”对呈现数据“名”和“值”之间由冒号分隔大括号
  • cesium 源码修改 支持ArcGIS 服务属性过滤 yanasdf789 cesiumjavascript
    @[TOC]#前言功能效果：在cesium中加载arcgis矢量服务，使其通过字段定义过滤图形，如objectid>100,在ArcGISforjs中可以有现成的定义参数definitionExpression，ceisumz必须修改源码#一、比对URLarcgisapiforjs请求：http://localhost:6080/arcgis/rest/services/02_01_2019_ot
  • 网络爬虫爬取动态网页数据 db_sqy_2012 爬虫
    目录一、导学与指南豆瓣单页分析豆瓣多页输出二、理论学习1.抓取动态网页的技术2.Selenium和WebDriver的安装与配置3.Selenium的基本使用三、小结一、导学与指南豆瓣单页分析importjsonimportrequests#基础URL不顶事了url_base="https://movie.douban.com/typerank?type_name=%E5%89%A7%E6%83%
  • Vue 3.0打造响应式用户界面的新方式 随风九天 Vue六脉神剑性能九阴白骨爪前端vue.js前端响应式
    1简介Vue.js是一个用于构建用户界面的渐进式框架。Vue3.0是其最新版本，引入了许多新特性和改进，使得开发者能够更高效地构建响应式的Web应用程序。本文将带你深入了解如何使用Vue3.0来打造响应式用户界面，并通过实际案例和代码示例帮助你快速上手。2环境搭建要开始学习Vue3.0，首先需要安装Node.js和npm。然后可以通过以下命令全局安装@vue/cli：npminstall-g@vu
  • js-mdict 项目教程 符汝姿
    js-mdict项目教程js-mdict*.mdx/*.mddinterpreterjsimplements,supportmdictindexfile项目地址:https://gitcode.com/gh_mirrors/js/js-mdict1.项目的目录结构及介绍js-mdict/├──dist/│├──index.js│└──...├──src/│├──index.ts│├──mdict.
  • GitHub热门开源项目 李小白杂货铺 计算机技术杂谈github
    文章目录GitHub高级搜索GitHub秘籍GitHub开源项目排行榜热门开源项目学习类、资料类freeCodeCampfree-programming-bookscoding-interview-universityawesomedeveloper-roadmapsystem-design-primerYou-Dont-Know-JSCS-Notesjavascript-algorithmsbu
  • 深入浅出：Node.js高级重试机制 前端
    在分布式系统中，优雅地处理异常是构建可靠应用程序的关键。无论是网络抖动、服务暂时不可用，还是数据库连接超时，这些短暂的故障都可能让系统陷入混乱。而重试模式，作为一种经典的设计模式，正是解决这些问题的利器。今天，我们将深入探讨如何在Node.js中实现高级重试机制，并分享一些实用的策略和最佳实践。什么是重试模式？重试模式是一种用于提高系统稳定性的设计模式。它的核心思想是：在面对短暂的故障时，不要轻易
  • elasticsearch的常见面试题？ Dusk_橙子 K8Selasticsearch运维linux
    在面试过程中除去各个公司的不同服务架构之外，也会存在一些普遍大众的面试点，以下将会从三个维度进行介绍。基础知识类elasticsearch和数据库之间区别？elasticsearch：面向文档，数据以文档的形式存储，即JSON格式的对象。更强调数据的搜索、索引和分析。数据库：更侧重于事务处理、数据的严格结构化和完整性，适用于关系复杂、数据一致性要求高的业务场景。elasticsearch和核心组件
  • VSCode：deepspeed调试【.vscode/launch.json配置】 u013250861 图神经网络#LLM/训练vscodeide编辑器
    在控制台利用whichdeepspeed找到deepspeed路径：/home/wyr/anaconda3/envs/rlhf/bin/deepspeed{//使用IntelliSense了解相关属性。//悬停以查看现有属性的描述。//欲了解更多信息，请访问:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","confi
  • Rollup 实践：从入门到精通 小亮同学丶 构建工具和模块打包javascript前端webpack
    Rollup是一个高效的JavaScript模块打包器，特别适用于库和应用程序的打包。本文将深入探讨Rollup的实践方法，包括配置示例、性能优化策略以及不同场景下的最佳实践。基本配置首先，我们来看一个简单的Rollup配置示例：importresolvefrom'@rollup/plugin-node-resolve';importcommonjsfrom'@rollup/plugin-comm
  • 【2024年华为OD机试】(B卷,100分)- 热点网站统计（Java & JS & Python&C/C++） 妄北y 华为odjavajavascript矩阵c语言python
    一、问题描述题目描述企业路由器的统计页面需要动态统计公司访问最多的网页URL的TopN。设计一个算法，能够高效动态统计TopN的页面。输入描述每一行都是一个URL或一个数字：如果是URL，代表一段时间内的网页访问。如果是数字N，代表本次需要输出的TopN个URL。输入约束：总访问网页数量小于5000个，单网页访问次数小于65535次。网页URL仅由字母、数字和点分隔符组成，且长度小于等于127字节
  • 初识Node.js：入门指南与核心特性解析 Singe.Chen JavaScriptnode.js
    引言Node.js是一种基于ChromeV8引擎构建的JavaScript运行环境，它允许开发者使用JavaScript进行服务器端编程。自2009年发布以来，Node.js因其高效的性能和广泛的应用而迅速成为后端开发的热门选择。本文将介绍Node.js的基本概念、安装和使用方法，并探讨其核心特性如事件驱动和非阻塞I/O，提供一些简单的代码示例，帮助初学者快速入门。Node.js的基本概念Node
  • 【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(三) 枫叶丹4 HarmonyOS前端javascript开发语言华为harmonyos
    目录1->生命周期1.1->应用生命周期1.2->页面生命周期2->资源限定与访问2.1->资源限定词2.2->资源限定词的命名要求2.3->限定词与设备状态的匹配规则2.4->引用JS模块内resources资源3->多语言支持3.1->定义资源文件3.2->引用资源1->生命周期1.1->应用生命周期在app.js中可以定义如下应用生命周期函数：属性类型描述触发时机onCreate()=>vo
  • 微信开发者验证接口开发 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其他