满脑子技术的前端工程师
满脑子技术的前端工程师

js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）

系列文章目录

文章目录

  • 系列文章目录
  • 背景与效果图
    • 1.背景如下（功能图）：
    • 2.效果图如下：
      • 拖拽后的效果
      • 缩放的效果
      • 放大的效果
  • 一、功能：支持鼠标长按拖拽
    • 1.鼠标事件：
    • 2.拖拽功能流程
    • 3.拖拽部分代码如下
  • 二、功能：滚轮控制图片放大缩小
    • 1.鼠标事件(推荐使用onwheel；mousewheel存在安全隐患)
    • 2.功能流程：
    • 3.具体代码如下：
  • 三、案例功能的完整代码如下：
  • 四、总结(一定要看，功能是有坑的)

背景与效果图

1.背景如下（功能图）：

该功能的需求点事2个月前的一个需求，当时采用的是Element-UI中的image图片做的一个功能，但是不能满足产品真实的需求，只能定制化自己封装。

该功能在Vue2 的element-UI中还是比较鸡肋的 ⬇️ ⬇️
Element-UI

该功能在Emenent-UI-plus（vue3）版本已经很好的支持了。 完整功能如下link⬇️ ⬇️
Element-Plus的Image标签

2.效果图如下：

拖拽后的效果

缩放的效果

js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）_第1张图片

放大的效果

一、功能：支持鼠标长按拖拽

1.鼠标事件：

onmouseup : 按键弹起事件
onmousemove ：鼠标移动事件
onmousedown ：鼠标按下事件

2.拖拽功能流程

1.给 需要移动的盒子 添加鼠标按下事件 ： onmousedown 盒子要添加绝对定位 。

2.并且给全局(window)注册鼠标移动事件 ： onmousemove

3.给需要移动的盒子添加鼠标距离左侧和顶部的长度

4.在鼠标按键松开后把全局注册的鼠标事件移除 (到此拖拽的功能基本完成)

这里如果使用的是img标签作为图片展示的话，一定要把img上的长按拖拽事件先去除，要不然就回出现BUG

3.拖拽部分代码如下

  var divMove = document.querySelector('div')
    divMove.onmousedown = function (e) {
        window.onmousemove = function (event) {
            divMove.style.left=event.clientX-e.target.offsetWidth/2+'px'
            divMove.style.top=event.clientY-e.target.offsetHeight/2+'px'
        }
    }
    divMove.onmouseup=function(){
        window.onmousemove =null
    }

二、功能：滚轮控制图片放大缩小

1.鼠标事件(推荐使用onwheel；mousewheel存在安全隐患)

1.onwheel : wheel当用户旋转定点设备（通常是鼠标）上的滚轮按钮时会触发该事件。(现在主流的浏览器都支持该事件)

2.mousewheel : 操作鼠标滚轮或类似设备时异步触发该事件。它由MouseWheelEvent界面表示

2.功能流程：

1.获取需要放大缩小的盒子DOM 给盒子绑定onwheel事件（这个事件里面存在在谷歌和火狐上放大和缩小的Api不准确，建议先尝试确认下）

2.给需要放大缩小的盒子DOM 添加Css样式 scale控制图片的缩放

3.具体代码如下：

     //scale是为了控制图片大小为正常渲染
    let  scale = 1
    divMove.onwheel=function(e){
       
        if(e.wheelDelta>0){
            scale+=0.05
            divMove.style.transform=`scale(${scale})`
        }else{
            scale-=0.05
            divMove.style.transform=`scale(${scale})`
        }
    }

三、案例功能的完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            background-color: antiquewhite;
            position: absolute;
           background-image: url("https://top-mvp-img.xhscdn.com/miniimg/1000g1i81etmd8is4o0003oqd6mc015uq3uh1hcg");
           background-repeat: no-repeat;
           background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <button>重置</button>
    <div><img style=" width: 100%; visibility: hidden;" src="https://top-mvp-img.xhscdn.com/miniimg/1000g1i81etmd8is4o0003oqd6mc015uq3uh1hcg" alt=""></div>
</body>
<script>
    var button =document.querySelector('button')
    button.onclick=function(){
        divMove.style.top=40+'px'
        divMove.style.left=10+'px'
        scale=1
        divMove.style.transform=`scale(${scale})`
        
    }
    
    var divMove = document.querySelector('div')
    divMove.onmousedown = function (e) {
        window.onmousemove = function (event) {
            divMove.style.left=event.clientX-e.target.offsetWidth/2+'px'
            divMove.style.top=event.clientY-e.target.offsetHeight/2+'px'
        }
    }
    divMove.onmouseup=function(){
        window.onmousemove =null
    }
    let  scale = 1
    divMove.onwheel=function(e){
       
        if(e.wheelDelta>0){
            scale+=0.05
            divMove.style.transform=`scale(${scale})`
        }else{
            scale-=0.05
            divMove.style.transform=`scale(${scale})`
        }
    }
</script>

</html>

四、总结(一定要看，功能是有坑的)

在完整的代码里面给出了，多种解决图片拖拽和onmousemove冲突的问题，第一种：可以使用background-image代替img标签；第二种：可以使用img标签添加css的属性解决这个问题。

只是写了简易的功能，主要是为了给大家提供思路，可以通过这个小案例，完善自己的需求。

你可能感兴趣的:(JavaScript,Event事件,HTML｜CSS,javascript,前端,鼠标事件)

  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 《大清方方案》| 第二话 谁佐清欢
    和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 一个历史事件和查理一世走上断头台有很大关系，这个事件是什么？ 王老师聊围棋
    今天我要讲的历史事件，查理一世被处死的始末。其实查理一世给被处死的时候，与一个事件有很大的联系。这个事件是“普莱德清洗”。提到这个事件，我们不得不提到一个人，这个人就是克伦威尔。可以说，查理一世能够走上断头台，克伦威尔有很大的功劳。为什么这么说呢。那我们就成英国内战的终结说起吧。我们都知道英国的内战是有保王党挑起来。在保王党军队一路凯歌进攻的同时。就在1645年6月14日，在纳西比荒原上进行最后的
  • 4招写出高价值文章 zhiliner
    文章写得泛泛是因为思考得不够深，思考得越深文章会越有价值。拿到一个主题一定要去深入挖掘事件背后的东西，比如人物困境以及趋势性的东西。写作过程中有几个深度思考的方法一、解剖，让旧素材焕发新意作为一个写作者，我们能够做的最大贡献，就是给出自己看世界的角度。解剖其实就是把这个话题相关的信息都列出来，详细的列出来，看清楚它的内部。我们看到一个老话题或者一段旧素材的时候，不要只看这个素材或者话题本身，一定要
  • 2022-10-10 幸福芳芳
    10.10日觉察日记1.事件：开晨会员工来不齐，路远的请假，离得近的也请假，一律不批！2.感受：生气，气愤（情绪如何转化或使用）3.想法：1.今年已经很少开晨会了，非必要不会通知开会的，临近点了再打电话请假，又不是特别忙的季节，借口都会找～～2.不来的按公司标准执行负激励，待岗处理！我为你们负责，你们安全重要会议都不参加，自己都不为自己负责！以后有事也别找我！尤其是经销商老板，自己都不清楚自己用工
  • 起始 美丽的涵教主
    “叮零零”上课了响了，江雨一路狂奔。“江雨你怎么又迟到，不知道自己成绩不好吗，好不好好学习！”严老师大声地对江雨说道。“小雨，你早上怎么迟到了？”好友曹雪担忧了起来。“没事，早上只是起晚了！”江雨满不在意地回答道，“雪儿，你知道最近小卖部要招营业员，我们去应聘吧！”“你最近是不是缺钱呀！”曹雪的其实没有错，江雪爸爸的公司现在面临着倒闭事件，手上急需用钱。“没有，我爸爸的公司差不多恢复了往日的正常，
  • 黄景瑜工作人员怒怼营销号！肖战事件就是他的前车之鉴 板凳吃瓜小分队
    无论社会怎样浮躁，我们自己也不可以浮躁。战胜浮躁的关键是明白自己真正的需要，保持一颗平常心，不要盲目攀比，不要羡慕别人，更不要唯利是图。一辈子很短，我们不能总是望着别人的精彩，羡慕着别人的人生，而忘记了经营自己生活，要知道，通过努力，你也能成为让人仰望的明星。如今，随着娱乐产业越来越成熟，每年的新星也是扎堆冒出。在我看来，与前几年不同的是，如今的新生代质量明显好过从前。“更专业了，更有礼貌了”也是
  • 【ARM Cortex-M 系列 2.3 -- Cortex-M7 Debug event 详细介绍】 主公讲 ARM #ARM系列arm开发debugevent
    请阅读【嵌入式开发学习必备专栏】文章目录Cortex-M7DebugeventDebugeventsCortex-M7Debugevent在ARMCortex-M7架构中，调试事件（DebugEvent）是由于调试原因而触发的事件。一个调试事件会导致以下几种情况之一发生：进入调试状态：如果启用了停滞调试（HaltingDebug），一个调试事件会使处理器在调试状态下停滞。通过将DHCSR.C_DE
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 面向对象面向过程 3213213333332132 java
    面向对象：把要完成的一件事，通过对象间的协作实现。 面向过程：把要完成的一件事，通过循序依次调用各个模块实现。 我把大象装进冰箱这件事为例，用面向对象和面向过程实现，都是用java代码完成。 1、面向对象 package bigDemo.ObjectOriented; /** * 大象类 * * @Description * @author FuJian
  • Java Hotspot: Remove the Permanent Generation bookjovi HotSpot
      openjdk上关于hotspot将移除永久带的描述非常详细，http://openjdk.java.net/jeps/122   JEP 122: Remove the Permanent Generation Author Jon Masamitsu Organization Oracle Created 2010/8/15 Updated 2011/
  • 正则表达式向前查找向后查找,环绕或零宽断言 dcj3sjt126com 正则表达式
    向前查找和向后查找 1. 向前查找：根据要匹配的字符序列后面存在一个特定的字符序列(肯定式向前查找)或不存在一个特定的序列(否定式向前查找)来决定是否匹配。.NET将向前查找称之为零宽度向前查找断言。     对于向前查找，出现在指定项之后的字符序列不会被正则表达式引擎返回。 2. 向后查找：一个要匹配的字符序列前面有或者没有指定的
  • BaseDao 171815164 seda
    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.PreparedStatement; import java.sql.ResultSet; public class BaseDao { public Conn
  • Ant标签详解--Java命令 g21121 Java命令
            这一篇主要介绍与java相关标签的使用         终于开始重头戏了，Java部分是我们关注的重点也是项目中用处最多的部分。           1
  • [简单]代码片段_电梯数字排列 53873039oycg 代码
           今天看电梯数字排列是9 18 26这样呈倒N排列的,写了个类似的打印例子，如下:       import java.util.Arrays; public class 电梯数字排列_S3_Test { public static void main(S
  • Hessian原理 云端月影 hessian原理
    Hessian 原理分析 一．      远程通讯协议的基本原理 网络通信需要做的就是将流从一台计算机传输到另外一台计算机，基于传输协议和网络 IO 来实现，其中传输协议比较出名的有 http 、 tcp 、 udp 等等， http 、 tcp 、 udp 都是在基于 Socket 概念上为某类应用场景而扩展出的传输协
  • 区分Activity的四种加载模式----以及Intent的setFlags aijuans android
      在多Activity开发中，有可能是自己应用之间的Activity跳转，或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例，而不是产生大量重复的Activity。 这需要为Activity配置特定的加载模式，而不是使用默认的加载模式。 加载模式分类及在哪里配置 Activity有四种加载模式： standard singleTop
  • hibernate几个核心API及其查询分析 antonyup_2006 html.netHibernatexml配置管理
    (一)  org.hibernate.cfg.Configuration类         读取配置文件并创建唯一的SessionFactory对象.(一般,程序初始化hibernate时创建.)         Configuration co
  • PL/SQL的流程控制 百合不是茶 oraclePL/SQL编程循环控制
    PL/SQL也是一门高级语言,所以流程控制是必须要有的,oracle数据库的pl/sql比sqlserver数据库要难,很多pl/sql中有的sqlserver里面没有   流程控制; 分支语句 if 条件 then 结果 else 结果 end if ; 条件语句 case when 条件 then 结果; 循环语句 loop
  • 强大的Mockito测试框架 bijian1013 mockito单元测试
    一.自动生成Mock类        在需要Mock的属性上标记@Mock注解，然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.initMocks(this);生成Mock类即可。二.自动注入Mock类到被测试类  &nbs
  • 精通Oracle10编程SQL(11)开发子程序 bijian1013 oracle数据库plsql
    /* *开发子程序 */ --子程序目是指被命名的PL/SQL块，这种块可以带有参数，可以在不同应用程序中多次调用 --PL/SQL有两种类型的子程序：过程和函数 --开发过程 --建立过程：不带任何参数 CREATE OR REPLACE PROCEDURE out_time IS BEGIN DBMS_OUTPUT.put_line(systimestamp); E
  • 【EhCache一】EhCache版Hello World bit1129 Hello world
    本篇是EhCache系列的第一篇，总体介绍使用EhCache缓存进行CRUD的API的基本使用，更细节的内容包括EhCache源代码和设计、实现原理在接下来的文章中进行介绍   环境准备 1.新建Maven项目   2.添加EhCache的Maven依赖 <dependency> <groupId>ne
  • 学习EJB3基础知识笔记 白糖_ beanHibernatejbosswebserviceejb
    最近项目进入系统测试阶段，全赖袁大虾领导有力，保持一周零bug记录，这也让自己腾出不少时间补充知识。花了两天时间把“传智播客EJB3.0”看完了，EJB基本的知识也有些了解，在这记录下EJB的部分知识，以供自己以后复习使用。   EJB是sun的服务器端组件模型，最大的用处是部署分布式应用程序。EJB (Enterprise JavaBean)是J2EE的一部分，定义了一个用于开发基
  • angular.bootstrap boyitech AngularJSAngularJS APIangular中文api
    angular.bootstrap 描述：     手动初始化angular。     这个函数会自动检测创建的module有没有被加载多次，如果有则会在浏览器的控制台打出警告日志，并且不会再次加载。这样可以避免在程序运行过程中许多奇怪的问题发生。   使用方法：     angular .
  • java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数 bylijinnan java
    public class SearchInShiftedArray { /** * 题目：给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数。 * 请在这个特殊数组中找出给定的整数。 * 解答： * 其实就是“旋转数组”。旋转数组的最小元素见http://bylijinnan.iteye.com/bl
  • 天使还是魔鬼？都是我们制造 ducklsl 生活教育情感
    ----------------------------剧透请原谅，有兴趣的朋友可以自己看看电影，互相讨论哦！！！     从厦门回来的动车上，无意中瞟到了书中推荐的几部关于儿童的电影。当然，这几部电影可能会另大家失望，并不是类似小鬼当家的电影，而是关于“坏小孩”的电影！     自己挑了两部先看了看，但是发现看完之后，心里久久不能平
  • [机器智能与生物]研究生物智能的问题 comsci 生物
          我想,人的神经网络和苍蝇的神经网络,并没有本质的区别...就是大规模拓扑系统和中小规模拓扑分析的区别....       但是,如果去研究活体人类的神经网络和脑系统,可能会受到一些法律和道德方面的限制,而且研究结果也不一定可靠,那么希望从事生物神经网络研究的朋友,不如把
  • 获取Android Device的信息 dai_lm android
    String phoneInfo = "PRODUCT: " + android.os.Build.PRODUCT; phoneInfo += ", CPU_ABI: " + android.os.Build.CPU_ABI; phoneInfo += ", TAGS: " + android.os.Build.TAGS; ph
  • 最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现 datamachine java算法字符串匹配
    原文：http://www.javacodegeeks.com/2013/11/java-implementation-of-optimal-string-alignment.html------------------------------------------------------------------------------------------------------------
  • 小学5年级英语单词背诵第一课 dcj3sjt126com englishword
    long 长的 show 给...看，出示 mouth 口，嘴 write 写   use 用，使用 take 拿，带来 hand 手 clever 聪明的   often 经常 wash 洗 slow 慢的 house 房子   water 水 clean 清洁的 supper 晚餐 out 在外   face 脸，
  • macvim的使用实战 dcj3sjt126com macvim
    macvim用的是mac里面的vim, 只不过是一个GUI的APP, 相当于一个壳   1. 下载macvim https://code.google.com/p/macvim/   2. 了解macvim :h               vim的使用帮助信息 :h macvim  
  • java二分法查找 蕃薯耀 java二分法查找二分法java二分法
    java二分法查找 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 11:40:03 星期二 http:/
  • Spring Cache注解+Memcached hanqunfeng springmemcached
    Spring3.1 Cache注解  依赖jar包： <!-- simple-spring-memcached --> <dependency> <groupId>com.google.code.simple-spring-memcached</groupId> <artifactId>simple-s
  • apache commons io包快速入门 jackyrong apache commons
    原文参考 http://www.javacodegeeks.com/2014/10/apache-commons-io-tutorial.html   Apache Commons IO 包绝对是好东西，地址在http://commons.apache.org/proper/commons-io/，下面用例子分别介绍：   1）  工具类   2
  • 如何学习编程 lampcy java编程C++c
    首先,我想说一下学习思想.学编程其实跟网络游戏有着类似的效果.开始的时候,你会对那些代码,函数等产生很大的兴趣,尤其是刚接触编程的人,刚学习第一种语言的人.可是,当你一步步深入的时候,你会发现你没有了以前那种斗志.就好象你在玩韩国泡菜网游似的,玩到一定程度,每天就是练级练级,完全是一个想冲到高级别的意志力在支持着你.而学编程就更难了,学了两个月后,总是觉得你好象全都学会了,却又什么都做不了,又没有
  • 架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy nannan408 Spring3
    1.前言。    如题。 2.描述。    @DependsOn用于强制初始化其他Bean。可以修饰Bean类或方法，使用该Annotation时可以指定一个字符串数组作为参数，每个数组元素对应于一个强制初始化的Bean。 @DependsOn({"steelAxe","abc"}) @Comp
  • Spring4+quartz2的配置和代码方式调度 Everyday都不同 代码配置spring4quartz2.x定时任务
    前言：这些天简直被quartz虐哭。。因为quartz 2.x版本相比quartz1.x版本的API改动太多，所以，只好自己去查阅底层API……   quartz定时任务必须搞清楚几个概念： JobDetail——处理类 Trigger——触发器，指定触发时间，必须要有JobDetail属性，即触发对象 Scheduler——调度器，组织处理类和触发器，配置方式一般只需指定触发
  • Hibernate入门 tntxia Hibernate
      前言   使用面向对象的语言和关系型的数据库，开发起来很繁琐，费时。由于现在流行的数据库都不面向对象。Hibernate 是一个Java的ORM（Object/Relational Mapping）解决方案。   Hibernte不仅关心把Java对象对应到数据库的表中，而且提供了请求和检索的方法。简化了手工进行JDBC操作的流程。   如
  • Math类 xiaoxing598 Math
    一、Java中的数字（Math）类是final类，不可继承。 1、常数 PI：double圆周率 E：double自然对数 2、截取（注意方法的返回类型） double ceil(double d) 返回不小于d的最小整数 double floor(double d) 返回不大于d的整最大数 int round(float f) 返回四舍五入后的整数 long round
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他