筱白迩
筱白迩

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

  • Electron常见问题 4-error: The engine “node“ is incompatible with this module. Data-Mining Electron实战builderelectron编译node.jsyarn
    目录问题解决PS:《Electron实战》系列-总览问题Electron工程编译的时候报错：[email protected]:Theengine"node"isincompatiblewiththismodule.Expectedversion">=8.12.0".Got"8.11.3"errorFoundincompatiblemodule.解决原因是nodejs版本冲
  • NPM如何更换淘宝镜像——Node.js国内镜像配置教程 孽小倩 nodejsjavascriptnode.jsnpm前端
    在国内使用npm安装Node.js包时，由于网络环境的原因，下载速度可能非常慢。为了解决这个问题，很多开发者会选择使用淘宝镜像（现在由npmmirror.com维护）。本文将带你一步一步完成更换npm源为淘宝镜像的配置，提升安装速度。一、为什么要更换淘宝镜像？默认情况下，npm使用的是官方源，这个源的速度在国内相对较慢，特别是在一些需要下载大量依赖的情况下，可能会出现下载失败或者等待时间过长的情况
  • 探索Node.js的原生插件新境界：使用`node-gyp` 洪新龙
    探索Node.js的原生插件新境界：使用node-gypnode-gypNode.jsnativeaddonbuildtool项目地址:https://gitcode.com/gh_mirrors/no/node-gyp在Node.js的生态系统中，将高性能的C/C++代码融入到JavaScript世界已经成为提升应用性能的关键手段。今天，我们要向大家隆重推荐一个不可或缺的工具——node-gyp
  • 贪吃蛇案例 The_era_achievs_hero javajavascript开发语言
    题十：贪吃蛇还原要求：只需对所给js代码的部分函数进行还原最终实现效果即可原理：首先获得蛇的头部定位，再根据键盘改变头部的位置。更新蛇的身体数组，删除蛇身体的最后一个元素，并生成新数组(头部作为新数组的第一个元素)//移动蛇的头部nextStep(){//TODO：待补充代码////只需完善该函数实现功能，不允许修改别处代码//使用对象展开运算符，复制当前蛇的头部位置consthead={...t
  • _05JavaScript The_era_achievs_hero 学习前端js
    第五次网课1.JavaScript的书写位置内部JS//页面弹出警示框alert('你好,js~')外部JS（最多）内联（行内）(以后vue框架会用这种模式）点我月薪过万2.JavaScript的注释与结束符单行注释符号：//ctrl+/多行注释符号：/**/shift+alt+a结束符用；表示结束可写可不写，要么全都写，要么全不写vue.js不加分号3.JavaScript的输入输出语法输出中文
  • 全面了解 Node.js、npm、yarn、node-gyp、Python、Visual Studio 和 Electron 的关联性 古木12345 node.jsnpmpythonelectronyarn
    好的，以下是一个全面且深入的详细解析，针对Electron桌面开发工具链及其相关依赖，包含每个关键模块（Node.js、npm、yarn、Python、node-gyp、VisualStudio、Electron）及其实现原理、功能、关联性和使用示例，确保您能完整理解这些工具的用途和关联性。一、基础工具链模块详细介绍1.Node.js1.1功能概述Node.js是一个运行时环境，它允许开发者在服务
  • 【Three.js】四（1）、three.js中的光源——基础光源 MAXLZ 【WebGL】Three.jsthree.js光源AmbientLightPointLightSpotLight
    【Three.js】四（1）、three.js中的光源——基础光源一、THREE.AmbientLight二、THREE.PointLight2.1THREE.PointLight属性三、THREE.SpotLight3.1THREE.SpotLight属性四、THREE.DirectionalLight4.1THREE.DirectionalLight的属性three.js中的光源有：THREE
  • 如果 main 里面引入 axios ，然后引入 router ，而 router 里面也引入 axios，会不会重复 清风细雨_林木木 技术点javascript前端开发语言
    技术点备忘如果main里面引入axios，然后引入router，而router里面也引入axios，会不会重复不会重复的。虽然你在main中引入了axios，并且在router中也引入了axios，但引入的axios是同一个模块。JavaScript的模块系统是基于单例模式的，意思是每个模块只会被加载一次，之后的引用都会指向同一个实例。具体来说：当你在main.js中引入axios，它会在模块加载
  • Python之json模块的序列化和反序列化 如梦@_@ python基础
    序列化：可以理解为压缩反序列化：可以理解为解压Python中序列化和反序列化其实就是一个正反两个过程。序列化就是将Python对象转化为json格式，因为Python对象只有Python语言能够识别，如果想把数据发给Java代码写的程序，那么就识别不了，所以就有一个中间的格式：json，Java中也是一样，就是将Java的数据类型转换成json格式。反序列化就是，Python接收数据的应该是Pyt
  • java使用递归获取geojson（json）数据 迷茫的小猿 javajavajson
    需要导入的包：org.json-chargebee-1.0.jarpackageparse;importjava.io.BufferedReader;importjava.io.BufferedWriter;importjava.io.FileReader;importjava.io.FileWriter;importjava.io.IOException;importjava.util.Arra
  • geojson 导入mysql_导入GeoJSON数据到SQL Server数据库中 冠位咕哒子 geojson导入mysql
    导入GeoJSON数据到SQLServer数据库中GeoJSON是GIS行业里一种常见的数据交换格式，能够存储结构化的空间地理信息。因为SQLServer从2008版开始提供了空间数据类型geometry与geography的支持，所以我也试着将项目中用到的地图数据转换到数据库中，方便之后的调用。因为中途遇到了不少坑，所以写了这篇文章作为备忘。事前准备：了解GeoJSON与SQLServer的空间
  • C#、ASP、ASP.NET、.NET、ASP.NET CORE区别、ASP.NET Core其概念和特点、ASP.NET Core个人心得体会 手中的风筝664 c#asp.net.net
    C#是一种面向对象的编程语言，主要用于开发跨平台的应用程序。它是.NET框架的一部分，并且可以在.NET平台上运行。ASP（ActiveServerPages）是一种用于构建动态Web页面的技术，使用VBScript或JScript作为服务器端脚本语言。它是早期的Microsoft技术，现已逐渐过时。ASP.NET是微软推出的下一代Web应用程序开发技术，它提供了更强大、更高效的功能和工具。ASP
  • 在nodejs中使用RabbitMQ（四）队列类型Classic、Quorum、Stream konglong127 nodejsrabbitmqnode.js后端
    经典队列（ClassicQueues）、仲裁队列（QuorumQueues）和流队列（StreamQueues）——的特性对比表：FeatureClassicQueuesQuorumQueuesStreamQueuesNon-durablequeues(非持久队列)YesNoNoMessagereplication(消息复制)NoYesNoExclusivity(独占性)YesNoNoPermes
  • 空间数据存储格式GeoJSON guokanglun WebGIS开发前端
    GeoJSON是一种用于表示地理信息的开放标准格式，广泛用于存储和交换地理空间数据。它基于JSON格式，因此易于理解和处理，尤其适用于Web和JavaScript环境中的地图应用。GeoJSON支持多种地理信息类型，如点、线、面、坐标系统等。GeoJSON基本结构GeoJSON文件本质上是一个JSON对象，通常包含以下几个主要部分：type：指定GeoJSON数据的类型。features：一个包含
  • 如何在Python中进行JSON数据的序列化和反序列化？ 计算机学长大白 pythonpython开发语言
    在Python中，JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。Python内置的json模块提供了简单易用的方法来实现数据的序列化和反序列化。下面将详细介绍如何在Python中进行JSON数据的序列化和反序列化，并给出具体的示例。1.序列化序列化是指将Python对象转换为JSON格式的字符串。json模块提供
  • 爬虫实践——selenium、bs4 lucky_chaichai Python爬虫seleniumrequests爬虫seleniumpython
    目录一、浏览器的一般设置二、打开网页并获取网页源码的方式1、基于requests库2、基于urlib库3、基于selenium三、HTML解析1、BeautifulSoup2、Selenium动态渲染爬虫：模拟动态操作网页，加载JS(webdriver)3、scrapy框架四、反爬虫操作五、一些常见的异常处理六、url接口调用问题——get、post操作1、get请求2、post请求fromsel
  • uniapp uni-icons组件自定义图标 xcLeigh uniapp技术点解析uni-app前端java
    文章目录1️⃣uni-icons组件1.1引用位置1.2FontEditor简介1.2FontEditor使用结束语优质源码分享uni-app是一个使用Vue.js(opensnewwindow)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。1️⃣uni-icons组件1.1引用位置1.2FontEditor简介Fo
  • uniapp 可视化开发_dragUI 基于uni的可拖拽可视化编程web模板 weixin_39644021 uniapp可视化开发
    更新记录1.0.1(2019-12-02)忘了搞colorUI的模板，会导致下载项目后找不到样式的问题。更新了README添加了演示视频1.0.0(2019-12-01)2019/12/1更新代码注释，说明查看更多dragUI文档目录hope用于UNI可拖拽可视化编程在线演示demo地址一个简单创建helloworld界面的视频,github不会放视频，放在bilibli了dragUI演示视频效果
  • 【MongoDB】MongoDb的“not master and slaveok=false”错误及解决方法 weixin_30900589 数据库shell
    链接mongodb报错如下2016-03-14T16:26:00.912+0800EQUERY[thread1]Error:listDatabasesfailed:{"ok":0,"errmsg":"notmasterandslaveOk=false","code":13435}:_getErrorWithCode@src/mongo/shell/utils.js:23:13Mongo.proto
  • 【MongoDB】MongoDb的“not master and slaveok=false”错误及解决方法 mongo连接从库出现问题... weixin_33782386 数据库shellphp
    链接mongodb报错如下2016-03-14T16:26:00.912+0800EQUERY[thread1]Error:listDatabasesfailed:{"ok":0,"errmsg":"notmasterandslaveOk=false","code":13435}:_getErrorWithCode@src/mongo/shell/utils.js:23:13Mongo.proto
  • js根据指定字符截取字符串(正则方式） i'm wxm javascript前端开发语言
    1、截取两个字符之间的字符串varstr="aaabbbcccdddeeefff";str=str.match(/aaa(\S*)fff/)[1];alert(str);//结果bbbcccdddeee2、截取指定字符串前varstr="这个是一句话";str=str.match(/(\S*)是/)[1];alert(str);//结果--->这个3、截取指定字符后varstr="这个是一句话";
  • js判断当前时间是否在指定范围内 i'm wxm 前端javascript开发语言
    一、js判断当前时间是否在指定范围内利用js的Date对象，获得三个时间戳，分别为当前时间、开始时间、结束时间，通过比对当前时间是否在开始时间和结束时间之间，来判断是否在一个时间区间内方法一：functionisTimeInRange(startTime:any,endTime:any){//获取当前时间、开始时间、结束时间的时间戳constnow=newDate();constcurrentTi
  • 使用v-html时 防止xss注入攻击 i'm wxm xss前端javascriptvue
    方法一使用vue-dompurify-html插件安装npminstallvue-dompurify-html在mian.js中配置import{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)//防止v-html进行xss注入importVueDOMPurifyHTMLfrom'vue-dompurify-htm
  • vue +element UI form表单校验数组嵌套，数组对象必填校验 i'm wxm vue.jsjavascript前端
    使用element表单时会出现数组对象类型的数据结构并且需要必填校验data(){return{//表单中出现像jsonList这样的数组对象数据editForm:{script:'',paramJsonList:[{paramName:'',paramaValue:''}]},//表单校验editFormRule:{script:[{required:true,message:'请填写',tri
  • 从热搜趋势到交易策略：Level2逐笔成交数据的应用之道 银河金融数据库 level2逐笔成交逐笔委托区块链金融数据库python
    从热搜趋势到交易策略：Level2逐笔成交数据的应用之道为了促进学习和研究，我们在此分享一部分匿名处理的股票level2逐笔委托逐笔成交历史行情数据集。股票level2逐笔委托逐笔成交历史行情数据集链接:https://pan.baidu.com/s/1jSeHGNOs8akYsFfjs9WMSw?pwd=crfj提取码:crfj请注意，分享这些数据的目的是为了教育和研究，不构成任何投资建议。关键
  • 《Python制作动态爱心粒子特效》 后端工匠之道 Python爱心代码pythonpygame开发语言python表白初学者入门生活爱心代码
    一、实现思路粒子效果：–使用Pygame模拟粒子运动，粒子会以爱心的轨迹分布并运动。爱心公式：爱心的数学公式：x=16sin3(t),y=13cos(t)−5cos(2t)−2cos(3t)−cos(4t)参数tt的范围决定爱心形状。动态效果：粒子会从爱心轨迹出发，模拟旋转或扩散运动。二、完整代码后台私信三、运行效果运行代码后，你将看到：粒子围绕爱心形状分布，并不断扩散。爱心形状动态出现，粒子会随
  • 模型GPU-＞NPU(Ascend)迁移训练简述 終不似少年遊* 深度学习人工智能迁移学习GPUNPU华为云
    目录一、迁移训练流程图解二、详细流程步骤1.模型训练与日志记录2.跨平台精度对齐对比3.问题定位与修复4.迭代验证三、关键技术点四、常见问题与解决方案一、迁移训练流程图解通过华为云的modelart进行运行环境选型北京四使用GPU进行模型训练，生成gpulog.json文件，记录损失函数等信息。然后，使用ptdbg_ascend工具进行精度收集，生成dump文件，由于文件过大，上传到obs桶。贵阳
  • 【花雕学编程】Arduino JSON 之跨平台兼容性 驴友花雕 开源硬件json嵌入式硬件单片机c++跨平台兼容性ArduinoJSON
    Arduino是一个开放源码的电子原型平台，它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板，它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的，你可以使用ArduinoIDE（集成开发环境）来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区，你可以利用它们来扩展Ardui
  • h5 uniapp html2canvas生成海报,保存到本地功能实现； js小白羊 uni-appjavascript前端
    html2canvas生成海报,保存到本地功能实现1.在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数2.组件的使用，伪代码不要直接复制uniapp语法3.h5保存生成后的图片到本地方法;1.在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数在组件中，通过prop接收ID的，ID的变化来触发render.js里面的函数。html2can
  • 2021-04-15 一般橙 笔记
    JQuery项目JS模块化分析(一)Jquery在线手册新增一个组件例按钮组件varYIUI=YIUI||{};(function(){//立即执行匿名函数,模拟模块化YIUI.Yes_Button=function(options){//匿名函数表达式varbtntemplate={el:$(""),caption:"按钮",init:function(){varself=this;var$in
  • 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其他