筱白迩
筱白迩

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照片墙拖拽特效)

  • pjsip pjsua_media_config 结构体说明 小gpt& Pjsip音视频qtc++
    clock_rate描述：设置会议桥（conferencebridge）的时钟频率（采样率）。默认值：0（使用默认值PJSUA_DEFAULT_CLOCK_RATE，通常为16kHz）。作用：影响音频的采样率，常见值有8000（8kHz）、16000（16kHz）、48000（48kHz）等。snd_clock_rate描述：设置音频设备的时钟频率（采样率）。默认值：0（使用会议桥的时钟频率）。作
  • 【JS性能优化黑魔法】从8秒到0.8秒的奇迹の逆袭（祖传代码大改造）—— 让老板跪下喊爸爸的极致优化指南 vvvae1234 github
    ️第一章：渲染の禁忌仪式（重绘与回流）场景：购物车动画卡成PPT//菜鸟写法（每秒60次全局地震）setInterval(()=>{cartItems.forEach(item=>{item.style.top=`${Math.sin(Date.now())*10}px`;//持续触发回流});},16);//老司机优化（GPU加速の奥义）functionsmoothAnimation(){req
  • Python 实现的采集诸葛灵签 老大白菜 pythonpython开发语言
    Python实现的采集诸葛灵签项目介绍这是一个基于Python开发的诸葛灵签数据采集和展示项目。通过爬虫技术获取诸葛神签的签文和解签内容，并提供数据存储和查询功能。项目结构zhuge/├──zhuge_scraper.py#爬虫主程序├──zhuge_pages/#数据存储目录│├──all_signs.json#汇总数据│└──zhuge_sign_*.json#单个签文数据└──zhuge.m
  • pjsip dtmf发送和接收（pjsua） 小gpt& Pjsip音视频qtc++
    DTMF（双音多频，Dual-ToneMulti-Frequency）是一种用于电话系统的信号技术，通过组合两个不同频率的音频信号来表示数字和符号。以下是DTMF的主要使用背景和应用场景：电话拨号DTMF最常见的用途是电话拨号。当用户按下电话键盘上的数字或符号时，电话会生成两个特定频率的音调，交换机接收并解码这些信号以确定用户拨打的号码。交互式语音应答（IVR）系统DTMF广泛用于IVR系统，用户
  • vscode语言支持插件开发 amux9527 笔记vscodetypescript编辑器
    安装脚手架npminstall-gyogenerator-code生成插件模板yocode配置语言支持我这里就自定义一种以.da结尾的语言，修改根目录下的package.json文件的contributes处的属性{"contributes":{"languages":[{"id":"da","aliases":["DA"],"extensions":[".da"],"icon":{"dark":
  • nvm的使用汇总 柒柒钏 小知识点安装教程NVM
    nvm的使用汇总在Linux中安装nvm使用nvm安装Node.js一些特殊用法总结在Linux中安装nvm运行以下命令,用来下载并执行nvm的安装脚本：curl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh|bash注意：v0.40.0是截至2023年的最新稳定版本。如果需要其他版本，请替换为对应的版本号。安装
  • vscode中调试Python和C++的混合代码 destiny44123 vscodepythonc++
    文章目录使用流程参考一些差异使用流程参考ExampledebuggingmixedPythonC++inVSCode一些差异这里假设的项目是通过python调用c++的相应共享库(so)文件。首先，新建文件夹.vscode，在其中添加文件配置launch.json.示例如下：{"version":"0.2.0","configurations":[{"name":"(gdb)附加","type":
  • vuex持久化处理 孟孟_mengmeng 前端vue.js前端javascript
    在使用vuex时有一个弊端就是，就是一旦页面刷新，所有之前存储的状态就全部没了，这是因为js代码运行在内存中，代码运行时所有的变量和函数都是保存在内存中的，刷新的时候以前申请的内存将会被释放，并且js脚本会被重新加载，变量重新赋值。所以在我们使用vuex的时候只要一刷新数据就没了。如果我们想要持久化保存数据可以使用localStorage或者sessionStorage存储在本地，保证刷新后数据不
  • Java之微信 APIv3 商家转账到零钱SDK版 相思比梦长 JAVAjava商家转账到零钱微信转账平台证书APIv3
    1、测试类TransferTest：importcom.alibaba.fastjson.JSON;importcom.wechat.pay.java.core.RSAConfig;importcom.wechat.pay.java.core.exception.HttpException;importcom.wechat.pay.java.core.exception.MalformedMess
  • 监听F11浏览器全屏状态 小旋风01234 jsjavascript前端vue.js
    说明全屏和非全屏经常因为，是F11或者控制台按钮按的判断不了，所以综合了下，下面的方法有效，下面是应对所有浏览器的兼容版本页面上代码是vue2的，vue3或者js需要自己改下，都是js核心是一个东西核心代码：data(){return{//全屏状态true全屏false非全屏isFullScreen:false,}},mounted(){//开局判断this.checkFullscreen()//
  • Python激活码 qq_36357944 Python
    EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ
  • Vue2+OpenLayers实现点位拖拽功能（提供Gitee源码） 黄团团 VueOpenLayersgitee前端htmljavascript开发语言
    目录一、案例截图二、安装OpenLayers库三、代码实现3.1、初始化变量3.2、创建一个点3.3、将点添加到地图上3.4、实现点位拖拽3.5、完整代码四、Gitee源码一、案例截图可以随意拖拽点位到你想要的位置二、安装OpenLayers库npminstallol三、代码实现3.1、初始化变量关键代码：data(){return{map:null,vectorLayer:null,}},3.2
  • 2024 年java 和Python 开发工具系列激活码（ 持续更新） hhhaadei javaide
    7EX1SHUD24-eyJsaWNlbnNlSWQiOiI3RVgxU0hVRDI0IiwibGljZW5zZWVOYW1lIjoibWFvIHplZG9uZyIsImxpY2Vuc2VlVHlwZSI6IlBFUlNPTkFMIiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IiIsI
  • Vue.js 3 的设计思路：从声明式UI到高效渲染机制 前端 贾公子 vue.jsuiflutter
    目录一、声明式UI与虚拟DOM的灵活性二、渲染器：虚拟DOM到真实DOM的桥梁三、组件的本质与实现四、编译与运行时的协同优化五、性能与可维护性的权衡总结Vue.js3作为新一代前端框架，其设计理念在声明式UI描述、虚拟DOM优化、组件化架构以及编译与运行时协作等方面实现了显著突破。本文将从多个角度深入探讨其设计思路。一、声明式UI与虚拟DOM的灵活性Vue.js3的核心特性之一是声明式UI描述，开
  • 深入解析：构建高效单页应用（SPA）的最佳实践与示例 布兰妮甜 #Vue单页应用SPAVue.js前端
    文章目录前言一、单页应用（SPA）的介绍二、单页应用（SPA）的优势三、构建单页应用（SPA）的基本步骤四、使用Vue.js构建一个简易的单页应用（SPA）：任务管理器结语前言随着互联网技术的发展，用户对于网页应用的交互性和响应速度提出了更高的要求。传统的多页面应用（MPA）在每次用户交互时需要重新加载整个页面，这不仅增加了服务器的负担，也降低了用户体验。而单页应用（SinglePageAppli
  • js 时间显示 时间戳转换为时分秒 J总裁的小芒果 javascript开发语言ecmascript
    javaimportjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;DateTimeFormatterformatter=DateTimeFormatter.ofPattern("yyyy-MM-ddHH:mm:ss");Do.getCreateTime().format(formatter);//获取为格式的值//
  • python vuejs聊天室_ws模块指南+Vue在线聊天室 无1234 pythonvuejs聊天室
    简介ws模块是Node端的一个WebSocket协议的实现,该协议允许客户端(一般是浏览器)持久化和服务端的连接.这种可以持续连接的特性使得WebScoket特别适合用于适合用于游戏或者聊天室等使用场景.ws模块相较于其他基于WebSocket协议的模块来说非常的纯粹.他只关注基于WebSocket协议的实现,其他例如Socket.io提供了回退手段,当WebSocket无法使用的时候会利用轮询来
  • Web 开发的“三件套” zhangpeng455547940 Web开发reactnativereact.jsjavascript
    HTML：定义内容结构。CSS：控制样式布局。JavaScript：实现动态行为和复杂逻辑。JavaScript应用场景前端开发：操作DOM、处理用户事件、实现动画等。后端开发：通过Node.js构建服务器端应用。跨平台开发：Electron（桌面应用）、ReactNative（移动端）等。
  • Spring MVC 面试题 A逍遥人世欢 面试springmvcjava
    概述什么是SpringMVC？简单介绍下你对SpringMVC的理解？SpringMVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架，通过把模型-视图-控制器分离，将web层进行职责解耦，把复杂的web应用分成逻辑清晰的几部分，简化开发，减少出错，方便组内开发人员之间的配合。SpringMVC的优点可以支持各种视图技术,而不仅仅局限于JSP；与Spring框架集成（如I
  • Spring MVC面试题（一） 码农 小王 springmvcjava
    1.什么是SpringMVC？全称为ModelViewController，SpringMVC是Spring的一个模块，基于MVC架构模式的一个框架2.SpringMVC优点？1.可用各种视图技术，不仅限于JSP2.支持各种请求资源映射策略3.SpringMVC工作原理？1.客户端发送请求到DispatcherServlet2.DispatcherServlet查询handlerMapping找到
  • Vue3-导出导入excel Now喔 Vueexcel
    功能主要实现excel导入导出功能，同时具有合并单元格，美化单元格等功能，引用依赖包exceljs、file-saver，好像也没有什么要介绍的，可以看看官网文档然后直接使用了导入依赖包pnpminstallexceljsfile-saver@types/file-saver封装Excel帮助类（excelHelper.js）importExcelJSfrom'exceljs'importFile
  • ueditor图片上传跨域问题 hello_simon javascriptphpueditor图片上传跨域
    ueditor置于A域，图片置于B域，B域需放flash跨域策略文件crossdomain.xml，如下修改ueditor配置文件ueditor.config.js//图片上传配置区,imageUrl:"http://abupload.xxx.com/imageUp.php"//图片上传提交地址,imagePath:"http://abupload.xxx.com/"
  • React篇之three渲染 这个一个非常哈 react.js前端前端框架
    需求：拖拽右侧面板，里面的three模型能够自适应import{useEffect,useState,useRef}from'react'import'./App.css'import*asTHREEfrom'three';import{GLTFLoader}from'three/addons/loaders/GLTFLoader.js';import{debounce}from'lodash';
  • 对vue VS react的理解 向贤 前端开发vue.jsreact.js前端
    对vueVSreact的理解Vue与React的核心区别在于设计哲学：Vue追求渐进式开发和开箱即用，通过模板语法、响应式系统和官方生态提供低门槛的集成方案。React强调函数式编程和纯JavaScript驱动，以JSX、单向数据流和灵活的生态构建高自由度的视图层。核心差异可总结为：响应式机制、模板vsJSX、API设计、生态策略、性能优化模式。分点论述：1.响应式机制Vue：基于数据劫持（Vue
  • Electron + VUE3 桌面应用，主进程和渲染进程通信 读心悦 深入浅出的Electronelectronvue.js前端
    之前写过篇主进程和渲染进程之间的通信，这里主要是记录一下VUE版本的应用，主进程和渲染进程之间的通信。思路是一样，唯一不同的是代码。在开发Electron应用的时候，从安全的角度来考虑，尽量不要在渲染进程中，直接调用ElectronAPI，因此我们需要预加载JS脚本，在这个脚本中，把我们用到的API暴露出去。代码如下：constcreateWindow=()=>{constwin=newBrows
  • VScode launch.json路径错误解决办法 我要进步！ vscodec语言
    在使用VScode途中，遇到了这么个问题，对于初使用VScode选手的我来说，问题不小。以下是我查找资料后总结的一些方法：这个错误提示表明GDB无法找到指定的工作目录，这可能是由于路径中的特殊字符（如中文字符）或转义字符导致的。要解决这个问题，可以尝试以下几种方法：方法1：确保路径正确并不存在中文或特殊字符首先，确保路径D:\\作业确实存在，并且路径中没有中文或特殊字符。如果路径包含中文字符，GD
  • @JsonFormat @DateTimeFormat 注解 徐寿春 待整理文档java
    @JsonFormat(shape=JsonFormat.Shape.STRING,pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")@DateTimeFormat(pattern="yyyy-MM-ddHH:mm:ss")@JsonFormat注解用于在Java对象与JSON数据之间进行序列化和反序列化操作序列化过程时，转化为对应属性的日期时间格式。○s
  • HTML5拼图游戏开发经验分享 木木黄木木 html5前端html
    HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域，通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验，这个项目涵盖了现代前端开发的多个重要概念，包括响应式设计、
  • Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 & 一键打包两个服务 NorthCastle ElectronVue3electronvue.jselectron-forgeviteelectron整合vue一键启动一键打包
    说明本文介绍一下Electron+Vue3+Vite+ElectronForge的高级整合操作。vue3:使用TS的语法开发；Electron:使用JS的语法开发。本文将从项目初始化开始，一步一步的完成项目的启动、打包全流程的介绍。实现的效果是：1、一个正常的Vue3项目；2、整合加入Electron框架：开发时Electron加载的是开发的vue项目；【实现一键启动vue3项目+electron
  • Electron+Vue3+Vite+ElectronForge整合-全部ts开发 - 一键启动两个服务 & 一键打包两个服务 NorthCastle ElectronVue3electronvue.jselectronforgeelectron+vue整合一键打包一键启动
    说明本文介绍一下Electron+Vue3+Vite+ElectronForge的高级整合操作。vue3:使用TS的语法开发；Electron:使用TS的语法开发。补充：目前Electron的开发还是以JS为主，不过我们可以直接使用TS开发，在执行和打包时，先进行JS的编译就可以了。本文将从项目初始化开始，一步一步的完成项目的启动、打包全流程的介绍。实现的效果是：1、一个正常的Vue3项目；2、整
  • 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其他