不正经的程序员
不正经的程序员

JavaScript 图片画廊设计案例

JavaScript 图片画廊设计案例

项目简介

本项目展示了如何通过 JavaScript 构建一个交互式的图片画廊。用户可以点击画廊中的图片以查看其大图，并通过左右箭头切换显示的图片。项目中还包括了基本的动画效果，提升用户体验。

技术栈

  • HTML
  • CSS
  • JavaScript

设计目标

  1. 显示缩略图：用户可以查看多个小图作为画廊的缩略图。
  2. 查看大图：点击某个缩略图后，展示该图片的放大版。
  3. 切换图片：通过左右箭头切换显示的图片。
  4. 添加动画效果：图片切换时添加淡入淡出效果。

项目结构

- index.html
- style.css
- script.js
  • index.html
DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片画廊title>
    <link rel="stylesheet" href="style.css">
head>
<body>
    <div class="gallery-container">
        <div class="main-image">
            <img id="large-img" src="img1.jpg" alt="大图">
            <div class="arrow left" id="prev">❮div>
            <div class="arrow right" id="next">❯div>
        div>
        <div class="thumbnail-container">
            <img class="thumbnail" src="img1.jpg" alt="缩略图">
            <img class="thumbnail" src="img2.jpg" alt="缩略图">
            <img class="thumbnail" src="img3.jpg" alt="缩略图">
            <img class="thumbnail" src="img4.jpg" alt="缩略图">
        div>
    div>
    <script src="script.js">script>
body>
html>
  • style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.gallery-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.main-image {
    position: relative;
    width: 500px;
    height: 350px;
    margin-bottom: 20px;
    overflow: hidden;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    cursor: pointer;
}

.arrow.left {
    left: 10px;
}

.arrow.right {
    right: 10px;
}

.thumbnail-container {
    display: flex;
    gap: 10px;
}

.thumbnail {
    width: 80px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.1);
}
  • script.js
// 获取 DOM 元素
const largeImg = document.getElementById('large-img');
const thumbnails = document.querySelectorAll('.thumbnail');
const prevArrow = document.getElementById('prev');
const nextArrow = document.getElementById('next');

// 图片列表
const images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'];
let currentIndex = 0;

// 更新大图函数
const updateLargeImage = (index) => {
    largeImg.style.opacity = 0;
    setTimeout(() => {
        largeImg.src = images[index];
        largeImg.style.opacity = 1;
    }, 500);
};

// 点击缩略图更新大图
thumbnails.forEach((thumbnail, index) => {
    thumbnail.addEventListener('click', () => {
        currentIndex = index;
        updateLargeImage(currentIndex);
    });
});

// 切换到上一张图片
prevArrow.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    updateLargeImage(currentIndex);
});

// 切换到下一张图片
nextArrow.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    updateLargeImage(currentIndex);
});

// 初始化显示第一张图片
updateLargeImage(currentIndex);

功能实现说明

1. 显示缩略图

页面中展示了多个缩略图，用户可以点击任何一个缩略图来查看对应的大图。每个缩略图都是一个图片元素，大小为 80x60px。

2. 查看大图

当用户点击缩略图时，主区域的图片会更新为点击的缩略图对应的图片，并且大图显示在一个 500x350px 的区域内。

3. 左右切换图片

页面提供了左右箭头按钮，用户可以通过点击这些按钮来切换图片。每次切换时，页面会淡入新的图片，提供平滑的用户体验。

4. 动画效果

每次图片切换时，使用 opacity 属性来进行淡入效果，使得用户体验更加流畅和自然。同时，缩略图也具有 hover 效果，鼠标悬停时缩略图会稍微放大，增加互动性。

5. 代码结构

HTML 结构简洁，包含主图区域和缩略图区域。
CSS 使用了简单的布局和动画，确保界面美观且响应迅速。
JavaScript 通过操作 DOM 来更新图片和处理用户的点击事件，确保画廊的交互性和流畅性。

总结

通过本案例，你可以学习到如何使用 JavaScript 创建一个交互式的图片画廊。它包含了基本的 DOM 操作、事件监听和动画效果，可以进一步扩展为更复杂的图片浏览器，如添加图片描述、支持触摸滑动等功能。

这个案例比简单的任务管理应用更具挑战性，它引入了更复杂的用户交互和动画效果，非常适合有一定 JavaScript 基础的开发者练习。

你可能感兴趣的:(javascript)

  • JavaScript高程设计第一章---什么是JavaScript 小顾万家 javascript
    文章目录前言一、JavaScript实现二、ECMAScript1.ECMAScript概念2.ECMAScript版本3.ECMAScript符合性三、DOM1.DOM概念2.DOM级别三、BOM1.BOM概念前言通过自身对前端的学习和认知，发现仅仅通过看教学视频来学习前端是不够的，还需要通过阅读相关的前端书籍来扩大自己的知识面。今天我就来总结一下自己通过阅读《JavaScript高级程序设计》
  • android webview confilm,Android-WebView(四) 实现一个安全的webView 王诗沐 androidwebviewconfilm
    正如文章Androidwebview(三)addJavascriptInterface的安全问题中所展示的那样,Androidapi17(Android4.2)版本之前,通过WebView.addJavascriptInterface()方法添加的JavaBridge存在安全性风险,那么该怎么避免呢?js向java通信的渠道--prompt我们知道js中常用的方法:alert,console.lo
  • WebView 安全之 addJavascriptInterface
    WebView安全之addJavascriptInterface不会写代码的IT男关注2016.01.0318:14*字数474阅读5668评论0喜欢30x00addJavascriptInterface介绍WebView是Android平台下的一个重要组件，通常用来在Activity中嵌入一个简单的浏览器，实现在线网页浏览的功能。比如下面代码实现访问Google页面：WebViewwebView
  • 乾坤微前端框架详细使用大全 不知名靓仔 前端框架
    引言乾坤微前端框架（Qiankun）是一款轻量级的微前端解决方案，它基于JavaScript的Proxy特性和WebComponents技术，提供了一套简单易用的微前端实现方案。本文将详细介绍乾坤微前端框架的安装、配置、使用方法及常见问题解答，帮助开发者快速上手乾坤微前端框架。1.乾坤简介1.1什么是乾坤？乾坤是一个轻量级的微前端框架，旨在帮助开发者轻松实现微前端架构。它通过主应用（MainApp
  • 企业级图表方案AG Charts v12正式发布：全新功能提升图表交互体验与开发效率
    AGGrid成立于英国，致力于提供优秀的企业级数据表格及图表解决方案。AGGrid及AGCharts是其两大主要的高性能企业级JavaScript数据表格及图表解决方案，被全球开发者广泛采用。广泛应用于金融、电信、制造等行业，支持Angular、React、Vue和纯JavaScript项目，拥有企业级的性能与功能深度，凭借其卓越的性能、丰富的功能与高度可定制性，成为构建复杂数据驱动型应用的优选工
  • Javascript基础内容回顾—变量提升、事件循环和闭包等内容 GISer_Jinger javascript前端
    以下是前端面试中JavaScript基础易错问题的详解，结合常见考点和易混淆概念进行解析：⚠️一、变量作用域与提升varvslet/const◦变量提升：var声明的变量会提升到作用域顶部（值为undefined），而let/const存在暂时性死区（声明前访问报错）。◦循环陷阱：for(vari=0;iconsole.log(i));//输出3,3,3（共享同一作用域）}for(leti=0;i
  • 前端开发常见问题（从布局到性能优化） 白仑色 前端系列前端开发HTMLCSSJavaScript性能优化响应式布局跨域
    前端开发作为连接用户与产品的重要桥梁，涉及HTML、CSS和JavaScript的综合运用。但在实际开发过程中，开发者常常会遇到各种“坑”，比如页面布局异常、跨域请求失败、性能瓶颈、浏览器兼容性差等问题。本文将围绕前端开发中常见的十大问题展开讲解：页面布局相关问题（盒模型、浮动、Flex布局）CSS样式冲突与继承JavaScript异步处理（Promise、async/await）跨域问题及解决方
  • web与Java代码保护：混淆、压缩及反编译工具详解
    本文还有配套的精品资源，点击获取简介：为保障代码的安全性和保密性，IT行业中开发者采用代码混淆和压缩技术。本文将深入探讨web代码混淆压缩工具和Java代码反编译工具，解释它们的工作原理及应用。混淆工具如UglifyJS和Terser用于混淆JavaScript代码，使其难以理解；压缩工具如YUICompressor和GoogleClosureCompiler减小JavaScript和CSS文件的
  • nvm:NodeJs版本管理工具下载安装与使用教程 天天打码 大前端javascriptnode.jsvue.js
    nvm是什么nvm是一个node的版本管理工具，可以简单操作node版本的切换、安装、查看。。。等等，与npm不同的是，npm是依赖包的管理工具。nvm特点node：是一个基于ChromeV8引擎的JS运行环境。npm：是node.js默认的包管理系统（用JavaScript编写的），在安装的node的时候，npm也会跟着一起安装，管理node中的第三方插件。nvm：node版本管理器，也就是说：
  • 深入理解 JavaScript/TypeScript 中的展开运算符（...） ttod_qzstudio TypeScriptJavaScriptjavascripttypescript开发语言
    在JavaScript和TypeScript中，...运算符（称为展开运算符，英文SpreadOperator）是一个非常强大且常用的语法。它可以让代码更简洁、更灵活，适用于数组、对象、函数参数等多种场景。本文将详细介绍它的用法，并通过示例帮助你彻底掌握它。1.什么是展开运算符（...）？展开运算符...允许将一个可迭代对象（如数组、字符串、Set、Map等）“展开”成独立的元素。它的核心作用是解
  • Pyramda：Python 中的函数式编程利器 惠悦颖
    Pyramda：Python中的函数式编程利器pyramdaPythonpackagesupportingheavyfunctionalprogrammingthroughcurrying.TranslationoftheRamdalibraryfromjavascripttopython.项目地址:https://gitcode.com/gh_mirrors/py/pyramdaPyramda是
  • 更换SSL证书引发的异常：`sun.security.validator.ValidatorException: PKIX path building failed` `[Nginx跳转失败：501] 猿享天开 技术经验sslnginx网络协议
    博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C++,C#,Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C++、C#等开发语言，熟悉Java常用开发技术，能熟练应用常用数据库SQLserver,Oracle,mysql,postgresql等进行开发应用，熟悉DICOM医学影像及DICOM协议,业余时间自学JavaScript,Vue,
  • 七牛云前端面试题及参考答案 （上） 大模型大数据攻城狮 前端vue组件reactjs前端面经防抖节流fiber
    目录基本数据类型有哪些？typeofnull的结果是什么？null和undefined的区别是什么？let关键字的特点有哪些？this指向的规则是什么？箭头函数中this指向哪里？如何实现JavaScript的深拷贝和浅拷贝？数组去重的常见方法（手写代码）数组扁平化（手写，不能使用flat(Infinity)）forEach和map方法的区别是什么？闭包的应用场景：实现链式加法add(1)(2)(
  • Vue 3 - JavaScript细节大揭秘 碧海蓝天· vue.jsjavascript前端JavaScript
    在学习Vue3的过程中，我们可能会发现一些令人惊讶的JavaScript细节，这些细节可能之前我们并不知道。本文将探讨一些Vue3中的JavaScript细节，并提供相应的源代码示例。CompositionAPIVue3引入了CompositionAPI，它是一种新的API风格，可以让我们更灵活地组织我们的代码。在Vue2中，我们使用OptionsAPI来定义组件，而在Vue3中，我们可以选择使用
  • 如何创建唯一的 key 或者 ID L?z ^f my utilsjavascript前端
    javaScript中创建唯一的key/***生成一个永不重复的key*@param{Number}randomLength*/functiongetUuiKey(randomLength=5){returnNumber(Math.random().toString().substr(2,randomLength)+Date.now()).toString(36)}
  • 小程序导航设置更多内容的实现方法 racerun 小程序
    在小程序中实现导航栏设置更多内容，可以通过以下几种方式实现：1.使用原生导航栏自定义按钮javascript//app.json或页面.json中配置{"navigationBarTitleText":"首页","navigationBarTextStyle":"black","navigationBarBackgroundColor":"#ffffff","navigationStyle":"d
  • Node.js REPL 教程 红衣大叔 nodejs帮助文档node.jsvim编辑器
    Node.jsREPL(Read-Eval-PrintLoop)是一个交互式环境，允许你直接输入和执行JavaScript代码，无需创建文件。它是学习Node.js、测试代码片段和调试的强大工具。启动REPL有几种方式可以启动Node.jsREPL：直接运行node命令：node在特定文件目录下启动（如果需要访问当前目录的模块）：node使用环境变量（如设置特殊选项）：NODE_REPL_HIST
  • JavaScript Math（算数）详解 lsx202406 开发语言
    JavaScriptMath（算数）详解引言JavaScriptMath对象是JavaScript内置的一个对象，用于执行基本的数学运算。它提供了一系列的静态方法，使得进行数学运算变得非常简单。本文将详细介绍JavaScriptMath对象的各个方法及其应用。Math对象概述Math对象是一个静态对象，意味着它不能被实例化。它包含了一些数学常量和方法，可以用来执行各种数学运算。Math对象的常量M
  • JavaScript的运行机制
    JavaScript的运行机制基于单线程事件循环（EventLoop），这使得它能在非阻塞的情况下处理异步操作。以下是其核心概念的详细解释：1.单线程特性JavaScript是单线程的，意味着它一次只能执行一个任务。这是因为浏览器中的JavaScript主要用于操作DOM，如果允许多线程同时修改页面，会导致冲突和竞态条件。2.执行栈（CallStack）所有同步代码都在执行栈中执行。当调用一个函数
  • 前端开发问题：SyntaxError: “undefined“ is not valid JSON 我命由我12345 前端-问题清单json前端javascriptvue.js开发语言ecmascriptjs
    在JavaScript开发，遇到如下问题SyntaxError:"undefined"isnotvalidJSON#翻译SyntaxError："undefined"不是有效的JSON问题原因当使用JSON.parse()时，传入了一个undefined或字符串"undefined"，而它不是有效的JSON字符串问题复现传入一个undefinedconstjsonStr=undefined;con
  • Vue.js前端开发实战-----常用UI组件
    1.进入命令行界面，执行yarncreatevite命令，输入项目名称，选择Vue框架，选择JavaScript，完成vue项目创建。2.在完成创建之后在其目录下通过yarn安装ElementPius，具体命令如下：[email protected].在VSCode中创建一个新的vue文件，文件名称命名分别为MyInfo.vue，RoommateDetail.vue
  • JavaScript基础语法之运算符和控制流 AA-代码批发V哥 JavaScriptjavascript
    JavaScript基础语法之运算符和控制流一、运算符1.1算术运算符：数值计算的基石1.1.1字符串拼接陷阱1.2比较运算符：条件判断的起点1.2.1严格比较（`===`）vs松散比较（`==`）1.2.2其他比较运算符1.3逻辑运算符：复杂条件的组合1.3.1短路逻辑（重要特性）1.3.2实战：表单验证1.4赋值运算符：数据存储的桥梁1.4.1基础赋值（`=`）1.4.2解构赋值（ES6新增）
  • JavaScript基础语法之变量声明和数据类型 AA-代码批发V哥 JavaScriptjavascript
    JavaScript基础语法之变量声明和数据类型一、变量声明1.1变量声明的本质1.2三种声明方式对比（var/let/const）1.2.1var：函数作用域的“老派选手”1.2.2let：块级作用域的“新生代”1.2.3const：常量声明的“守护者”二、数据类型2.1原始数据类型（PrimitiveTypes）2.1.1字符串（String）2.1.2数值（Number）2.1.3布尔（Bo
  • 基于esbuild封装类似tsup工具 aiguangyuan 前端架构前端开发系统架构
    在现代前端开发中，构建工具的选择直接影响着项目的开发效率和最终产物的性能。随着TypeScript的普及，开发者对高效、快速的TypeScript构建工具的需求日益增长。esbuild作为一款新兴的JavaScript打包器，以其惊人的构建速度引起了广泛关注，而tsup则是基于esbuild的一个优秀封装，专门为TypeScript库开发提供了零配置的便捷体验。本文将探讨如何基于esbuild核心
  • 前端开发核心：HTML、CSS与JavaScript学习指南 Randy Rhoads
    本文还有配套的精品资源，点击获取简介：HTML、CSS和JavaScript是前端开发的基础，分别负责网页的结构、样式和动态行为。学习这三种技术需要理解它们之间的关系及其协同工作的机制。本笔记提供了一个全面的复习资料，包括标签使用、CSS布局技巧、JavaScript基础语法和DOM操作，旨在帮助巩固知识点和发现潜在的学习盲点。同时，介绍了响应式设计、Web组件、ServiceWorker等现代前
  • 常见构建工具使用与原理浅析
    1.初版构建工具1.1.GruntGrunt是前端第一个正式的构建工具，它基于Node.js开发。Grunt同样是基于插件实现功能拓展增强，但对于像Webpack上很多能力，如HMR、ScopeHoisting等都是不支持的，可以作为学习Webpack前的了解。Grunt更像是一种自动化的配置工具集，就如官方所说，Grunt是TheJavaScriptTaskRunner，每个Grunt任务通常必
  • 使用Node.js命令行进行编程 翠绿探寻 node.jsvim编辑器编程
    Node.js是一个基于ChromeV8JavaScript引擎构建的运行时环境，它可以让开发者使用JavaScript语言编写服务器端代码。Node.js命令行界面（CLI）是一个强大的工具，它提供了与Node.js交互和执行JavaScript代码的能力。在本文中，我们将介绍如何在Node.js命令行中使用JavaScript进行编程，并提供相应的源代码示例。1.安装Node.js首先，我们需
  • 反向遍历--当你修改一个元素的outerHTML时，该元素会被从 DOM 中移除 专注VB编程开发20年 htmljavascript
    varspans=editor.querySelectorAll('span[mytag]');//将NodeList转换为数组//varspansArray=Array.from(spans);varid=0spans.forEach(span=>{span.outerhtml这里无法直接修改吗?}在JavaScript中，outerHTML是一个可写属性，但你需要注意以下几点：1.属性名大小写
  • ASP.NET Web Pages - 教程 samFuB asp.net前端后端
    ASP.NET是一个使用HTML、CSS、JavaScript和服务器脚本创建网页和网站的开发框架。ASP.NET支持三种不同的开发模式：WebPages（Web页面）、MVC（ModelViewController模型-视图-控制器）、WebForms（Web窗体）：本教程介绍WebPages。WebPagesMVCWebForms从何入手？多数开发人员学习一个新技术，是从查看运行实例开始的。通
  • ASP.NET Web Pages 教程：从入门到精通 KrDebugging asp.net前端后端编程学习
    ASP.NETWebPages是一种用于构建动态网页的技术，它结合了传统的HTML、CSS和JavaScript，以及强大的服务器端编程语言C#。本教程将带您逐步学习ASP.NETWebPages的基础知识，并通过示例代码演示如何创建交互性强、功能丰富的网页应用程序。环境设置在开始学习ASP.NETWebPages之前，您需要进行以下环境设置：安装VisualStudio：您可以从Microsof
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他