Java Fans
Java Fans

JavaScript—实现手风琴画册

在这里插入图片描述

✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。
个人主页：Java Fans的博客
个人信条：不迁怒，不贰过。小知识，大智慧。
当前专栏：前端案例分享专栏
✨特色专栏：国学周更-心性养成之路
本文内容：JavaScript—实现手风琴画册
更多内容点击
      1、CSS中iconfont 彩色图标使用详解

【本文目录】

    • 项目效果
    • 涉及功能
    • 项目分析
    • 项目需求
    • 项目实现
    • 处理错误
    • 共性问题
    • 技术实现

项目效果

  • 图片分布在格子中
  • 鼠标放置的格子会放大
  • 其他格子自动调整大小
  • 放大的个子中显示文字

涉及功能

  • JavaScript：
    • 控制格子的大小
    • 响应鼠标
  • CSS：
    • 处理动画

项目分析

  • 放大的格子
  • 与放大格子在同一列
  • 与放大格子在同一行
  • 被技开的格子

JavaScript—实现手风琴画册_第1张图片

项目需求

  • 为该画册添加自动滚动放大的功能
    • 每隔3秒依次放大一张图片
    • 当鼠标移入任意图片时，停止自动滚动
    • 当鼠标不在任意一张图片上，恢复自动滚动

项目实现

  • 使用JS封装代码
    • 引用类代码
    • 实例化类
      在这里插入图片描述
  • 实现类代码
    • 实现默认配置
    • 检测用户配置
    • 实现图片放大方法
    • 添加鼠标时间
  • 实现CSS代码
    • 添加动画
    • 处理图片居中
    • 处理文字动画

处理错误

  • 分析错误成因
  • 编写解决方案

共性问题

  • 常见问题及解决方法
  • 代码规范问题
  • 调试技巧

技术实现

  • 使用DIV布局HTML网页
DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Gallerytitle>
  <link href="./style.css" rel="stylesheet" type="text/css" />
head>
<body>
  <div id="xy-gallery">
    <div><img src="./images/image1.jpg" />div>
    <div>
      <img src="./images/image2.jpg" />
      <div class="text">
        <p>some text herep>
      div>
    div>
    <div><img src="./images/image3.jpg" />div>
    <div><img src="./images/image4.jpg" />div>
    <div><img src="./images/image5.jpg" />div>
    <div>
      <img src="./images/image6.jpg" />
      <div class="text">
        <h1>this is a big titleh1>
        <p>Laborum anim quis non sint qui. Non deserunt laboris nulla proident tempor in occaecat. Excepteur proident ex veniam labore. Magna dolor sunt pariatur nisi nulla. Est pariatur amet cillum sint nostrud. Proident mollit occaecat exercitation minim nisi labore ullamco nulla mollit pariatur. Commodo aute est culpa pariatur velit tempor enim ipsum deserunt id non tempor.p>
      div>
    div>
    <div><img src="./images/image7.jpg" />div>
    <div><img src="./images/image8.jpg" />div>
    <div><img src="./images/image9.jpg" />div>
    <div><img src="./images/image10.jpg" />div>
    <div><img src="./images/image11.jpg" />div>
    <div><img src="./images/image12.jpg" />div>
    <div><img src="./images/image13.jpg" />div>
    <div><img src="./images/image14.jpg" />div>
    <div><img src="./images/image15.jpg" />div>
    <div><img src="./images/image16.jpg" />div>
    <div><img src="./images/image17.jpg" />div>
    <div><img src="./images/image18.jpg" />div>
    <div><img src="./images/image19.jpg" />div>
    <div><img src="./images/image20.jpg" />div>
  div>
  <script type="text/javascript" src="script.js">script>
  <script type="text/javascript">
    var gallery = new XyGallery("xy-gallery", {width: 5, height: 4})
  script>
body>
html>
  • CSS样式美化界面
*{margin: 0; padding: 0;}
.xy-gallery > div{ 
  float: left;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: all .3s;
}
.xy-gallery > div img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.xy-gallery > div .text{ 
  transition:all 1s .3s;
  opacity: 0;
  bottom: 0;
  transform: translateY(100%);
  position: absolute;
  width: 340px;
  background: rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  color: #ffffff;
  box-sizing: border-box;
}
.xy-gallery > div.active .text{ opacity: 1;transform: translateY(0%);}
  • 使用JavaScript制作特效
function XyGallery(id, option) {
  var container = document.getElementById(id);
  if (!~container.className.indexOf('xy-gallery')) container.className += " xy-gallery";
  var defaultOption = {
    defaultWidth: 130,
    defaultHeight: 40,
    activeWidth: 340,
    activeHeight: 400,
    animateDuration: 300
  }

  option = Object.assign({}, defaultOption, option);

  if (option.width && option.height && option.width * option.height != container.children.length) throw "width and height not match children length!";

  var lastRunTime = new Date(0);
  var runId = 0;
  var activePicture = function (index) {
    clearTimeout(runId)
    var currentTime = new Date();
    if (currentTime - lastRunTime < option.animateDuration) {
      runId = setTimeout(function () {
        activePicture(index)
      }, option.animateDuration);
      return;
    }
    lastRunTime = currentTime;

    container.style.width = (option.width - 1) * option.defaultWidth + option.activeHeight + 'px'
    var cx = index % option.width;
    var cy = Math.floor(index / option.width);
    for (var x = 0, xl = option.width; x < xl; x++) {
      for (var y = 0, yl = option.height; y < yl; y++) {
        var cindex = y * option.width + x;
        var item = container.children[cindex];
        if (x == cx && y == cy) {
          item.className = "active";
          item.style.width = option.activeWidth + "px";
          item.style.height = option.activeHeight + "px";
        } else if (x == cx) {
          item.className = "";
          item.style.width = option.activeWidth + "px";
          item.style.height = option.defaultHeight + "px";
        } else if (y == cy) {
          item.className = "";
          item.style.width = option.defaultWidth + "px";
          item.style.height = option.activeHeight + "px";
        } else {
          item.className = "";
          item.style.width = option.defaultWidth + "px";
          item.style.height = option.defaultHeight + "px";
        }
      }
    }
  }
  activePicture(0);

  var runId = 0;
  Array.prototype.forEach.call(container.children, function (o, i) {
    o.addEventListener('mouseenter', function (evt) {
      activePicture(i);
    })
  })

  return {
    active: activePicture,
    setSize: function(width, height){
      if (width && height && width * height != container.children.length) throw "width and height not match children length!";
      option.width = width;
      option.height = height;
      activePicture(0)
    }
  }
}

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。

你可能感兴趣的:(八,前端案例分享专栏,javascript,前端,开发语言)

  • 【Python】一文详细介绍 py格式 文件 高斯小哥 Python基础【高质量合集】python新手入门学习
    【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py
  • 《昼颜》里的日本女人：相遇要万种风情，分手要残忍绝情 迷影咖啡
    作者：迷之菌子神奇菇迷影咖啡：一本正经做烘焙，胡说八道聊电影漫天萤火虫消散之时良宵就将过去，人们也说含苞待放的花蕾总会开了又谢，因紧紧相拥而面红耳赤的躯体，便是我们经历过这热爱的证明。夫妻关系介绍《昼颜》是2014年电视剧《昼颜：工作日下午三点的恋人们》的续集，故事发在电视剧情节结束的三年后，讲述了已经恢复独身的纱和偶然与曾经的出轨对象北野重逢后再次陷入感情漩涡的故事。《昼颜》制作灵感源自利佳子在
  • 迎接2019 唯有杜康1994
    告别2018这一年是机遇与挑战，痛苦与喜悦，失去与收获的一年一月:收获了第一份爱情，开始真正想去了解一个人三月:对工作有了更深入的认识，靠自己的力量完成晋升五月:搬家，住进了自己理想的公寓，一间属于自己的屋子。满地的书六月:外调广州，升经理，有了自己的第一个团队。七月:怀着自我否定，第一次完成了部门任务八月:第一个员工流失，痛哭不已明白无不散之筵席九月:员工陆续离开，经济是一切的根本。十月:陪员工
  • word字号和mathtype磅值关系及批量修改 小铁匠-Ma office小技巧经验分享
    word字号和mathtype磅值关系及批量修改1.字号与磅值关系字号「八号」对应磅值5字号「七号」对应磅值5.5字号「小六」对应磅值6.5字号「六号」对应磅值7.5字号「小五」对应磅值9字号「五号」对应磅值10.5字号「小四」对应磅值12字号「四号」对应磅值14字号「小三」对应磅值15字号「三号」对应磅值16字号「小二」对应磅值18字号「二号」对应磅值22字号「小一」对应磅值24字号「一号」对应
  • 华为OD机试 - 单向链表中间节点（Java & JS & Python & C & C++） 华为OD题库 华为od链表java
    须知哈喽，本题库完全免费，收费是为了防止被爬，大家订阅专栏后可以私信联系退款。感谢支持文章目录须知题目描述输出描述解析代码题目描述给定一个单链表L，请编写程序输出L中间结点保存的数据。如果有两个中间结点，则输出第二个中间结点保存的数据。例如：给定L为1→7→5，则输出应该为7；给定L为1→2→3→4，则输出应该为3；输入描述每个输入包含1个测试用例。每个测试用例：第一行给出链表首结点的地址、结点总
  • 【算法分析与设计】去除重复字母 五敷有你 算法分析与设计javajavascript开发语言算法数据结构
    个人主页：五敷有你系列专栏：算法分析与设计⛺️稳中求进，晒太阳题目给你一个字符串s，请你去除字符串中重复的字母，使得每个字母只出现一次。需保证返回结果的字典序最小（要求不能打乱其他字符的相对位置）。示例示例1：输入：s="bcabc"输出："abc"示例2：输入：s="cbacdcbc"输出："acdb"思路贪心+单调栈实现【字符串删除一个字符使其字典序最小的贪心策略】：对于两个长度相同的字符串，
  • 浙江女大学生“卖淫日记”曝光，震惊全网：背后还藏着一个真相 地球上的星星_272e
    作者/在风来源/微信公众号：自黑思维最近，一个新闻震碎无数人的三观：在浙江农林大学，有一位女大学生，在网上公开自己的“卖淫日记”，无论是文字还是图片，都非常露骨。而目前关于这事的瓜，都已经被删得七七八八，但我有保留截图的习惯，所以才有了这篇文章。首先，必须要强调的一点，就是这事不是谣传，是真的，学校已经出来证实过。只是学校表示该名女学生有精神病。但到底是不是真的精神有问题？我们可以从她的日记里，略
  • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
    PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
  • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
    ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
  • 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言
    虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • 普通工厂流水线员工，怎么做可以找到出路？ 王芸_42fc
    我是第一次接触工厂、进入工厂，在厂里工作有三个月了，每天就看车间的流水线员工工作，从早上八点，加班到晚上九点，再下班回家。工资按计件来算，月收入超过一万也有，但是就那几个月，通常情况下也就是3-4千的工资。我每天看着他们忙忙碌碌，听他们说话，每天下了班回去就随便收拾收拾就该睡了，累到休息天只想好好睡一觉。我今天就在想一个问题，如果他们的年龄是在50-60岁，人快退休了，每个月有个可以的收入也满足了
  • 地缚少年花子君，一个小小的甜甜圈，源光看见了源辉内心的小秘密 ACGN安乐
    大家好我是小安，很高兴又和大家见面了，话不多说我们直接进入正题，不知大家对日本动画《地缚少年花子君》中海鸥学院高等部二年级生，学生会的会长源辉了解多少呢？源辉从第一集中就已经登场，他是源光的哥哥，也是八寻宁宁的理想对象之一，源辉除了有学生这层身份之外和他的弟弟源光一样都是拔除师，也就是我们统称的除妖师，从表面来看源辉是个高颜值帅哥，脾气很好同时也有很多女孩子想做他的女朋友，但金无足赤人无完人大家也
  • 调动 格林凌波
    在自己本校也存在调动一说，本来按照常态今年应顺势升入初三，虽然我们班及格率不出彩，优秀率还是可以的。自己这一科也是八个班级的第一。但还是有调动，若进入高一年级可以算是高升，现在让我教初一两个班那就是降级了，而且帮我看安排表的同事很惊讶地大声说：“怎么初三没你啊？”“那我在那？”“你在初一，任5班班主任，教两个英语，备课组长。”当班主任还是组长那也不算低就，如果我认为是学校让我下来带带初一新来的老师
  • Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
    一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
  • 冷门知识 | 大雪冻skr个人，知道其中三条冷知识温暖整个冬天~ 带你玩儿
    今日大雪今日节气——大雪，可是并没有下雪。“嗷~~冻死了”“啊~好冷啊”办公室里的伙伴们一进门都是出奇的一致好吧，那今天的冷知识，就让小八给大家来送些温暖吧~温暖整个冬天的冷知识其实喝酒不能暖身子喝酒只会降低身体内部温度，增加患上低体温症的风险，喝酒也会阻断身体自然颤抖保暖的机制。之所以喝酒会感觉暖暖的，因为酒精让血管扩张，将温暖的血液带到体表。所以喝酒带来的暖是暂时的，最后反而会大大降低身体抵抗
  • java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
    根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
  • 图书馆服务，一切都是值得的 攸小宁
    进入大学，校园没符合我看到电视剧里的那种大校园，也没体验到做公交上学，没有所谓的林荫大道，没有故事中的男主角，却让我体会到了那个校园图书馆上书的环节，在图书馆上书原来就是那个推着小推车一本本的放在架子上，没有什么特别。今天已经是我到图书馆服务的第八次了，但却是迄今为止服务时间最长的一次，也是唯一听到老师和我说一声谢谢的一次，让我非常满意的一次。也许在服务之前有人会说，这个完全自愿，没有任何报酬的工
  • Django forms组件 在飞行-米龙 Djangodjangopython后端
    【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
  • 史上最详细的测试用例写作规范 心软小念 测试用例
    软件测试用例得出软件测试用例的内容，其次，按照软件测试写作方法，落实到文档中，两者是形式和内容的关系，好的测试用例不仅方便自己和别人查看，而且能帮助设计的时候考虑的更周。一个好的测试用例必须包含足够的内容，将这些内容可以拆分为八个要素：用例编号、测试项目、测试标题、重要级别、预置条件、测试输入、操作步骤、预期输出。1、用例编号1）规则：是由字符和数字组成的字符串，具有唯一性、易识别性。2）不同阶段
  • Web前端Html的表单 任家伟 前端html
    表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
  • Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程） 王佳斌 +Thinkphpmysql前端数据库
    前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
  • javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript
    日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
  • 【Python】成功解决ModuleNotFoundError: No module named ‘torchinfo‘ 高斯小哥 BUG解决方案合集pythonpytorch新手入门学习debug
    【Python】成功解决ModuleNotFoundError:Nomodulenamed‘torchinfo’个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文
  • COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript
    Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
  • JSON与AJAX：网页交互的利器 入冉心 jsonajax前端
    在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
  • 《外观模式（极简c++）》 Bovinitwo 设计模式（极简c++版）c++开发语言
    本文章属于专栏-概述-《设计模式（极简c++版）》-CSDN博客模式说明方案：外观模式提供了一个统一的接口，简化了一组复杂子系统的访问方式。优点：将客户端与子系统解耦，降低了复杂性。提高了代码的灵活性和可维护性。缺点：可能导致外观类过于庞大，承担了过多的责任。增加了系统的抽象层，有时会影响性能。本质思想：外观模式的本质思想是为一组复杂的子系统提供一个简单的接口，隐藏其复杂性，使得客户端可以更轻松地
  • 程序员开发技术整理 laizhixue 学习前端框架
    前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
  • 穷人和富人哪个更快乐 骑着蜗牛的大乌龟
    有人约我聊一下穷人和富人哪个更快乐？我跟她说，富人快不快乐我不知道，穷人一定不快乐。咱们先来定义一下什么叫穷人。头顶宝字盖，下面八分开，见人弓身行礼，手中沒有钱财”这是繁体字窮的描写，还有一种说法就是一家人住在一个洞穴里，连睡觉都得弓着身子。这种日子我真不知道有什么可快乐的。不知道大家有没有看过蜗居这个电视剧，我印象最深刻的不是海藻海清，也不是宋思明小贝。还记不记得海清的那个邻居上海老太太，最后当
  • 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript
    具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
  • Spring4.1新特性——综述 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • Schema与数据类型优化 annan211 数据结构mysql
    目前商城的数据库设计真是一塌糊涂，表堆叠让人不忍直视，无脑的架构师，说了也不听。 在数据库设计之初，就应该仔细揣摩可能会有哪些查询，有没有更复杂的查询，而不是仅仅突出 很表面的业务需求，这样做会让你的数据库性能成倍提高，当然，丑陋的架构师是不会这样去考虑问题的。 选择优化的数据类型 1 更小的通常更好 更小的数据类型通常更快，因为他们占用更少的磁盘、内存和cpu缓存，
  • 第一节 HTML概要学习 chenke htmlWebcss
    第一节 HTML概要学习 1. 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。 打开记事本 输入一下内
  • MyEclipse里部分习惯的更改 Array_06 eclipse
    继续补充中---------------------- 1.更改自己合适快捷键windows-->prefences-->java-->editor-->Content Assist-->      Activation triggers for java的右侧“.”就可以改变常用的快捷键 选中 Text
  • 近一个月的面试总结 cugfy 面试
    本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/46753275 前言       打算换个工作，近一个月面试了不少的公司，下面将一些面试经验和思考分享给大家。另外校招也快要开始了，为在校的学生提供一些经验供参考，希望都能找到满意的工作。 
  • HTML5一个小迷宫游戏 357029540 html5
         通过《HTML5游戏开发》摘抄了一个小迷宫游戏，感觉还不错，可以画画，写字，把摘抄的代码放上来分享下，喜欢的同学可以拿来玩玩！ <html> <head> <title>创建运行迷宫</title> <script type="text/javascript"
  • 10步教你上传githib数据 张亚雄 git
    官方的教学还有其他博客里教的都是给懂的人说得，对已我们这样对我大菜鸟只能这么来锻炼，下面先不玩什么深奥的，先暂时用着10步干净利索。等玩顺溜了再用其他的方法。 操作过程（查看本目录下有哪些文件NO.1）ls （跳转到子目录NO.2）cd+空格+目录 （继续NO.3）ls （匹配到子目录NO.4）cd+ 目录首写字母+tab键+（首写字母“直到你所用文件根就不再按TAB键了”） （查看文件
  • MongoDB常用操作命令大全 adminjun mongodb操作命令
    成功启动MongoDB后，再打开一个命令行窗口输入mongo，就可以进行数据库的一些操作。输入help可以看到基本操作命令，只是MongoDB没有创建数据库的命令，但有类似的命令 如：如果你想创建一个“myTest”的数据库，先运行use myTest命令，之后就做一些操作（如：db.createCollection('user')）,这样就可以创建一个名叫“myTest”的数据库。 一
  • bat调用jar包并传入多个参数 aijuans
    下面的主程序是通过eclipse写的： 1.在Main函数接收bat文件传递的参数（String[] args）  如：   String ip =args[0];          String user=args[1];       &nbs
  • Java中对类的主动引用和被动引用 ayaoxinchao java主动引用对类的引用被动引用类初始化
      在Java代码中，有些类看上去初始化了，但其实没有。例如定义一定长度某一类型的数组，看上去数组中所有的元素已经被初始化，实际上一个都没有。对于类的初始化，虚拟机规范严格规定了只有对该类进行主动引用时，才会触发。而除此之外的所有引用方式称之为对类的被动引用，不会触发类的初始化。虚拟机规范严格地规定了有且仅有四种情况是对类的主动引用，即必须立即对类进行初始化。四种情况如下：1.遇到ne
  • 导出数据库 提示 outfile disabled BigBird2012 mysql
    在windows控制台下，登陆mysql，备份数据库：   mysql>mysqldump -u root -p test test > D:\test.sql 使用命令 mysqldump 格式如下： mysqldump -u root -p *** DBNAME > E:\\test.sql。 注意：执行该命令的时候不要进入mysql的控制台再使用，这样会报
  • Javascript 中的 && 和 || bijian1013 JavaScript&&||
            准备两个对象用于下面的讨论 var alice = { name: "alice", toString: function () { return this.name; } } var smith = { name: "smith",
  • [Zookeeper学习笔记之四]Zookeeper Client Library会话重建 bit1129 zookeeper
    为了说明问题，先来看个简单的示例代码：   package com.tom.zookeeper.book; import com.tom.Host; import org.apache.zookeeper.WatchedEvent; import org.apache.zookeeper.ZooKeeper; import org.apache.zookeeper.Wat
  • 【Scala十一】Scala核心五：case模式匹配 bit1129 scala
    package spark.examples.scala.grammars.caseclasses object CaseClass_Test00 { def simpleMatch(arg: Any) = arg match { case v: Int => "This is an Int" case v: (Int, String)
  • 运维的一些面试题 yuxianhua linux
    1、Linux挂载Winodws共享文件夹   mount -t cifs //1.1.1.254/ok /var/tmp/share/ -o username=administrator,password=yourpass 或 mount -t cifs -o username=xxx,password=xxxx //1.1.1.1/a /win    
  • Java lang包-Boolean BrokenDreams boolean
             Boolean类是Java中基本类型boolean的包装类。这个类比较简单，直接看源代码吧。 public final class Boolean implements java.io.Serializable,
  • 读《研磨设计模式》-代码笔记-命令模式-Command bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.List; /** * GOF 在《设计模式》一书中阐述命令模式的意图：“将一个请求封装
  • matlab下GPU编程笔记 cherishLC matlab
    不多说，直接上代码 gpuDevice % 查看系统中的gpu,,其中的DeviceSupported会给出matlab支持的GPU个数。 g=gpuDevice(1); %会清空 GPU 1中的所有数据,,将GPU1 设为当前GPU reset(g) %也可以清空GPU中数据。 a=1; a=gpuArray(a); %将a从CPU移到GPU中 onGP
  • SVN安装过程 crabdave SVN
    SVN安装过程   subversion-1.6.12   ./configure --prefix=/usr/local/subversion --with-apxs=/usr/local/apache2/bin/apxs --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --with-openssl=/
  • sql　行列转换 daizj sql行列转换行转列列转行
    行转列的思想是通过case when 来实现 列转行的思想是通过union all 来实现 下面具体例子： 假设有张学生成绩表(tb)如下: Name Subject Result 张三 语文　　74 张三 数学　　83 张三 物理　　93 李四 语文　　74 李四 数学　　84 李四 物理　　94 */ /* 想变成 姓名   &
  • MySQL--主从配置 dcj3sjt126com mysql
    linux下的mysql主从配置： 说明：由于MySQL不同版本之间的(二进制日志)binlog格式可能会不一样，因此最好的搭配组合是Master的MySQL版本和Slave的版本相同或者更低， Master的版本肯定不能高于Slave版本。（版本向下兼容） mysql1  : 192.168.100.1    //master mysq
  • 关于yii 数据库添加新字段之后model类的修改 dcj3sjt126com Model
    rules: array('新字段','safe','on'=>'search') 1、array('新字段', 'safe')//这个如果是要用户输入的话，要加一下， 2、array('新字段', 'numerical'),//如果是数字的话 3、array('新字段', 'length', 'max'=>100),//如果是文本 1、2、3适当的最少要加一条，新字段才会被
  • sublime text3 中文乱码解决 dyy_gusi Sublime Text
    sublime text3中文乱码解决 原因：缺少转换为UTF-8的插件 目的：安装ConvertToUTF8插件包 第一步：安装能自动安装插件的插件，百度“Codecs33”，然后按照步骤可以得到以下一段代码： import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a30980927
  • 概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM geeksun PHP
    CGI CGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。如php,perl,tcl等。 FastCGI FastCGI像是一个常驻(long-live)型的CGI，它可以一直执行着，只要激活后，不
  • Git push 报错 "error: failed to push some refs to " 解决 hongtoushizi git
    Git push 报错 "error: failed to push some refs to " . 此问题出现的原因是：由于远程仓库中代码版本与本地不一致冲突导致的。 由于我在第一次git pull --rebase 代码后，准备push的时候，有别人往线上又提交了代码。所以出现此问题。 解决方案： 1： git pull    2：
  • 第四章 Lua模块开发 jinnianshilongnian nginxlua
    在实际开发中，不可能把所有代码写到一个大而全的lua文件中，需要进行分模块开发；而且模块化是高性能Lua应用的关键。使用require第一次导入模块后，所有Nginx 进程全局共享模块的数据和代码，每个Worker进程需要时会得到此模块的一个副本（Copy-On-Write），即模块可以认为是每Worker进程共享而不是每Nginx Server共享；另外注意之前我们使用init_by_lua中初
  • java.lang.reflect.Proxy liyonghui160com
      1.简介   Proxy 提供用于创建动态代理类和实例的静态方法 （1）动态代理类的属性 代理类是公共的、最终的，而不是抽象的 未指定代理类的非限定名称。但是，以字符串 "$Proxy" 开头的类名空间应该为代理类保留 代理类扩展 java.lang.reflect.Proxy 代理类会按同一顺序准确地实现其创建时指定的接口
  • Java中getResourceAsStream的用法 pda158 java
    1.Java中的getResourceAsStream有以下几种： 1. Class.getResourceAsStream(String path) ： path 不以’/'开头时默认是从此类所在的包下取资源，以’/'开头则是从ClassPath根下获取。其只是通过path构造一个绝对路径，最终还是由ClassLoader获取资源。 　　2. Class.getClassLoader.get
  • spring 包官方下载地址（非maven） sinnk spring
    SPRING官方网站改版后，建议都是通过 Maven和Gradle下载，对不使用Maven和Gradle开发项目的，下载就非常麻烦，下给出Spring Framework jar官方直接下载路径:   http://repo.springsource.org/libs-release-local/org/springframework/spring/   s
  • Oracle学习笔记(7) 开发PLSQL子程序和包 vipbooks oraclesql编程
        哈哈，清明节放假回去了一下，真是太好了，回家的感觉真好啊！现在又开始出差之旅了，又好久没有来了，今天继续Oracle的学习！      这是第七章的学习笔记，学习完第六章的动态SQL之后，开始要学习子程序和包的使用了……，希望大家能多给俺一些支持啊！     编程时使用的工具是PLSQL
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他