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

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,前端,鼠标事件)

  • HTML音频、视频--课后作业实践 Heetun html5
    浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2
  • H3C Network命令详解 weixin_30471561
    转载于:https://www.cnblogs.com/fanweisheng/p/11156926.html
  • 深入理解 TypeScript 中的迭代器（Iterators）与生成器（Generators） 念九_ysl typescript前端typescript
    一、为什么需要迭代协议？在现代JavaScript/TypeScript开发中，我们经常需要处理各种集合型数据：数组、Map、Set甚至是自定义数据结构。ES6引入的迭代协议（IterationProtocols）正是为了解决统一遍历机制的问题。通过迭代器模式，我们可以：为不同的数据结构提供统一的访问接口实现惰性计算（LazyEvaluation）支持现代语言特性（for...of,扩展运算符等）
  • CSS中的伪类与伪元素：让样式更加灵活优雅 程序员
    CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。一、伪类（Pseudo-classes）1.1什么是伪类？伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto
  • 如何创建HTML自定义元素：使用 Web Component 的最佳实践 乐闻x WebComponent学习记录前端htmlwebcomponent
    什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的
  • css知识点总结 吃橘子的Crow csshtml前端
    1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是
  • C# Windows Forms点击事件详解 Ro小陌 WindowsC#开发语言c#windows开发语言
    在C#WindowsForms开发中，点击事件是最基础且高频使用的交互机制。以下从底层原理、事件绑定、常见问题及高级用法四个维度进行深度解析：一、点击事件的底层机制消息循环与事件驱动WindowsForms基于Win32消息循环，所有用户操作（如点击）会被转换为WM_LBUTTONDOWN、WM_LBUTTONUP等消息。.NET通过Application.Run()启动消息循环，将消息路由到对应
  • 游戏成瘾与学习动力激发策略研究——了解“情感解离”“创伤理论” *TQK* 知也思维认知心理学研究
    一、情感解离（EmotionalDissociation）定义：情感解离是一种心理防御机制，指个体在经历无法承受的情绪压力或创伤时，通过切断情感体验与认知、记忆或现实感知的联系来保护自我。它不是简单的“麻木”，而是大脑为应对极端刺激而启动的“紧急逃生通道”。核心特征1、意识分裂现实解离：感到身体或环境“不真实”（如玩游戏时出现“灵魂出窍”般的视角抽离）情感隔离：能描述事件但无法体验对应情绪（如你通
  • 如何在MySQL中创建定时任务？ 数据库mysql
    在mysql中我们可以可以通过事件调度器(EventScheduler)，让MySQL定时为我们执行一些任务。例如：在MySQL中实现每天凌晨0点定时清空指定的test表，并在一个月后自动停止该定时任务。以下是完整步骤：步骤1：启用MySQL事件调度器默认情况下事件调度器可能关闭，需手动启用：--临时启用（重启失效）SETGLOBALevent_scheduler=ON;--永久启用（修改配置文件
  • OpenTiny技术直播讲师招募：与开源同行，点亮技术影响力！ 前端组件化低代码开源
    OpenTiny企业级前端开发解决方案，正在寻找热爱分享的技术达人！加入我们的直播讲师团，与众多开发者一起分享你的经验，推动技术普惠，同时打造个人技术影响力！报名链接：https://www.wjx.cn/vm/tw7FOgC.aspx#
  • 前端架构 —— 脚手架的本地调试方法 mask-li 前端
    脚手架本地link标准流程链接本地脚手架：cdyour-cli-dirnpmlink在当前node全局依赖中创建一个脚手架并且指向文件目录，而且会创建一个可执行文件链接本地库文件：cdyour-lib-dirnpmlinkcdyour-cli-dirnpmlinkyour-lib取消链接本地库文件：cdyour-lib-dirnpmunlinkcdyour-cli-dirnpmunlinkyour
  • 【css酷炫效果】纯CSS实现动态云雾效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra
  • 【css酷炫效果】纯CSS实现流动岩浆纹理效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi
  • 【css酷炫效果】实现鱼群游动动态效果 冰夏之夜影 web前端css前端
    【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接：点击下载缘在开发系统功能的时候，无意间看到了小鱼游动特效，感觉很有意思，就在网上找了相关教程，分享给大家。创作背景刚看到csdn出活动了，赶时间，直接上代码。css代码.container{background-color:transparent;position:f
  • 数据库 + Spring Boot + Vue 全栈交互逻辑详解 代码CC Java项目-开发springbootvue.jsmysql数据库开发语言
    目录整体架构概述技术栈说明数据库设计规范SpringBoot后端架构Vue前端架构完整交互流程关键技术实现细节安全与性能优化异常处理机制整体架构概述graphTDA[Vue前端]-->|HTTP请求|B(SpringBoot后端)B-->|JDBC/ORM|C[(数据库)]C-->|返回数据|BB-->|JSON响应|AA-->|状态管理|D[VuexStore]B-->|缓存|E[Redis]B
  • 使用 Vue 2.x + Element UI 搭建后台管理系统详解 不知名靓仔 vue.jsui前端
    引言Vue.js是一个非常流行的前端框架，而ElementUI是基于Vue2.x的一套完整的UI组件库，非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用Vue2.x和ElementUI来搭建一个后台管理系统，包括项目初始化、路由配置、状态管理、权限验证等关键步骤。vue2后台管理项目源码合集下载地址见最下方1.环境准备确保你的开发环境中已安装Node.js和npm。接下来，我们将使用V
  • Vue.js + Element UI 实战：手把手教你实现评论关键词过滤功能，新手必学！》 《前端开发必备技能：Vue 2 + Element UI 实现评论敏感词过滤，完整代码分享》 《新手友 南北极之间 vue.jsui前端敏感词关键词敏感词过滤
    效果图【定制化开发服务，让您的项目领先一步】如有需求，直接私信留下您的联系方式。谢谢。我的邮箱：[email protected]以下是基于Vue2和ElementUI的评论关键词过滤功能实现，使用CDN引入Vue和ElementUI，方便在浏览器中直接预览。在线预览：Vue2+ElementUI实现评论关键词过滤功能目录需求场景技术选型实现步骤引入Vue2和ElementUI创建评论界面实现关键
  • QT多媒体播放器类：QMediaPlayer 程序先锋 QT界面开发qt开发语言
    QMediaPlayer是QtMultimedia模块中的核心类，用于播放音频和视频媒体文件。它支持本地文件、网络流媒体以及实时数据源，具备播放控制、状态管理、元数据访问等功能。QMediaPlayer的基本用法可能包括设置媒体源、控制播放（播放、暂停、停止）、调整音量、监听播放状态变化等。1.信号（Signals）信号用于通知外部对象播放器状态、媒体属性和错误事件的变化。（1）媒体改变voidm
  • deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师... CoderBin_ 与deepseek的对话前端
    一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）
  • Storm实战常见问题及解决方案 Lzy失控的 storm-分布式流式计算bigdata-大数据
    原文seehttp://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html1关于Storm集群1.1关于storm集群的环境变量配置问题安装好JDK后，需要配置环境变量，通常情况下出于经验，我们往往会修改/etc/profile的值进行环境变量配置，但这在安装JDK以及后面安装的storm集群、zookeeper集群以及metaq集群时会出问题，这时候我们需
  • 【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用 金枝玉叶9 程序员知识储备1程序员知识储备2程序员知识储备3rust开发语言后端
    《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架，它让开发者可以使用Web技术（如HTML、CSS、JavaScript）来创建前端，同时利用Rust编写后端逻辑，确保应用运行高效且轻量。在这个教程中，开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可
  • element ui 封装Table组件 沃野_juededa ui
    1.首先npmielement-ui-S安装element-ui2.引入Element在main.js中写入以下内容：importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);n
  • iOS 模块化架构设计：主流方案与实现详解 Ethan. L 架构ios架构
    随着iOS工程规模的扩大，模块化设计成为提升代码可维护性、团队协作效率和开发灵活性的关键。本文将探讨为什么需要模块化，介绍四种主流的模块化架构方案（协议抽象、依赖注入、路由机制和事件总线），并通过代码示例和对比表格帮助开发者选择适合的方案。一、为什么需要模块化？1.代码可维护性随着工程规模的增长，代码量迅速增加，模块化可以将代码拆分为独立的功能模块，降低代码复杂度，提升可维护性。2.团队协作效率模
  • 【含文档+PPT+源码】基于微信小程序农家乐美食餐厅预约推广系统 编程毕设 微信小程序美食小程序
    项目介绍本课程演示的是一款基于微信小程序农家乐美食餐厅预约推广系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料2.带你从零开始部署运行本套系统3.该项目附带的源码资料可作为毕设使用该系统功能架构图如下：技术栈说明技术栈：后端：SpringBoot+Vue+ElementUI（后端是前后端分离的）前端：Un
  • 【H2O2 | 软件开发】前端深拷贝的实现 过期的H2O2 【H2O2】全栈面试题javascript开发语言ecmascript前端
    目录前言开篇语准备工作正文概述JSON方法递归其他结束语前言开篇语本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。如果您需要为面试八股文做准备，笔者建议重点关注加粗强调部分，它们是概念中的关键词。准备工作软件：【参考版本】VisualStudioCode系统版本：Win10/11正文概述概括地来说，前端实
  • 能否在编辑器中一键导入Word文档？ 2501_90646763 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • css3选择器详解 丸子猪的dady css3前端csshtml
    CSS3选择器我们之前学过CSS的选择器，比如：div标签选择器.box类名选择器#boxid选择器divp后代选择器div.box交集选择器div,p,span并集选择器div>p子代选择器*:通配符div+p:选中div后面相邻的第一个pdiv~p:选中的div后面所有的p属性选择器属性选择器的标志性符号是[]。匹配含义：^：开头$：结尾*：包含格式：E[title]选中页面的E元素，并且E存
  • css动画详解 丸子猪的dady css前端html
    过渡：transitiontransition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。transition包括以下属性：transition-property:all;如果希望所有的属性都发生过渡，就使用all。transition-property:width，意思是只让盒子的宽度在变化时进行过渡transiti
  • HTMl详解 丸子猪的dady html前端
    拖拽目标元素的事件监听：（应用于目标元素）ondragenter当拖拽元素进入时调用ondragover当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）ondrop当在目标元素上松开鼠标时调用ondragleave当鼠标离开目标元素时调用.box{width:200px;height:200px;background-color:green;}//绑定拖拽事件
  • 【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现生物识别（指纹识别）应用 广龙宇 Tauri2应用开发一起学Rustrust开发语言后端
    前言Tauri，作为一个新兴的跨平台应用开发框架，允许开发者使用Web前端技术构建界面，并利用Rust的高性能和安全性编写后端逻辑。这种架构巧妙地结合了Web的灵活性和原生应用的性能，为开发者提供了一种构建高效、跨平台应用的全新选择。而生物识别技术，如指纹识别、面部识别等，则为应用安全提供了更高级别的保障。将生物识别技术集成到Tauri应用中，可以提升用户体验，增强应用安全性。试想一下，用户只需轻
  • 面向对象面向过程 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其他