筱白迩
筱白迩

js照片墙拖拽特效

  1 DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>筱白迩title>
  5     <style type="text/css">
  6         *{
  7             margin: 0;
  8             padding: 0;
  9         }
 10         div{
 11             width: 666px;
 12             height: 666px;
 13             border: 1px solid yellow;
 14             margin: 0px auto;
 15             box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.7);
 16             position: relative;
 17         }
 18         li{
 19             width: 200px;
 20             height: 200px;
 21             list-style: none;
 22             float: left;
 23             margin: 10px;
 24             border: 1px solid transparent;
 25         }
 26         li img{
 27             width: 200px;
 28             height: 200px;
 29             box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.7);
 30         }
 31     style>
 32 head>
 33 <body>
 34     <div>
 35         <ul>
 36             <li><img src="1.jpg">li>
 37             <li><img src="2.jpg">li>
 38             <li><img src="3.jpg">li>
 39             <li><img src="4.jpg">li>
 40             <li><img src="5.jpg">li>
 41             <li><img src="6.png">li>
 42             <li><img src="7.jpg">li>
 43             <li><img src="8.jpg">li>
 44             <li><img src="9.jpg">li>
 45         ul>
 46     div>
 47 body>
 48 <script src="move.js">script>
 49 <script type="text/javascript">
 50     var aLi = document.getElementsByTagName('li');
 51 
 52     var arr = [];
 53     var len = aLi.length;
 54     for(var i=0; i<len; i++){
 55         arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
 56     }
 57     for(var i=0; i<len; i++){
 58         aLi[i].style.position = "absolute";
 59         aLi[i].style.left = arr[i][0] + "px";
 60         aLi[i].style.top = arr[i][1] + "px";
 61         aLi[i].style.margin = 0;
 62     }
 63     for(var i =0; i<len; i++){
 64         aLi[i].index = i;
 65         drag(aLi[i]);
 66     }
 67     var z  =1;
 68     function drag(obj){
 69         obj.onmousedown = function(e){
 70             // var e || window.event;
 71             var x1 = e.clientX,
 72                 y1 = e.clientY;
 73                 
 74 
 75             var l  = obj.offsetLeft,
 76                 t  = obj.offsetTop;
 77                 obj.style.zIndex = z++;
 78             document.onmousemove = function(e){
 79                 var e = e || window.event;
 80                 var _left = e.clientX - x1 +l;
 81                 var _top = e.clientY - y1 +t;
 82 
 83                 obj.style.left = _left + "px";
 84                 obj.style.top = _top + "px";
 85 
 86                 var oLi = nearLi(obj);
 87                 for(var k=0; k<len;k++){
 88                     aLi[k].style.border = "1px solid transparent";
 89                 }
 90                 if(oLi){
 91                     oLi.style.border = "4px solid yellow";
 92                 }
 93 
 94             }
 95             document.onmouseup = function(){
 96                 document.onmousemove = null;
 97                 document.onmouseup = null;
 98                 var nL = nearLi(obj);
 99                 var tmp = 0;
100                 if(nL){
101                     nL.style.border = "1px solid transparent";
102                     startMove(nL,{left:arr[obj.index][0],top:arr[obj.index][1]});
103                     startMove(obj,{left:arr[nL.index][0],top:arr[nL.index][1]});
104                     tmp = obj.index;
105                     obj.index = nL.index;
106                     nL.index = tmp;
107                 }else{
108                     startMove(obj,{left:arr[obj.index][0],top:arr[obj.index][1]});
109                 }
110             }
111             return false;
112         }
113     }
114     function impact(obj1,obj2){
115         var T1 = obj1.offsetTop,
116             L1 = obj1.offsetLeft,
117             B1 = T1 + obj1.offsetHeight,
118             R1 = L1 + obj1.offsetWidth;
119         var T2 = obj2.offsetTop,
120             L2 = obj2.offsetLeft,
121             B2 = T2 + obj2.offsetHeight,
122             R2 = L2 + obj2.offsetWidth;
123         if(R1<L2 || B1<T2 || T1>B2 || L1>R2){
124             return false
125         }else{
126             return true;
127         }
128     }
129     function distance(obj1,obj2){
130         var a = obj1.offsetLeft - obj2.offsetLeft;
131         var b = obj1.offsetTop - obj2.offsetTop;
132         return Math.sqrt(a*a+b*b);
133     }
134     function nearLi(obj){
135         var n = 100000;
136         var oLi = "";
137         for(var j=0; j<len; j++){
138                     if(impact(obj,aLi[j]) && obj != aLi[j]){
139                         var c = distance(obj,aLi[j]);
140                         if(c<n){
141                             n = c;
142                             oLi = aLi[j];
143                         }
144                     }
145                     
146                 }
147                 return oLi;
148     }
149 script>
150 html>

素材要求： 图片文件为9张正方形图片，否则容易让图片变形，图片格式任意。还需要导入move.js框架。

新手练习，多多包涵。

你可能感兴趣的:(js照片墙拖拽特效)

  • 华为OD机试E卷 - 最佳对手 / 实力差距最小总和（Java & Python& JS & C++ & C ） 算法大师 javapythonjavascriptc++
    题目描述游戏里面，队伍通过匹配实力相近的对手进行对战。但是如果匹配的队伍实力相差太大，对于双方游戏体验都不会太好。给定n个队伍的实力值，对其进行两两实力匹配，两支队伍实例差距在允许的最大差距d内，则可以匹配。要求在匹配队伍最多的情况下匹配出的各组实力差距的总和最小。输入描述第一行，n，d。队伍个数n。允许的最大实力差距d。2<=n<=500<=d<=100第二行，n个队伍的实力值空格分割。0<=各
  • MySQL 8.0新特性深度解析：窗口函数与JSON数据处理的10大技巧 墨瑾轩 一起学学数据库【一】mysqljson
    关注墨瑾轩，带你探索编程的奥秘！超萌技术攻略，轻松晋级编程高手技术宝库已备好，就等你来挖掘订阅墨瑾轩，智趣学习不孤单即刻启航，编程之旅更有趣第1章：MySQL8.0简介嗨，亲爱的小伙伴们！欢迎来到MySQL8.0的奇妙世界，这里充满了新鲜和惊喜。MySQL8.0是一个数据库界的超级英雄，它带着一系列令人兴奋的新特性，比如窗口函数和JSON数据处理，来拯救我们的数据处理任务。1.1MySQL8.0的
  • Vue相关面试题 努力的搬砖人. vue.js
    以下是150道Vue相关面试题及详细答案：Vue基础1.Vue.js是什么？Vue.js是一个用于构建用户界面的渐进式JavaScript框架，专注于视图层，允许开发者以声明式的方式构建用户界面，具有轻量、高效、易上手等特点。2.Vue实例的作用是什么？Vue实例是应用程序的核心，它管理数据、方法、生命周期钩子等，通过数据双向绑定将数据与视图层连接起来，实现数据驱动视图。3.如何创建一个Vue实例
  • 【概念】Node.js，Express.js MongoDB Mongoose Express-Validator Async Handler 一袋米扛几楼98 各类概念node.jsexpressjavascript
    1.Node.js定义：Node.js是一个基于ChromeV8引擎的JavaScript运行时环境，允许你在服务器端运行JavaScript代码。作用：它使得开发者可以使用JavaScript编写服务器端代码，从而实现前后端使用同一种语言。比喻：Node.js就像是“工厂的电力系统”，它为整个工厂（应用程序）提供动力（运行环境）。没有电力系统，工厂的机器（代码）就无法运转。特点：非阻塞I/O：N
  • 理解 Node.js 中的 process`对象与常用操作 red润 前端node.js前端javascript
    理解Node.js中的process对象与常用操作在Node.js中，process是一个全局对象，提供了与当前Node.js进程相关的信息和操作。无论是获取进程信息、处理信号、访问环境变量，还是控制进程行为，process都是不可或缺的工具。看到process不犯怵了1.获取进程信息process提供了许多属性和方法来获取当前进程的信息。process.pid：获取当前进程的PID（进程ID）。
  • npm详解：掌握 Node.js 包管理的艺术 Lv_Jin_Gang npm
    在现代软件开发领域，包管理和依赖处理是任何项目不可或缺的一部分。对于基于Node.js的应用程序而言，NPM（NodePackageManager）不仅是安装和管理第三方库的标准工具，也是发布、共享和重用代码片段的核心平台。本文将深入探讨NPM的各个方面，从基础概念到高级用法，旨在为你提供一个全面而深入的理解。一、NPM简介与安装1.1NPM的诞生与重要性NPM伴随着Node.js的诞生而出现，它
  • 如何用Function Calling解锁OpenAI的「真实世界」交互能力？（附Node.js 实战） hongkid AI编程
    一、FunctionCalling：大模型的「手脚延伸器」1.1核心定义FunctionCalling是OpenAI在2023年6月13日推出的革命性功能（对应模型版本gpt-3.5-turbo-0613和gpt-4-0613），允许开发者通过自然语言指令触发预定义函数，实现大模型与现实世界系统的交互。如同给语言模型安装「手脚」，使其不仅能思考，还能执行具体操作。openai官方说明：https:
  • Node.js系列（2）--性能优化指南 一进制ᅟᅠ        ‌‍‎‏  Node.jsnode.js性能优化
    Node.js性能优化指南⚡引言Node.js应用的性能优化是确保应用高效运行的关键。本文将深入探讨Node.js性能优化的各个方面，包括内存管理、CPU优化、I/O优化等，帮助开发者构建高性能的Node.js应用。性能优化概述Node.js性能优化主要包括以下方面：内存优化：内存泄漏检测、垃圾回收优化CPU优化：代码执行效率、异步处理、工作线程I/O优化：文件操作、网络请求、数据库访问缓存优化：
  • Node.js 包与 npm 详解：使用 npm 的重要注意事项与最佳实践 还是鼠鼠 node.jsnode.jsjavascriptvscode前端
    目录Node.js包与npm：使用npm的其它注意点详解1.package.json与package-lock.json的作用什么是package.json？什么是package-lock.json？示例：package-lock.json片段2.语义化版本（SemVer）与依赖版本管理3.全局安装vs.本地安装本地安装（默认）全局安装4.npm缓存管理与优化清理npm缓存5.依赖冲突与node_
  • springboot使用kafka自定义JSON序列化器和反序列化器 zhou_zhao_xu Kafkaspring
    1.序列化器packagecom.springboot.kafkademo.serialization;importcom.alibaba.fastjson.JSON;importcom.alibaba.fastjson.JSONObject;importorg.apache.kafka.common.serialization.Serializer;importjava.util.Map;/**
  • python函数闭包和递归_闭包和递归_个人文章 - SegmentFault 思否 weixin_39830313 python函数闭包和递归
    js变量的作用域:全局作用域(全局变量):在函数外面声明的变量**生命周期(变量从声明到销毁)：页面从打开到关闭.局部作用域(局部变量):在函数里面声明的变量**生命周：开始调用函数到函数执行完毕1.闭包使用介绍1.闭包介绍(closure)1.1闭包：是一个可以在函数外部访问函数内部变量的函数->闭包是函数1.2闭包作用：可以在函数外部访问函数内部变量->延长局部变量的生命周期1.3闭包语法：-
  • vite项目中vite.config.js使用.env.development文件中的配置数据 初遇你时动了情 vitereactvue3javascriptecmascriptvite
    如下图.env和vite.config.js配置同级目录loadEnv就可以获取.env配置信息import{defineConfig,loadEnv}from"vite";importreactfrom"@vitejs/plugin-react-swc";import{resolve}from"path";importvitePluginImpfrom"vite-plugin-imp";impo
  • WebGL开发：BabylonJS从入门到精通（下卷） 莲华君 前端权威教程合集WebGL系统化学习webgl
    全书卷目：WebGL开发：BabylonJS从入门到精通（上卷）WebGL开发：BabylonJS从入门到精通（下卷）目录第一部分：基础篇——构建3D世界的基石第一章：BabylonJS概述与环境搭建什么是BabylonJS：WebGL宇宙的创世引擎BabylonJS的历史与优势：开源利剑的进化史安装与配置开发环境：3D工匠的工坊搭建术使用BabylonJSPlayground与本地开发环境浏览器
  • LLM的工具调用能力（如Function Calling） maxmaxma 前端javascript开发语言
    LLM的工具调用能力（如FunctionCalling）是增强大模型实用性的核心技术，使其能够通过生成结构化指令与外部系统交互。以下是关键要点及技术解析：一、工具调用的定义与原理核心机制LLM通过生成符合工具接口的指令（如JSON参数），触发外部工具执行。例如，用户提问天气时，模型生成{"location":"北京","date":"2025-03-22"}，系统调用天气API获取数据。分工明确：
  • 华为OD机试 - 相对开音节 - 正则表达式（Python/JS/C/C++ 2024 E卷 100分） 哪 吒 华为od正则表达式python
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述相对开音节构成的结构为辅音+元音（aeiou）+辅音(r除外)+
  • 华为OD机试 - 数列描述 - 动态规划（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为od动态规划python
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述有一个数列a[N](N=60)，从a[0]开始，每一项都是一个数
  • 华为OD机试 - 输出单向链表中倒数第k个结点 - 双指针（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为od链表python
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述输入一个单向链表，输出该链表中倒数第k个结点，链表的倒数第1个结
  • 华为OD机试 - 图片整理（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述Lily上课时使用字母数字图片教小朋友们学习英语单词，每次都需要
  • 华为OD机试 - 宜居星球改造计划 - 图的多源BFS（Python/JS/C/C++ 2023 B卷 100分） 哪 吒 华为od宽度优先python
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述2XXX年，人类通过对火星的大气进行宜居改造分析，使得火星已在理
  • 华为OD机试 - 红黑图（Python/JS/C/C++ 2023 B卷100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述众所周知红黑树是一种平衡树，它最突出的特性就是不能有两个相邻的红
  • 华为OD机试 - DNA序列（Python/JS/C/C++ 2023 B卷 100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述一个DNA序列由A/C/G/T四个字母的排列组合组成。G和C的比
  • 华为OD机试 - 书籍叠放 - 逻辑分析（Python/JS/C/C++ 2024 B卷 200分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述书籍的长、宽都是整数对应(l,w)。如果书A的长宽度都比B长宽大
  • 华为OD机试 - 购买水果最便宜的方案 - 数组（Python/JS/C/C++ 2024 C卷 100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述有m个水果超市在1-n个小时的不同时间段提供不同价格的打折水果，
  • 华为OD机试 - 目录删除 - 深度优先搜索dfs算法（Python/JS/C/C++ 2024 B卷 200分） 哪 吒 算法华为od深度优先
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述某文件系统中有N个目录，每个目录都有一个独一无二的ID。每个目录
  • 华为OD机试 - 寻找最富裕的小家庭（Python/JS/C/C++ 2024 D卷 100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述在一棵树中，每个节点代表一个家庭成员，节点的数字表示其个人的财富
  • python将网银web工程转换成客户端electron工程案例 银行金融科技 人工智能机器学习DeepSeekelectron
    以下是一个将网银Web工程转换为Electron客户端的技术方案，结合Python和Electron实现桌面端增强功能：bash#项目结构webank-electron/├──main/#Electron主进程代码│├──main.js│└──python_server.py├──renderer/#网页渲染进程│└──webank-web/#原始网银Web工程├──package.json└──
  • 【元婴境】mysql的MVCC（详解） jstart千语 mysql数据库
    目录MVCC介绍隐藏字段undologReadView示例：流程总结MVCC介绍大家好，我是jstart千语。上篇我们讲到mysql的事务隔离级别，其中MVCC就是控制事务隔离级别的重要组成部分，也是实现事务四大特性之一隔离性的重要手段。那么接下来我将通透地讲解MVCC，让大家对mysql的隔离性有一个更深刻的理解。MVCC全称Multi-VersionConcurrencyControl，也就是
  • CSS特效花样鼠标悬停效果 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    CSS特效花样鼠标悬停效果鼠标悬停效果概述基本概念与作用示例一：基本的颜色变化代码解释示例二：渐变背景色代码解释示例三：放大与阴影效果代码解释示例四：文字提示代码解释示例五：旋转和翻转代码解释实际工作中的使用技巧在现代Web开发中，良好的用户体验往往意味着不仅仅要有一个功能完备的应用程序，还需要具备吸引人的视觉效果。鼠标悬停效果便是提升网站交互性和吸引力的一种常见方式。本文将探讨如何运用CSS来实
  • FastAPI Web框架 [1.9] carefree798 FastAPIpython
    表单数据fromfastapiimportFastAPI,Form#导入Form#表单数据#接收的不是JSON，而是表单字段时，要使用Formapp=FastAPI()@app.post("/login/")asyncdeflogin(username:str=Form(...),password:str=Form(...)#定义Form参数):return{"username":username
  • 发现一个好用的Vue.js内置组件 兴趣广泛的程序猿 笔记uniappvue.jsvue.js前端javascript
    目录一、这个好用的内置组件是什么？二、这个组件的主要功能三、怎么使用？四、使用注意事项五、我的使用场景一、这个好用的内置组件是什么？今天在优化我的平台应用时，发现一个好用的组件标签--。是Vue.js中的一个内置组件，它的主要作用是缓存动态组件实例，避免它们在切换时被销毁和重新创建。这对于需要保留组件状态（例如表单输入、滚动位置等）的应用场景特别有用。通过使用，可以显著提升用户体验，因为不需要每次
  • jQuery 键盘事件keydown ,keypress ,keyup介绍 107x jsjquerykeydownkeypresskeyup
    本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      
  • AngularJS中的Promise bijian1013 JavaScriptAngularJSPromise
    一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
  • c++ 用数组实现栈类 CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
  • java和c语言的雷同 麦田的设计者 java递归scaner
    软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi
  • LINUX环境并发服务器的三种实现模型 被触发 linux
    服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
  • Oracle数据库查询指令 肆无忌惮_ oracle数据库
    20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp  
  • ext右下角浮动窗口 知了ing JavaScriptext
    第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
  • 浅谈REDIS数据库的键值设计 矮蛋蛋 redis
    http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
  • maven编译可执行jar包 alleni123 maven
    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
  • 人力资源在现代企业中的作用 百合不是茶 HR 企业管理
    //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
  • Linux自启动设置详解 bijian1013 linux
    linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
  • Spring Aop Schema实现 bijian1013 javaspringAOP
    本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
  • 【Gson七】Gson预定义类型适配器 bit1129 gson
    Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
  • 【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
    在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义
  • linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
    一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位
  • java-两种方法求第一个最长的可重复子串 bylijinnan java算法
    import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
  • Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan javanetty
    Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo
  • servelt filter listener 的生命周期 cngolon filterlistenerservelt生命周期
    1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
  • jmpopups获取input元素值 ctrain JavaScript
    jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(
  • vi查找替换命令详解 daizj linux正则表达式替换查找vim
    一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En
  • 对网站中的js,css文件进行打包 dcj3sjt126com PHP打包
    一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
  • php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
    在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
  • linux 文件格式（1） sed工具 eksliang linuxlinux sed工具sed工具linux sed详解
    转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
  • Android应用程序获取系统权限 gqdy365 android
    引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点
  • HoverTree开发日志之验证码 hvt .netC#asp.nethovertreewebform
    HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
  • JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
    译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，
  • 数据结构随记_2 lx.asymmetric 数据结构笔记
    第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n
  • Linux下的监控工具dstat 网络接口 linux
    1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
  • C 语言初级入门--二维数组和指针 1140566087 二维数组c/c++指针
    /* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：
  • 10点睛Spring4.1-Application Event wiselyman application
    10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他