转角遇到我得爱
转角遇到我得爱

图片拖拽、旋转、缩放、移动

下面代码图片链接换成自己的就可以用了



<html lang="en">
<head>
    <title>图片拖拽、旋转、缩放、移动title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            /*ff stop copy*/
            -moz-user-select:none;
        }
        table{
            width: 100%;
            border-spacing: 8px;

        }
        td{
            border: 1px solid gray;
        }

        .ltd{
            width: 60%;
            height: 900px;
            overflow: hidden;

        }

        .drawingBoard{
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .drawingBoard .rel_img{
           cursor:move;
        }

        .line_center_s{
             background: #ddd;
            border: 1px solid #000;
            position: absolute;
            width: 15px;
            height: 15px;
            top: -15px;
            left: 50%;
            border-radius: 50%;
        }

        .line_center_s:link,.line_center_s:visited,.line_center_s:hover,.line_center_s:active{
            cursor: url("images/rotate_arrow.cur"),crosshair;
        }

        .rtd{
            width: 40%;
            height: 900px;
        }

        div.panel{
            width: 100%;
            height: 100%;
        }

        a.cloth{
            display: block;
            float: left;
            text-decoration: none;
            border: 1px solid transparent;
            margin: 6px -3px -3px 6px;
            padding: 2px;
            cursor: pointer;

        }

        a.cloth:hover{
            border: 1px solid gray;
        }

    style>
head>
<body>
<table>
    <tr>
        <td class="ltd">
            <div class="drawingBoard" ondrop="drop(event)" ondragover="allowDrop(event)">

            div>
        td>
        <td class="rtd">
            <div class="panel">
                <a class="cloth" ><img src="images/cloth_1.jpg" data-url="images/cloth_1.png">a>

                <a class="cloth" ><img src="images/cloth_2.jpg" data-url="images/cloth_2.png">a>

                <a class="cloth" ><img src="images/cloth_3.jpg" data-url="images/cloth_3.png">a>

            div>
        td>
    tr>
table>
<script  type="text/javascript" src="js/jquery-1.11.3.js">script>
<script type="text/javascript" src='js/zooming.js'>script>
<script type="text/javascript">
    jQuery(function(){

       // document.ondragstart=function() {return false;}//禁止生成新链接
        document.onselectstart=function(){return false;}//禁止鼠标全选住图片

        $(".panel .cloth img").each(function(){
            //开始拖拽
            this.ondragstart=function(event){

                var  img_path= jQuery(this).attr("data-url");//图片地址
                event.dataTransfer.setData("Text",img_path);
                //  console.log(img_path);

            }
        });

        //点击非图片位置去所有图片样式
        $(".drawingBoard").on('click',function(event) {
            event.preventDefault();
             event.stopPropagation();
            //隐藏样式
           hideStyle();

        });
        //点击图片去样式
        $(".drawingBoard").on('click', '.rel_img', function(event) {
            event.preventDefault();
            event.stopPropagation();
           //隐藏样式
           hideStyle();
           //显示自己的样式
            $(this).find(".zoom").show();
           $(this).css({
               border: '1px solid gray'
           });
           $(this).find(".line_center").show();
           $(this).find(".line_center_s").show();

           zooming.add(this);

        });

        // 旋转
        var  rotate=0;
        $(".drawingBoard").on('mousedown','.rel_img .line_center_s', function(e) {      
            e.preventDefault();
            e.stopPropagation();

            //设置类drawingBoard鼠标样式为自定义
            $(".drawingBoard").css({
                cursor: "url('images/rotate_arrow.cur'),crosshair"
            });


            var x=e.clientX,
                y=e.clientY,
                cloth_width=$(this).parent().css("width"),
                cloth_height=$(this).parent().css("height"),
                position_x=$(this).parent().offset().left,
                position_y=$(this).parent().offset().top,

                //图片中心点
                cx=parseInt(position_x)+parseInt(cloth_width)/2,
                cy=parseInt(position_y)+parseInt(cloth_height)/2,
                curentEle=this;

                var anglePre=countDeg(cx,cy,x,y);//获取前一次的角度值


            $(document).on('mousemove', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var curr_x=e.clientX;
                var curr_y=e.clientY;

                var angleNext=countDeg(cx,cy,curr_x,curr_y);//获取后一次的角度值

                var new_rotate=angleNext-anglePre;
                rotate+=new_rotate;


                anglePre=angleNext;


               $(curentEle).parent().css({
                "transform":"rotate("+rotate+"deg)",
                '-ms-transform':"rotate("+rotate+"deg)",
                "-webkit-transform":"rotate("+rotate+"deg)"
               });

            });
        }).mouseup(function() {
            $(document).off("mousemove");
            $(".drawingBoard").css({
                cursor: "default"
            });
        });


    });





    //进入目标上
    function allowDrop(event) {
        event.preventDefault();

    }
    //进入目标区域
    var _zindex=10;//全局z-index值
    function drop(event) {
        event.preventDefault();
        event.stopPropagation();
        var data=event.dataTransfer.getData("Text");//获取实际大小图片地址
        var x=event.clientX;
        var y=event.clientY;
        // FIXME 
        var _x=x-80;
        var _y=y-105;

        //隐藏样式
        hideStyle();
        var rel_img_div="
"+
                           "" style='width:160px;height:210px;'>"+
                           "
"+
                        "
";
        jQuery(".drawingBoard").append(rel_img_div);
        _zindex+=1;

    }
    //鼠标按下
    function myMousedown(t,e){
        e.preventDefault();
        e.stopPropagation();
        //鼠标按下位置
        var x=e.clientX;
        var y=e.clientY;

         //图片位置
         var _left=parseInt($(t).parent().css("left"));
         var _top=parseInt($(t).parent().css("top"));


        //鼠标移动
        this.onmousemove=function(e){
            //鼠标移动前一点
            var _x= e.clientX;
            var _y= e.clientY;

            var new_x=_x-x;
            var new_y=_y-y;

            //鼠标移动后一点
            x=e.clientX;
            y=e.clientY;
            //图片新位置
            _left=_left+new_x;
            _top=_top+new_y;

            $(t).parent().css({left:_left+"px",top:_top+"px"});

            //鼠标抬起
            this.onmouseup=function(){
                this.onmousemove=null;
            }
        }

    }

    //隐藏样式
    function hideStyle(){
          $(".drawingBoard .rel_img").find(".zoom").hide();
           $(".drawingBoard .rel_img").css({
               border: '0 solid gray'
           });
           $(".drawingBoard .rel_img").find(".line_center").hide();
           $(".drawingBoard .rel_img").find(".line_center_s").hide();
    }
    //计算角度值
    var countDeg=function(cx,cy,pointer_x,pointer_y){
        var ox=pointer_x-cx;
        var oy=pointer_y-cy;
        var to=Math.abs(ox/oy);
        var angle = Math.atan( to )/( 2 * Math.PI ) * 360;//鼠标相对于旋转中心的角度
        if( ox < 0 && oy < 0)//相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系  
            {  
                angle = -angle;  
            }else if( ox < 0 && oy > 0)//左下角,3象限  
            {  
                angle = -( 180 - angle )  
            }else if( ox > 0 && oy < 0)//右上角，1象限  
            {  
                angle = angle;  
            }else if( ox > 0 && oy > 0)//右下角，2象限  
            {  
                angle = 180 - angle;  
            }

        return angle;
    }

script>

body>
html>

js/zooming.js 代码

    var zooming=function(e){  
    e=window.event ||e;  
    var o=this,data=e.wheelDelta || -e.detail*40,zoom,size;  
    if(!+'\v1'){//IE  
        zoom = parseInt(o.style.zoom) || 100;   
        zoom += data / 12;  
        if(zoom > zooming.min)   
            o.style.zoom = zoom + '%';  
        e.returnValue=false;  
    }else {  
        size=o.getAttribute("_zoomsize").split(",");  
        zoom=parseInt(o.getAttribute("_zoom")) ||100;  
        zoom+=data/12;  
        if(zoom>zooming.min){  
            o.setAttribute("_zoom",zoom);  
            o.style.width=size[0]*zoom/100+"px";  
            o.style.height=size[1]*zoom/100+"px" 
        }  

        e.preventDefault();//阻止默认行为  

        e.stopPropagation();//for Firefox3.6  
    }  
};  
zooming.add=function(obj,min){//第一个参数指定可以缩放的图片，min指定最小缩放的大小 ,default to 50  
    zooming.min=min || 50;  
    obj.onmousewheel=zooming;  
    if(/Firefox/.test(navigator.userAgent))//if Firefox  
        obj.addEventListener("DOMMouseScroll",zooming,false);  
    if(-[1,]){//if not IE  
        obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight);  
    }  
};  

// window.onload=function(){//放在onload中，否则非ie中会无法计算图片大小出错  
//     zooming.add(document.getElementById("testimg1"));  
// } 

//t:元素对象
function Tzoom(t){
     zooming.add(t);
}

你可能感兴趣的:(jQuery,js)

  • 图形化数据报文转换映射工具 光芒再现0394 数据交换SwingETL数据格式转换数据映射xml转jsonjson转xml
    目录概要整体架构流程技术名词解释技术细节小结概要在当今数字化时代，数据的处理和分析是企业、科研机构以及各类组织日常运营的核心环节。数据来源广泛，格式多样，常见的数据格式包括XML（可扩展标记语言）和JSON（JavaScript对象表示法）。XML以其结构化和可扩展性强的特点，被广泛应用于配置文件、数据交换以及复杂数据结构的描述；而JSON则因其简洁、易读易解析的特性，在Web开发、API接口以及
  • error Parsing error: invalid-first-character-of-tag-name vue/no-parsing-error 小丁学Java vue2和element-uivue.js前端javascript
    标签的第一个字符不符合HTML或Vue的语法要求[0]ModuleWarning(from./node_modules/eslint-loader/index.js):[0][0]/Users/dgq/Downloads/cursor/spid-admin/src/views/tools/fake-strategy/components/identify-list.vue[0]87:78error
  • 从提供的 package.json 文件可以看出，项目已经集成了 vue-cli-service lint --fix，并且配置了相关的工具和脚本 小丁学Java vue2和element-uijsonvue.js前端
    文章目录1.确认`vue-cli-servicelint`已集成2.确认`lintOnSave`是否启用示例：`vue.config.js`3.确认ESLint配置4.确认Git钩子配置5.如何实现保存时自动修复（1）启用`lintOnSave`（2）配置编辑器的ESLint插件（3）测试自动修复6.总结从你提供的package.json文件来看，项目已经集成了vue-cli-servicelin
  • CentOS 中安装高版本 nodejs 问题小记 赵大仁 js技术学习linuxcentosnodejs
    问题如果你在CentOS中安装最新版本NodeJS时碰到如下报错，尝试按照下面的步骤升级一下glibc吧node:/usr/lib64/libstdc++.so.6:version`GLIBCXX_3.4.14'notfound(requiredbynode)node:/usr/lib64/libstdc++.so.6:version`GLIBCXX_3.4.18'notfound(require
  • 将josn字符串解析成实体 努力，别失业 C#动态解析JSONjsonmodal
    dynamic_modal=Newtonsoft.Json.Linq.JToken.Parse(_json_data)asdynamic;将json字符_json_data动态解析成实体_modal,可以直接取_modal的属性字体。JsonResultResult=(JsonResult)Pay("","","","");varjsonStr=Newtonsoft.Json.JsonConver
  • JsonPath用法详解 吴少凡 python开发语言自动化pycharm
    JSONPath是一种信息抽取类库，是从JSON文档中抽取指定信息的工具，提供多种语言实现版本，包括Javascript、Python、PHP和Java。1、JSONPath安装:pipinstalljsonpath#如果安装太慢可以使用清华源来加速安装pipinstalljsonpath-ihttps://pypi.tuna.tsinghua.edu.cn/simple2、JSONPath语法J
  • 华为OD机试E卷 -boss的收入（Java & Python& JS & C++ & C ） 算法大师 最新华为OD机试华为odjavapythonjavascriptc++c语言华为od机考e卷
    最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述一个XX产品行销总公司，只有一个boss，其有若干一级分销，一级分销又有若干二级分销，每个分销只有唯一的上级分销。规定，每个月，下级分销需要将自己的总收入（自己的+下级上交的）每满100元上交15元给自己的上级。现给出一组分销的关系，和每个分销的收入，请找出boss并计算出这个boss的收入。比如：收入100元，上交1
  • 华为OD机试E卷 --选修课--24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptpythonjsc语言
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码题目描述现有两门选修课，每门选修课都有一部分学生选修，每个学生都有选修课的成绩，需要你找出同时选修了两门选修课的学生，先按照班级进行划分，班级编号小的先输出，每个班级按照两门选修课成绩和的降序排序，成绩相同时按照学生的学号升序排序。输入描述第一行为第一门选修课学生的成绩，第二行为第二门选修课学生的
  • java枚举转json 软件老王 枚举json
    1、背景java后端的枚举类型，要展示到前端，提供给用户进行下拉选择，java后端需要封装enum为json字符串提供给前端，需要首先将枚举类型转为list，然后再转为json字符串。2、方案方案也很简单，使用EnumSet.allOf(TestEnum.class)，将数据获取到再塞到list中就可以了。代码如下：importcom.alibaba.fastjson.JSONObject;imp
  • 多功能系统下的专业游戏陪玩小程序，线上开黑陪玩与线下家政服务全囊括
    技术栈与工具前端技术栈UniApp框架：用于开发跨平台的移动应用。Vue.js：用于构建用户界面。微信小程序云函数：用于在微信小程序中实现后端逻辑。后端技术栈PHP：用于开发后端服务。MySQL：用于存储用户数据和陪玩人员信息。TP6框架：用于开发后端服务。开发工具HBuilderX：用于开发UniApp项目。微信开发者工具：用于开发微信小程序。适用行业陪玩行业：游戏陪玩领域国内已经很成熟。陪聊行
  • 制作动态菜单 大磊程序员(“hello world”) Java后端javascript开发语言ecmascript
    动态菜单的说明什么叫做动态菜单？动态菜单就是根据用户属于不同的角色，每个角色还有不同的菜单，左侧菜单栏会有不同的显示前端加载流程menu.js修改/src/api/menu.js中的请求地址，如下所示：//获取菜单exportconstGetMenus=params=>{returnrequest({url:'/admin/system/index/menus',method:'get',para
  • 基于 WPF 平台使用纯 C# 实现动态处理 json 字符串 code_shenbing WPFwpfc#json
    一、引言在当今的软件开发领域，数据的交换与存储变得愈发频繁，JSON（JavaScriptObjectNotation）作为一种轻量级的数据交换格式，以其简洁、易读、便于解析和生成的特点，被广泛应用于各种应用程序中。在WPF（WindowsPresentationFoundation）平台开发的桌面应用里，我们常常需要与各种数据源交互，动态处理JSON字符串就成为了一项必备技能。本文将深入探讨如何
  • Vue.js 单页应用（SPA）开发教程：从零开始构建你的第一个项目 Milk夜雨 vue.jsvue.js前端javascript
    单页应用（SPA，SinglePageApplication）是现代前端开发的主流模式。Vue.js是一个非常适合构建SPA的框架，它通过VueRouter实现页面导航，通过组件化开发和状态管理实现复杂的交互功能。本篇教程将带你了解SPA的基本概念，并一步步创建一个Vue.js单页应用。什么是单页应用（SPA）？单页应用是一种只有一个HTML页面，通过JavaScript动态加载内容的应用。特点包
  • Python酷库之旅-第三方库Pandas(008) 神奇夜光杯 pythonpandas人工智能开发语言excel标准库及第三方库学习和成长
    目录一、用法精讲16、pandas.DataFrame.to_json函数16-1、语法16-2、参数16-3、功能16-4、返回值16-5、说明16-6、用法16-6-1、数据准备16-6-2、代码示例16-6-3、结果输出17、pandas.read_html函数17-1、语法17-2、参数17-3、功能17-4、返回值17-5、说明17-6、用法17-6-1、数据准备17-6-2、代码示例1
  • C# 与.NET 日志变革：JSON 让程序“开口说清话” 步、步、为营 c#.netjson
    一、引言：日志新时代的开启在软件开发的漫长旅程中，日志一直是我们不可或缺的伙伴。它就像是应用程序的“黑匣子”，默默地记录着程序运行过程中的点点滴滴，为我们在调试、排查问题以及性能优化时提供关键线索。在早期，文本日志是我们最常用的记录方式，它简单直接，就像我们随手写下的日记，记录着事件发生的时间、内容等基本信息。然而，随着软件系统规模的不断扩大，架构日益复杂，尤其是在微服务、大数据分析以及云原生应用
  • Node.js的解释 web15085415935 面试学习路线阿里巴巴node.js
    1.Node.js入门教程1.1什么是Node.js？1.1.1Node.js是什么？Node.js是一个基于JavaScript的开源服务器端运行时环境，允许开发者用JavaScript编写服务器端代码。与传统的前端JavaScript主要运行在浏览器端不同，Node.js通过提供一个非阻塞的异步模型，允许开发者在服务器端创建高性能的网络应用程序。比喻：想象你把JavaScript看作是一个厨师
  • vue2在线生成二维码 家里有只小肥猫 javascript前端开发语言
    亲情提示：如果可以让后端生成就让后端生成实在不行再前端解决（分享方法只是为了让你快点下班不是为了让你能者多劳）创建npminstallqrcodejs2pnpminstallqrcodejs2importQRCodefrom'qrcodejs2'data:{qrcode:'',}submitCode(){if(this.$refs.qrcode){this.qrcode='';this.$refs
  • 参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽子凯哥 web安全学习安全CTF夺旗赛网络安全
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 探秘 commits-graph：优雅的Git提交图绘制工具 农爱宜
    探秘commits-graph：优雅的Git提交图绘制工具去发现同类优质开源项目:https://gitcode.com/在软件开发中，Git不仅仅是一个版本控制系统，它还是我们代码历程的一种视觉表达。每次提交都如同历史的一笔，记录着开发者的心血和智慧。而今天，我们要向您推荐一个非常出色的开源项目——commits-graph，这是一个基于HTML5Canvas和jQuery的Git提交图形小部件
  • 【大数据入门核心技术-Hive】（十六）hive表加载csv格式数据或者json格式数据 forest_long 大数据技术入门到21天通关大数据hivehadoop开发语言后端数据仓库
    一、环境准备hive安装部署参考：【大数据入门核心技术-Hive】（三）Hive3.1.2非高可用集群搭建【大数据入门核心技术-Hive】（四）Hive3.1.2高可用集群搭建二、hive加载Json格式数据1、数据准备vistu.json[{"id":111,"name":"name111"},{"id":222,"name":"name22"}]上传到hdfshadoopfs-putstu.j
  • 基于数据可视化SpringBoot+Vue+Uniapp的学生活动管理系统设计与实现（毕业设计实战项目+源码+部署） Java开源领先者 #Java网站项目#微信小程序毕设#Java精品毕设信息可视化springbootvue.js毕业设计javauni-app学生活动管理
    博主介绍CSDN毕设辅导第一人、靠谱第一人、全网粉丝50W+,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可
  • 分布式微服务搭建 Xi-Tong 微服务架构云原生linuxcentosbashjdk
    分布式微服务架构搭建（举出一个项目搭建的例子，其他项目可参考本文档）基于Nginx作为web服务器、JDK作为Java运行环境、MySQL作为关系型数据库、Nacos作为服务发现和配置中心、Maven作为项目管理工具、Redis作为缓存和消息中间件（视具体需求而定）、Node.js与npm作为某些微服务（如前端服务或特定业务逻辑服务）的开发和依赖管理工具，可以搭建一个完整的分布式微服务架构项目。以
  • 【Python Dash】零基础也能轻松掌握的学习路线与参考资料 weishaoonly pythondash学习
    PythonDash是一个可视化框架，可以帮助开发者快速构建交互式仪表板和应用程序。它基于Plotly.js库建立，提供了一种易于使用的Python界面，用户可以通过简单的Python代码创建仪表板和应用程序。本篇文章将介绍PythonDash的学习路线，并给出参考资料和优秀实践，并对PythonDash应用的未来趋势进行了展望。一、PythonDash的学习路线以下是学习PythonDash的建
  • SkyWalking 小馋喵知识杂货铺 性能skywalking
    SkyWalking是一款开源的APM（ApplicationPerformanceManagement）工具，主要用于监控、追踪和诊断微服务架构中的应用性能。它支持多种语言，包括Java、Go、Node.js、Python等，能够提供强大的分布式追踪、日志分析、性能监控等功能，是微服务和云原生架构中重要的性能管理工具之一。SkyWalking最初由ApacheSoftwareFoundation
  • vue2 缓存组件＜keep-alive＞ 海绵宝龙 vue2缓存vue.jsjavascript前端前端框架vue
    在Vue.js2中，keep-alive是一个内置组件，它允许您缓存不活动的组件实例，以便在需要时可以更快地重新渲染它们。当一个组件被包裹在标签中时，它的状态会被保留，而不是在每次切换时都重新创建。以下是如何使用keep-alive组件来缓存组件的示例：切换组件importMyComponentfrom'./MyComponent.vue';exportdefault{name:'App',com
  • 省市区数据最新 javascript
    包含省市区县数据，共3465个。——更新于2025年01月24日包括东莞市，中山市的下面的镇和街道暂时应该没有比我更全的了~~~因为JSON串比较长，有14797行，粘贴太长了，粘不出来，所以只能通过网盘分享点击进入夸克网盘下载https://pan.quark.cn/s/ff995e58de2d如果需要：全国省市区县乡镇街道，到乡镇街道的总数：45380个，全国城市行政代码+邮编代码数据，点击下
  • map转换成JSON的方法 web18296061989 javajava后端
    第一种alibabafalstjson：1.Map转JSONMapmap=newHashMap();map.put("a","a");map.put("b","123");JSONObjectjson=newJSONObject(map);2.map转stringMapmap=newHashMapmap=(Map)json;5.String转JSONStringstr="{"username":"
  • 【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js RS迷途小书童 前端开发探索之旅javascripthtmlcss前端vue.js
    一、HTML：构建网页的基石1.1简介HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建网页的标准标记语言。它使用各种标签（tags）来描述网页上的内容，包括文本、图像、链接、视频、音频等。HTML是网页开发的基础，与CSS（层叠样式表）和JavaScript等技术一起，共同构建出丰富多彩的网页世界。HTML文档由一系列的元素构成，每个元素都由开始标签、内容和
  • js第一次笔记 chen_zhi_yu javascript笔记前端
    JavaScript显示方案JavaScript能够以不同方式“显示”数据：使用window.alert()写入警告框使用document.write()写入HTML输出使用innerHTML写入HTML元素使用console.log()写入浏览器控制台JavaScript关键词JavaScript语句常常通过某个关键词来标识需要执行的JavaScript动作。下面的表格列出了一部分将在教程中学到
  • nodejs启动项目报错 Error: listen EACCES: permission denied 0.0.0.0:5000 BiuBiu__A 后端node.js运维javascriptnode.js后端
    nodejs启动项目报错Error:listenEACCES:permissiondenied0.0.0.0:5000，截图如下：解决方法在管理员权限下打开CMD（命令行）并运行：netstopwinnatnetstartwinnat执行完成后在此通过nodejs启动项目即可成功！
  • java数字签名三种方式 知了ing javajdk
    以下3钟数字签名都是基于jdk7的 1，RSA String password="test"; // 1.初始化密钥 KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA"); keyPairGenerator.initialize(51
  • Hibernate学习笔记 caoyong Hibernate
    1>、Hibernate是数据访问层框架，是一个ORM(Object Relation Mapping)框架，作者为:Gavin King 2>、搭建Hibernate的开发环境      a>、添加jar包:      aa>、hibernatte开发包中/lib/required/所
  • 设计模式之装饰器模式Decorator（结构型） 漂泊一剑客 Decorator
    1. 概述        若你从事过面向对象开发，实现给一个类或对象增加行为，使用继承机制，这是所有面向对象语言的一个基本特性。如果已经存在的一个类缺少某些方法，或者须要给方法添加更多的功能（魅力），你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上。      
  • 读取磁盘文件txt，并输入String 一炮送你回车库 String
    public static void main(String[] args) throws IOException {    String fileContent = readFileContent("d:/aaa.txt");    System.out.println(fileContent);   
  • js三级联动下拉框 3213213333332132 三级联动
    //三级联动 省/直辖市<select id="province"></select> 市/省直辖<select id="city"></select> 县/区 <select id="area"></select>
  • erlang之parse_transform编译选项的应用 616050468 parse_transform游戏服务器属性同步abstract_code
             最近使用erlang重构了游戏服务器的所有代码，之前看过C++/lua写的服务器引擎代码，引擎实现了玩家属性自动同步给前端和增量更新玩家数据到数据库的功能，这也是现在很多游戏服务器的优化方向，在引擎层面去解决数据同步和数据持久化，数据发生变化了业务层不需要关心怎么去同步给前端。由于游戏过程中玩家每个业务中玩家数据更改的量其实是很少
  • JAVA JSON的解析 darkranger java
    // { // “Total”：“条数”， // Code: 1, // // “PaymentItems”:[ // { // “PaymentItemID”:”支款单ID”, // “PaymentCode”:”支款单编号”, // “PaymentTime”:”支款日期”, // ”ContractNo”:”合同号”， //
  • POJ-1273-Drainage Ditches aijuans ACM_POJ
    POJ-1273-Drainage Ditches http://poj.org/problem?id=1273 基本的最大流，按LRJ的白书写的 #include<iostream> #include<cstring> #include<queue> using namespace std; #define INF 0x7fffffff int ma
  • 工作流Activiti5表的命名及含义 atongyeye 工作流Activiti
    activiti5 - http://activiti.org/designer/update在线插件安装 activiti5一共23张表 Activiti的表都以ACT_开头。 第二部分是表示表的用途的两个字母标识。 用途也和服务的API对应。 ACT_RE_*: 'RE'表示repository。 这个前缀的表包含了流程定义和流程静态资源 （图片，规则，等等）。 A
  • android的广播机制和广播的简单使用 百合不是茶 android广播机制广播的注册
          Android广播机制简介 在Android中，有一些操作完成以后，会发送广播，比如说发出一条短信，或打出一个电话，如果某个程序接收了这个广播，就会做相应的处理。这个广播跟我们传统意义中的电台广播有些相似之处。之所以叫做广播，就是因为它只负责“说”而不管你“听不听”，也就是不管你接收方如何处理。另外，广播可以被不只一个应用程序所接收，当然也可能不被任何应
  • Spring事务传播行为详解 bijian1013 javaspring事务传播行为
            在service类前加上@Transactional，声明这个service所有方法需要事务管理。每一个业务方法开始时都会打开一个事务。         Spring默认情况下会对运行期例外(RunTimeException)进行事务回滚。这
  • eidtplus operate 征客丶 eidtplus
    开启列模式: Alt+C 鼠标选择   OR   Alt+鼠标左键拖动 列模式替换或复制内容(多行): 右键-->格式-->填充所选内容-->选择相应操作 OR Ctrl+Shift+V(复制多行数据,必须行数一致) -------------------------------------------------------
  • 【Kafka一】Kafka入门 bit1129 kafka
    这篇文章来自Spark集成Kafka(http://bit1129.iteye.com/blog/2174765)，这里把它单独取出来，作为Kafka的入门吧   下载Kafka http://mirror.bit.edu.cn/apache/kafka/0.8.1.1/kafka_2.10-0.8.1.1.tgz 2.10表示Scala的版本，而0.8.1.1表示Kafka
  • Spring 事务实现机制 BlueSkator spring代理事务
    Spring是以代理的方式实现对事务的管理。我们在Action中所使用的Service对象，其实是代理对象的实例，并不是我们所写的Service对象实例。既然是两个不同的对象，那为什么我们在Action中可以象使用Service对象一样的使用代理对象呢？为了说明问题，假设有个Service类叫AService，它的Spring事务代理类为AProxyService，AService实现了一个接口
  • bootstrap源码学习与示例：bootstrap-dropdown（转帖） BreakingBad bootstrapdropdown
    bootstrap-dropdown组件是个烂东西，我读后的整体感觉。 一个下拉开菜单的设计： <ul class="nav pull-right"> <li id="fat-menu" class="dropdown">
  • 读《研磨设计模式》-代码笔记-中介者模式-Mediator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* * 中介者模式（Mediator）：用一个中介对象来封装一系列的对象交互。 * 中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。 * * 在我看来，Mediator模式是把多个对象（
  • 常用代码记录 chenjunt3 UIExcelJ#
      1、单据设置某行或某字段不能修改 //i是行号,"cash"是字段名称 getBillCardPanelWrapper().getBillCardPanel().getBillModel().setCellEditable(i, "cash", false); //取得单据表体所有项用以上语句做循环就能设置整行了 getBillC
  • 搜索引擎与工作流引擎 comsci 算法工作搜索引擎网络应用
          最近在公司做和搜索有关的工作，(只是简单的应用开源工具集成到自己的产品中)工作流系统的进一步设计暂时放在一边了，偶然看到谷歌的研究员吴军写的数学之美系列中的搜索引擎与图论这篇文章中的介绍，我发现这样一个关系(仅仅是猜想)   -----搜索引擎和流程引擎的基础--都是图论，至少像在我在JWFD中引擎算法中用到的是自定义的广度优先
  • oracle Health Monitor daizj oracleHealth Monitor
    About Health Monitor Beginning with Release 11g, Oracle Database includes a framework called Health Monitor for running diagnostic checks on the database. About Health Monitor Checks Health M
  • JSON字符串转换为对象 dieslrae javajson
        作为前言,首先是要吐槽一下公司的脑残编译部署方式,web和core分开部署本来没什么问题,但是这丫居然不把json的包作为基础包而作为web的包,导致了core端不能使用,而且我们的core是可以当web来用的(不要在意这些细节),所以在core中处理json串就是个问题.没办法,跟编译那帮人也扯不清楚,只有自己写json的解析了.   
  • C语言学习八结构体，综合应用，学生管理系统 dcj3sjt126com C语言
    实现功能的代码： # include <stdio.h> # include <malloc.h> struct Student { int age; float score; char name[100]; }; int main(void) { int len; struct Student * pArr; int i,
  • vagrant学习笔记 dcj3sjt126com vagrant
    想了解多主机是如何定义和使用的, 所以又学习了一遍vagrant   1. vagrant virtualbox 下载安装 https://www.vagrantup.com/downloads.html https://www.virtualbox.org/wiki/Downloads   查看安装在命令行输入vagrant     2.
  • 14.性能优化-优化-软件配置优化 frank1234 软件配置性能优化
    1.Tomcat线程池 修改tomcat的server.xml文件： <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads="1200" m
  • 一个不错的shell 脚本教程 入门级 HarborChung linuxshell
    一个不错的shell 脚本教程 入门级 建立一个脚本 　　Linux中有好多中不同的shell，但是通常我们使用bash (bourne again shell) 进行shell编程，因为bash是免费的并且很容易使用。所以在本文中笔者所提供的脚本都是使用bash（但是在大多数情况下，这些脚本同样可以在 bash的大姐，bourne shell中运行）。 　　如同其他语言一样
  • Spring4新特性——核心容器的其他改进 jinnianshilongnian spring动态代理spring4依赖注入
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • Linux设置tomcat开机启动 liuxingguome tomcatlinux开机自启动
    执行命令sudo gedit /etc/init.d/tomcat6 然后把以下英文部分复制过去。（注意第一句#!/bin/sh如果不写，就不是一个shell文件。然后将对应的jdk和tomcat换成你自己的目录就行了。 #!/bin/bash # # /etc/rc.d/init.d/tomcat # init script for tomcat precesses
  • 第13章 Ajax进阶（下） onestopweb Ajax
    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/
  • Troubleshooting Crystal Reports off BW blueoxygen BO
    http://wiki.sdn.sap.com/wiki/display/BOBJ/Troubleshooting+Crystal+Reports+off+BW#TroubleshootingCrystalReportsoffBW-TracingBOE   Quite useful, especially this part: SAP BW connectivity For t
  • Java开发熟手该当心的11个错误 tomcat_oracle javajvm多线程单元测试
    #1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为
  • 正则表达式大全 yang852220741 html编程正则表达式
    今天向大家分享正则表达式大全，它可以大提高你的工作效率 正则表达式也可以被当作是一门语言，当你学习一门新的编程语言的时候，他们是一个小的子语言。初看时觉得它没有任何的意义，但是很多时候，你不得不阅读一些教程，或文章来理解这些简单的描述模式。 一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他