以鼠标位置为中心缩放平移图片（图片map）

        最近一个项目使用一张图片实现地图类似的效果，即图片以鼠标位置为中心缩放、平移；通过度娘搜索找到几个版本，最终下面这个版本真正实现该功能；具体代码是网上Copy的，若有版权或其他问题，请联系我予以处理，有不当之处，请原作者原谅。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>移动缩放图片</title>

</head>

<body>

<style>

    #log{position: fixed;top: 0;right: 0;width: 200px;background: #eee;color: #333;padding: 5px;}

</style>

<div id="log"></div>

<script>

    function log(){

        document.getElementById("log").innerHTML = document.getElementById("log").innerHTML+"<br>"+[].join.call(arguments,",")

    }

    </script>



    <style>

*{margin: 0;padding: 0;}

body{background: #333;}

#box{position: relative;overflow: hidden;margin: 50px auto;border: 1px solid #fff;background: #fff;}

#box img{position: absolute;}

    </style>

    <div id="box" style="width: 500px;height: 500px;">

        <img src="http://cdn.iknow.bdimg.com/static/common/pkg/common_z_63fa369.png" style="width:827px; height:262px;" alt="">

    </div>



    <script>

    evnt = function(event) {



    var evn = event,

        eventDoc, doc, body,

        button = evn.button

        evn.target = evn.target || evn.srcElement;



    // Calculate pageX/Y if missing and clientX/Y available

    if (evn.pageX == null && evn.clientX != null) {

        eventDoc = evn.target.ownerDocument || document;

        doc = eventDoc.documentElement;

        body = eventDoc.body;



        evn.pageX = evn.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);

        evn.pageY = evn.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);

    }



    if (!evn.preventDefault) {

        evn.preventDefault = function() {

            this.returnValue = false;

        }

    }



    if (!evn.stopPropagation) {

        evn.stopPropagation = function() {

            this.cancelBubble = true;

        }

    }



    if (evn.which == null && (evn.charCode != null || evn.keyCode != null)) {

        evn.which = evn.charCode != null ? evn.charCode : evn.keyCode;

    }



    // Add which for click: 1 === left; 2 === middle; 3 === right

    // Note: button is not normalized, so don't use it

    if (!evn.which && button !== undefined) {

        evn.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));

    }

    return evn

};



function getOffset(o) {

    var left = 0,

        top = 0;

    while (o != null && o != document.body) {

        top += o.offsetTop;

        left += o.offsetLeft;

        o = o.offsetParent;

    }

    return {

        left: left,

        top: top

    };

}



;

(function() {

    var d = document,

        bind = function(b, a, c) {

            b.addEventListener ? b.addEventListener(a, function(event) {

                c.call(b, evnt(event));

            }, false) : b.attachEvent("on" + a, function(event) {

                c.call(b, evnt(window.event));

            });

        },

        on = function(b, o) {

            for (var a in o) {

                bind(b, a, o[a]);

            }

        };



    var isRun,

        startX,

        startY,

        endX,

        endY,

        rX,

        rY,

        bgX = 0,

        bgY = 0,

        $b = d.getElementById("box");

    ww = parseInt($b.style.width),

    wh = parseInt($b.style.height),

    i = $b.getElementsByTagName('img')[0],

    img = i.style,

    imgw = parseInt(img.width),

    imgh = parseInt(img.height),

    scaleSize = 1;



    function rs() {

        var w, h;

        //以完全显示图片为基准,如果改为>，则为以铺满屏幕为基准

        if (ww / wh < imgw / imgh) {

            w = ww;

            h = imgh * ww / imgw;

            bgX = 0;

            bgY = -(h - wh) / 2;

            scaleSize = ww / imgw; //初始比率

        } else {

            w = imgw * wh / imgh;

            h = wh;

            bgX = -(w - ww) / 2;

            bgY = 0;

            scaleSize = wh / imgh;

        }

        img.width = w + "px";

        img.height = h + "px";

        img.left = bgX + "px";

        img.top = bgY + "px";

    }

    rs();

    /* Init */

    on(d, {

        "mousedown": function(e) {



            //按中建快速还原大小

            if (e.which === 2) {

                rs();

            }

            if (e.which === 1 && e.target && (e.target === i || e.target === $b)) {

                isRun = true;

                startX = e.pageX;

                startY = e.pageY;



                e.preventDefault();

            }

        },

        "mouseup": function(e) {

            if (e.which !== 1) {

                return;

            }



            img.cursor = "default";

            isRun = false;

             if(typeof(rX)!=="undefined")//这个判断原作没有，去掉该判断会出现单击后，放大缩小不是鼠标位置的情况；处理加载后就点击的情况；即rX是undefined          

            {

                bgX = rX;

                bgY = rY;

            }



            e.preventDefault();

        },

        "mousemove": function(e) {

            //

            if (e.which !== 1) {

                return;

            }

            if (isRun) {

                e.preventDefault();

                img.cursor = "move";

                endX = e.pageX;

                endY = e.pageY;

                rX = bgX + endX - startX;

                rY = bgY + endY - startY;



                img.left = rX + "px";

                img.top = rY + "px";

            }

        },

        "mousewheel": function(e) {

            //以鼠标为中心缩放，同时进行位置调整

            var deltaY = 0;

            var x = e.pageX;

            var y = e.pageY;



            e.preventDefault();



            if (e.target && (e.target === i)) {



                var l = getOffset($b);

                x = x - l.left;

                y = y - l.top;



                var p = (e.wheelDelta) / 1200;

                var ns = scaleSize;

                ns += p;

                ns = ns < 0.1 ? 0.1 : (ns > 5 ? 5 : ns); //可以缩小到0.1,放大到5倍



                //计算位置，以鼠标所在位置为中心

                //以每个点的x、y位置，计算其相对于图片的位置，再计算其相对放大后的图片的位置

                bgX = bgX - (x - bgX) * (ns - scaleSize) / (scaleSize);

                bgY = bgY - (y - bgY) * (ns - scaleSize) / (scaleSize);

                scaleSize = ns; //更新倍率



                img.width = imgw * ns + "px";

                img.height = imgh * ns + "px";

                img.top = bgY + "px";

                img.left = bgX + "px";

            }

        }

    });



})();

    </script>

</body>

</html>



 

 

你可能感兴趣的:(鼠标位置)

  • 4.5 Sensors -- useElementByPoint weixin_mouren vueuse源码解析前端javascriptvue.js
    4.5Sensors–useElementByPointhttps://vueuse.org/core/useElementByPoint/作用根据鼠标位置，实时返回鼠标所在的dom元素。官方示例import{useElementByPoint,useMouse}from'@vueuse/core'//useMouse返回鼠标的实时位置const{x,y}=useMouse({type:'clie
  • unity的语言问题记录（委托相关） red_redemption unity游戏引擎
    NGUI跟随鼠标实例位置//获取鼠标位置Vector3mousePos=Input.mousePosition;//将屏幕坐标转换为NGUI的世界坐标Vector3worldPos=UICamera.mainCamera.ScreenToWorldPoint(mousePos);worldPos.z=0;//确保图片在UI层//设置图片位置instantiatedImage.transform.p
  • python入门07 事件 pygame 噗噗bug python
    目录事件一、概念①、事件循环②、事件队列③、事件处理器二、键盘事件①、先左右移动②、添加按键事件——上下移动③、重复按键④、事件名和按键名三、鼠标事件①、让沙滩球随着鼠标位置移动②、在鼠标按钮保持按下时才让鼠标控制起作用四、定时器事件事件一、概念大多数程序自始至终沿着一条可以预测的路径运行，可能中间穿插着循环和判断，还存在一种特殊程序——事件驱动程序(event-drivenprogram),事件
  • JavaScript 事件对象 汓㸓 javascript开发语言ecmascript
    1、什么是事件对象事件对象（EventObject）是在触发事件时被创建的对象，它包含了与事件相关的信息和属性。在Web开发中，事件对象通常用于处理用户与页面交互的各种事件，比如鼠标点击、键盘按下、表单提交等。事件对象提供了访问事件的详细信息的途径，开发人员可以通过事件对象来获取触发事件的元素、事件类型、鼠标位置、键盘按键信息等。通过访问事件对象的属性和方法，开发人员可以编写响应特定事件的Java
  • python-自动化篇-终极工具-用GUI自动控制键盘和鼠标-pyautogui fo安方 #python分享篇python
    文章目录用GUI自动控制键盘和鼠标pyautogui模块鼠标屏幕位置——移动地图——pyautogui.size鼠标位置——自身定位——pyautogui.position()移动鼠标——pyautogui.moveTo拖动鼠标滚动鼠标键盘按下键盘释放键盘开始与结束通过注销关闭所有程序用GUI自动控制键盘和鼠标在计算机上自动化任务的终极工具，就是写程序直接控制键盘和鼠标。这些程序可以控制其他应用，
  • Vue事件中如何使用 event 对象 JJCTO Vuevue.js前端javascript
    在Vue中，事件处理函数常常需要获取事件触发时的相关信息，比如鼠标位置、按键信息等。而要获取这些信息，就需要使用event对象。那么在Vue的事件中如何正确使用event对象呢？接下来就来详细介绍一下。首先，在Vue的事件中，event对象可以通过方法的参数传递进来。例如，常见的点击事件处理函数如下：methods:{handleClick(event){//在这里可以使用event对象进行操作}
  • 如何在canvas中获取鼠标位置的颜色信息 油墨风景秋卷画 canvascanvas获取颜色信息鼠标位置
    往下看我们使用getImageData来获取当前位置的颜色信息getImageData拥有一个data数组，里面存放的就是我们的颜色信息varmyColor=ctx.getImageData(e.offsetX,e.offsetY,1,1)//这个方法有四个参数很显然前两个参数的鼠标的坐标，后两个参数是获取的宽高//如果只获取鼠标点击的位置颜色，1,1就可以。我们可以把这个放在任何地方（当然是和c
  • QT：界面上重写鼠标事件（画框，鼠标更改） 快跑bug来啦 QTqt计算机外设开发语言
    前言  接上一篇的rtsp播放器，有需要在播放界面手动跟踪，就需要在播放界面绘制矩形框，并把当前鼠标绘制区域的宽高坐标进行换算发送给3559，做进一步处理。绘制矩形框共分为两种，第一种是左键拖动绘制，第二种是直接在鼠标位置绘制固定的矩形框，用鼠标滚轮调动框的大小，再加上退出功能，需求就可以实现了。对于qt来说也比较简单，重写对应的事件即可拖动绘制  首先，我们需要一个基于Qt的图形界面应用程序，以
  • JavaScript鼠标拖放(Drag and Drop) 爱蹦跶的大A阿 JavaScript保姆级教程javascript开发语言ecmascript前端
    ‍个人主页：《爱蹦跶的大A阿》当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》✨前言拖放是现代界面不可或缺的交互方式之一。本文将介绍如何用JavaScript来实现元素的拖放功能。我们首先需要准备拖放事件,之后跟踪拖动过程中鼠标位置,计算元素的新坐标。我们也可以实现拖放目标,在元素ENTER和LEAVE时做出响应。最后,可以在放置时传递数
  • C++实现鼠标点击和获取鼠标位置（编译环境visual studio 2022） SZHjy visualstudio开发c++计算机外设visualstudio
    1环境说明2获取鼠标位置的接口voidGetMouseCurPoint(){   POINTmypoint;   for(inti=0;i#include#includeintmain(){   Sleep(1000);         //延时函数   GetMouseCurPoint();  //获取鼠标当前所在位置   MouseMove(x,y);     //x,y坐标从GetMouse
  • Python第三方PyAutoGUI库详解 坑里技术员 Python第三方库python开发语言
    PyAutoGUI是一个用于进行图形用户界面（GUI）自动化的Python库。它允许你在屏幕上进行鼠标和键盘的模拟操作，以及获取屏幕上的信息，其函数主要分为以下4类：1、屏幕图像操作：获取屏幕分辨率、检查坐标是否在屏幕上、截屏、定位图片在屏幕上的位置、获取屏幕某个像素点的RGB值2、鼠标控制：获取当前鼠标位置、移动鼠标、鼠标拖拽、鼠标点击3、键盘控制：输入字符串、组合按键（快捷键）、同时输入字符+
  • C# 怎么判断屏幕是第几屏幕？屏幕是垂直还是水平？屏幕的分辨率？ wangnaisheng C#c#
    一、怎么判断屏幕是第几屏幕？可以使用System.Windows.Forms.Screen.AllScreens属性来获取所有已连接的屏幕，并根据鼠标位置或窗口的位置来判断它所在的屏幕索引。usingSystem;usingSystem.Windows.Forms;//获取鼠标当前位置所在的屏幕PointcursorPos=Cursor.Position;ScreencurrentScreen=S
  • Python实现自动操作 GUI qq_755682240 Pythonpython开发语言
    目录一、鼠标操作1、鼠标移动2、获取鼠标位置3、鼠标点击4、鼠标双击5、鼠标按下弹起6、鼠标拖动7、鼠标滚动二、屏幕处理1、屏幕截图2、获取屏幕分辨率3、图像识别匹配三、键盘输入1、键盘按下2、模拟输入文字3、模拟输入特殊字符4、模拟快捷键输入四、提示信息五、实例1、实例1-实时获取鼠标坐标2、实例2-自动点赞PyAutoGUI是一个纯Python的GUI自动化工具，通过它可以让程序自动控制鼠标和
  • Qt中的绝对位置与相对位置 燃犀知不可乎骤得 燃犀的QT笔记qt开发语言
    在Qt的开发中，有时候需要获取鼠标点击的位置的坐标。在Qt中坐标分为相对坐标和绝对坐标；相对坐标是以控件的左上角为（0，0）点的坐标系的坐标，绝对坐标是以显示器屏幕的左上角为（0，0）点的坐标。如图所示：获取鼠标位置的3个方法QCursor::pos()的结果是鼠标相对于桌面的绝对位置mousePressEvent的参数event的位置，event->pos()是鼠标相对于应用程序的位置，mapT
  • [Vue3学习笔记]Vue3生命周期和自定义hook函数 钧桐 VUE框架学习笔记vue.jsjavascript前端
    Vue3学习笔记Vue2和Vue3生命周期的区别自定义hook函数获取鼠标位置封装axios的hook如果我们要加一个监听呢？Vue2和Vue3生命周期的区别两变：最直观的是两个名称的改变Vue2Vue3beforeDestorybeforeUnmountDestoryedunmounted两删：created和beforeCreate被删掉了，因为有setup了加一个on：其他的都是加上了一个o
  • el-tooltip 超出宽度显示提示内容，支持自定义提示内容 小乔FEer javascript前端vue.js
    功能需求超出内容区域宽度显示tooltip自定义tooltip内容tooltip位置跟随鼠标位置显示组件源码{{content||text}}{{text}}import{uniqueId}from'lodash';exportdefault{props:{text:{//默认显示的文本type:String,default:''},content:{//tooltip显示内容type:Strin
  • Unity制作右键菜单（自适应分辨率） love_c_s unity游戏引擎
    一、需求右键触发打开菜单，左键在内部可选择选项，左键单击菜单范围外关闭。难点在于屏幕坐标系，鼠标位置，UI位置之间的关系。二、理论前置知识：unity中，用RectTransform对象的position.x和position.y表示UI在屏幕中（相对于左下角的正值）的位置。而两者所代表的点，就是UI中的Pivot的点。Pivot中,0也是最左或者最下，都是同一个参考。Pivot（0，1）则表示，
  • vue中实现组件跟随鼠标位置弹出效果 蒙娜丽莎的Java 前端htmlvue.jsjavascript前端
    实现鼠标放置在“我的”上时出现卡片，卡片位置跟随鼠标。当鼠标移除卡片时卡片隐藏。当鼠标移入时获取鼠标坐标，并把父组件的鼠标位置通过prop传给子组件。toCenter(event){const{x,y}=eventthis.mouse_x=x;this.mouse_y=y;this.showCenter=true;},子组件通过动态绑定style改变div坐标。注意！！！一开始没用watch，而是
  • 鼠标事件中鼠标位置的获取 C脖子
    鼠标事件是最常用的一类事件，包括click:单击鼠标左键或按下回车键时触发mousedown：按下任意鼠标按键时触发mouseup:松开鼠标按键时触发mouseenter:鼠标光标从元素外部首次移动到元素范围之内时触发，和mouseover不同的是，mouseenter在光标移动到后代元素上时不会触发mouseover:鼠标指针从元素外部移动到元素边界之内时触发，光标移动到后代元素上也会触发dbc
  • 前端弹窗可拖拽功能实现 你们瞎搞 前端javascript开发语言
    前端弹窗可拖拽功能主要实现思路就是监听鼠标移动事件，根据鼠标位置实时修改弹窗距离父级窗口（或者屏幕，根据需求设置）的left和right，但是考虑到鼠标拖拽一般都是在div的标题栏处发生，鼠标按下的位置不可能是弹窗的左上角位置，为此需要计算鼠标按下的位置距离弹窗左上角的距离，这样才可以保存后续鼠标移动位置可以加上这个距离从而保证与弹窗左上角的位置保持一致性。还需要注意的地方在于style.left
  • openlayers [七] 地图控件controls详解 爱玩亚索的程序员 javascriptwebgis前端vue.js
    文章目录controls简述常见的controls控件使用方法fullscreen全屏mouseposition鼠标位置控件overviewmap鹰眼图scaleline比例尺控件zoomslider缩放滑块刻度控件总结controls简述上篇文章我们将了在地图上的交互(interaction)，那些都是一些隐性的需要去使用才能知道存在有这样一个东西，就像彩蛋一样。这篇我们主要讲地图上的控件(co
  • [源码和文档分享]包含鼠标位置的屏幕截屏并保存为图片文件 ggdd5151
    背景在开发自己的专属程序“恶魔的结界”的时候，里面就有一个功能，实现屏幕的截屏，而且是包含鼠标位置的截屏。因为，通常情况下，我们看到的截屏都是没有显示鼠标的截屏，这次我们需要实现显示鼠标的截屏。而且，保存为本地的图片文件。现在，我就把这个小程序的实现过程和实现原理写成文档，分享给大家。参考文档和完整的文档和源码下载地址：https://www.write-bug.com/article/1579.
  • 根据鼠标位置缩放元素、拖拽 Space Chars SOLUTIONcss3csshtmljs
    实现实现大概思路是通过transform的scale属性实现元素缩放，通过translate设置偏移，transform-origin设置缩放圆点transformtranslate用translate的主要原因是因为，他的值是相对于父元素的相对位置，方便后面缩放偏移量的计算，而top，left的值是相对于目标元素而言，所以当目标元素的高度或宽度高于容器的高度或宽度时，他的值为负数，不方便计算目标
  • Echarts自定义提示框tooltip样式（包括提示框标题不固定） 元元猿 EChartsecharts前端javascript
    效果图实现方法用formatter函数（支持字符串模板和回调函数两种形式），使用html语法来构建一个自定义的提示框。形式一：回调函数形式（适应于需自定义样式（样式有较大变化时）的情况）//图表配置项letchartOption={//提示框配置tooltip:{//触发方式：设置为坐标轴触发提示框trigger:"axis",//设置提示框浮层位置point:鼠标位置position:funct
  • 前端 - 用div仿输入框，解决鼠标点击位置错乱的问题 kelly0721 前端前端
    由于项目需要在输入框的中插入各种自定义标签，特别的，需要将自定义标签插入指定的位置，可能是已有的字符串中间，而现有的组件无法记录失去焦点前的鼠标位置，所以采用div仿造一个div来实现需求，该方案可于移动端和pc端直接上代码importReact,{useEffect,useState,useRef}from"react";importstylesfrom"./index.scss";functi
  • Unity坐标系、相互转换和相对自身的方位及角度。 GarFe-Liu Unity应用及扩展unity数码相机游戏引擎
    一、Unity的4种坐标系1,WorldSpace(世界坐标)：我们在场景中添加物体(如：Cube)，他们都是以世界坐标显示在场景中的。transform.position可以获得该位置坐标。2,ScreenSpace(屏幕坐标):以像素来定义的，以屏幕的左下角为(0，0)点，右上角为(Screen.width，Screen.height)，Z的位置是以相机的世界单位来衡量的。注：鼠标位置坐标属于
  • 设置弹窗随鼠标位置移动 你们瞎搞 计算机外设前端javascript
    1.这是要移动的弹窗，隐藏显示逻辑、样式、展示内容自己写，主要就是动态设置弹窗的style，floatLeft和floatTop都是Vue中的data双向绑定数据；{{Math.round(distanceSum)}}米2.计算弹窗位置主要就是拿到鼠标位置屏幕坐标系和弹窗左上角位置绑定，但是要注意设置鼠标位置在四周边缘的时候，弹窗不应该被屏蔽遮挡到；window.addEventListener(
  • Qt QGraphicsItem获取鼠标位置对应图像坐标 bangtan辉 qtopencv
    本次使用了QGraphicsView来加载图像，然后给其设置了一个QGraphicsScene场景，再给场景添加了一个自定义的QGraphicsItem，在其中重写了paint事件，用来重绘图像。正常情况时，QGraphicsItem上图像的有效区域QRect大小和QGraphicsView一致，此时正好铺满，鼠标位置的坐标可以比较轻松的推算出其在图像有效区域的全局坐标。当个人碰到的某些时候，QG
  • html鼠标元素效果,如何使用CSS实现鼠标移动控制页面元素效果？（代码示例）... Good Inflation html鼠标元素效果
    本篇文章给大家介绍一下使用css映射的鼠标位置，实现通过鼠标移动控制页面元素效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。映射鼠标位置或实现拖拽效果，我们可以在JavaScript中做到这一点。但实际上，在CSS中有更加简洁的方法，我们可以在不使用JavaScript的情况下，仍然可以实现相同的功能！只使用CSS就可以实现模仿鼠标"点击和拖动"效果，让我们来看看如何获
  • Unity 实用方法 合集 Maddie_Mo unity游戏引擎c#
    Unity实用方法合集Unity打字机效果2D坐标旋转计算球面坐标求值平滑移动鼠标位置获取2D屏幕坐标转世界坐标物体朝向目标多物体中心点生成本地图片加载画面线框显示画面线框显示搭载效果贝塞尔曲线绘制贝塞尔曲线绘制搭载效果网格弯曲网格弯曲搭载效果Delaunay模型生成代码很简单没有难度，都有注解，可以收藏一下方便后期使用。Unity打字机效果usingSystem.Collections;usin
  • 戴尔笔记本win8系统改装win7系统 sophia天雪 win7戴尔改装系统win8
    戴尔win8 系统改装win7 系统详述 第一步：使用U盘制作虚拟光驱：         1）下载安装UltraISO：注册码可以在网上搜索。         2）启动UltraISO，点击“文件”—》“打开”按钮，打开已经准备好的ISO镜像文
  • BeanUtils.copyProperties使用笔记 bylijinnan java
    BeanUtils.copyProperties VS PropertyUtils.copyProperties 两者最大的区别是： BeanUtils.copyProperties会进行类型转换，而PropertyUtils.copyProperties不会。 既然进行了类型转换，那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
  • MyEclipse中文乱码问题 0624chenhong MyEclipse
    一、设置新建常见文件的默认编码格式，也就是文件保存的格式。 在不对MyEclipse进行设置的时候，默认保存文件的编码，一般跟简体中文操作系统（如windows2000，windowsXP）的编码一致，即GBK。 在简体中文系统下，ANSI 编码代表 GBK编码;在日文操作系统下，ANSI 编码代表 JIS 编码。 Window-->Preferences-->General -
  • 发送邮件 不懂事的小屁孩 send email
    import org.apache.commons.mail.EmailAttachment; import org.apache.commons.mail.EmailException; import org.apache.commons.mail.HtmlEmail; import org.apache.commons.mail.MultiPartEmail;
  • 动画合集 换个号韩国红果果 htmlcss
    动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 1 transition  制作鼠标滑过图片时的放大效果 css .wrap{ width: 340px;height: 340px; position: absolute; top: 30%; left: 20%; overflow: hidden; bor
  • 网络最常见的攻击方式竟然是SQL注入 蓝儿唯美 sql注入
    NTT研究表明，尽管SQL注入（SQLi）型攻击记录详尽且为人熟知，但目前网络应用程序仍然是SQLi攻击的重灾区。 信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明，目前黑客攻击网络应用程序方式中最流行的，要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析，指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中，SQLi攻击占
  • java笔记2 a-john java
    类的封装： 1，java中，对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节（尤其是私有数据） 2，目的：使对象以外的部分不能随意存取对象的内部数据（如属性），从而使软件错误能够局部化，减少差错和排错的难度。 3，简单来说，“隐藏属性、方法或实现细节的过程”称为——封装。 4，封装的特性：       4.1设置
  • [Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx” aijuans 学习Android遇到的错误
            最开始遇到这个错误是很早以前了，以前也没注意，只当是一个不理解的bug，因为所有的texture，textureregion都没有问题，但是就是提示错误。 昨天和美工要图片，本来是要背景透明的png格式，可是她却给了我一个jpg的。说明了之后她说没法改，因为没有png这个保存选项。 我就看了一下，和她要了psd的文件，还好我有一点
  • 自己写的一个繁体到简体的转换程序 asialee java转换繁体filter简体
              今天调研一个任务，基于java的filter实现繁体到简体的转换，于是写了一个demo，给各位博友奉上，欢迎批评指正。          实现的思路是重载request的调取参数的几个方法，然后做下转换。          
  • android意图和意图监听器技术 百合不是茶 android显示意图隐式意图意图监听器
    Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递   显式意图：调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图，显式意图明确指定了Intent应该传递给哪个组件。   隐式意图;不指明调用的名称,根据设
  • spring3中新增的@value注解 bijian1013 javaspring@Value
            在spring 3.0中，可以通过使用@value，对一些如xxx.properties文件中的文件，进行键值对的注入，例子如下： 1.首先在applicationContext.xml中加入：  <beans xmlns="http://www.springframework.
  • Jboss启用CXF日志 sunjing logjbossCXF
    1. 在standalone.xml配置文件中添加system-properties：     <system-properties>        <property name="org.apache.cxf.logging.enabled" value=&
  • 【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码 bit1129 centos
      编译必需的软件 Firebugs3.0.0 Maven3.2.3 Ant JDK1.7.0_67 protobuf-2.5.0 Hadoop 2.5.2源码包       Firebugs3.0.0   http://sourceforge.jp/projects/sfnet_findbug
  • struts2验证框架的使用和扩展 白糖_ 框架xmlbeanstruts正则表达式
    struts2能够对前台提交的表单数据进行输入有效性校验，通常有两种方式： 1、在Action类中通过validatexx方法验证，这种方式很简单，在此不再赘述； 2、通过编写xx-validation.xml文件执行表单验证，当用户提交表单请求后，struts会优先执行xml文件，如果校验不通过是不会让请求访问指定action的。 本文介绍一下struts2通过xml文件进行校验的方法并说
  • 记录-感悟 braveCS 感悟
    再翻翻以前写的感悟，有时会发现自己很幼稚，也会让自己找回初心。   2015-1-11 1. 能在工作之余学习感兴趣的东西已经很幸福了； 2. 要改变自己，不能这样一直在原来区域，要突破安全区舒适区，才能提高自己，往好的方面发展； 3. 多反省多思考；要会用工具，而不是变成工具的奴隶； 4. 一天内集中一个定长时间段看最新资讯和偏流式博
  • 编程之美-数组中最长递增子序列 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class LongestAccendingSubSequence { /** * 编程之美 数组中最长递增子序列 * 书上的解法容易理解 * 另一方法书上没有提到的是，可以将数组排序（由小到大）得到新的数组， * 然后求排序后的数组与原数
  • 读书笔记5 chengxuyuancsdn 重复提交struts2的token验证
    1、重复提交 2、struts2的token验证 3、用response返回xml时的注意 1、重复提交 (1)应用场景 (1-1)点击提交按钮两次。 (1-2)使用浏览器后退按钮重复之前的操作，导致重复提交表单。 (1-3)刷新页面 (1-4)使用浏览器历史记录重复提交表单。 (1-5)浏览器重复的 HTTP 请求。 (2)解决方法 (2-1)禁掉提交按钮 (2-2)
  • [时空与探索]全球联合进行第二次费城实验的可能性 comsci
         二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验   至今给我们大家留下很多迷团.....      关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了      在这里,我的意思是,现在
  • easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符 daizj oracleORA-12154
    用easy connect连接出现“tns无法解析指定的连接标示符”的错误，如下： C:\Users\Administrator>sqlplus username/[email protected]:1521/orcl SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 Copyright (c) 198
  • 简单排序:归并排序 dieslrae 归并排序
    public void mergeSort(int[] array){ int temp = array.length/2; if(temp == 0){ return; } int[] a = new int[temp]; int
  • C语言中字符串的\0和空格 dcj3sjt126com c
       \0 为字符串结束符，比如说：                       abcd (空格)cdefg； 存入数组时，空格作为一个字符占有一个字节的空间，我们
  • 解决Composer国内速度慢的办法 dcj3sjt126com Composer
    用法： 有两种方式启用本镜像服务： 1 将以下配置信息添加到 Composer 的配置文件 config.json 中（系统全局配置）。见“例1” 2 将以下配置信息添加到你的项目的 composer.json 文件中（针对单个项目配置）。见“例2” 为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下 1 2 3 4 5
  • 高效可伸缩的结果缓存 shuizhaosi888 高效可伸缩的结果缓存
    /** * 要执行的算法，返回结果v */ public interface Computable<A, V> { public V comput(final A arg); }   /** * 用于缓存数据 */ public class Memoizer<A, V> implements Computable<A,
  • 三点定位的算法 haoningabc c算法
    三点定位， 已知a,b,c三个顶点的x,y坐标 和三个点都z坐标的距离，la，lb,lc 求z点的坐标 原理就是围绕a,b,c 三个点画圆，三个圆焦点的部分就是所求 但是，由于三个点的距离可能不准，不一定会有结果， 所以是三个圆环的焦点，环的宽度开始为0，没有取到则加1 运行 gcc -lm test.c test.c代码如下 #include "stdi
  • epoll使用详解 jimmee clinux服务端编程epoll
    epoll - I/O event notification facility在linux的网络编程中，很长的时间都在使用select来做事件触发。在linux新的内核中，有了一种替换它的机制，就是epoll。相比于select，epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中，它是采用轮询来处理的，轮询的fd数目越多，自然耗时越多。并且，在linu
  • Hibernate对Enum的映射的基本使用方法 linzx0212 enumHibernate
      枚举   /** * 性别枚举 */ public enum Gender { MALE(0), FEMALE(1), OTHER(2); private Gender(int i) { this.i = i; } private int i; public int getI
  • 第10章 高级事件（下） onestopweb 事件
    index.html <!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/
  • 孙子兵法 roadrunners 孙子兵法
    始计第一 孙子曰： 兵者，国之大事，死生之地，存亡之道，不可不察也。 故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五 曰法。道者，令民于上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑 、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法 者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校 之以计，而索其情，曰
  • MySQL双向复制 tomcat_oracle mysql
    本文包括: 主机配置 从机配置 建立主-从复制 建立双向复制   背景 按照以下简单的步骤: 参考一下： 在机器A配置主机(192.168.1.30) 在机器B配置从机(192.168.1.29) 我们可以使用下面的步骤来实现这一点   步骤1：机器A设置主机 在主机中打开配置文件 ,
  • zoj 3822 Domination(dp) 阿尔萨斯 Mina
    题目链接：zoj 3822 Domination 题目大意：给定一个N∗M的棋盘，每次任选一个位置放置一枚棋子，直到每行每列上都至少有一枚棋子，问放置棋子个数的期望。 解题思路：大白书上概率那一张有一道类似的题目，但是因为时间比较久了，还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子，并且消耗k步的概率（k≤i∗j）,因为放置在i+1~n上等价与放在i+1行上，同理
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他