JS放大镜特效（兼容版）

原理

1.鼠标在小图片上移动时，通过捕获鼠标在小图片上的位置，定位大图片的相应位置

设计

1.页面元素：小图片、大图片、放大镜

2.技术点：事件捕获、定位

1）onmouseover：会在鼠标指针移动到指定的对象上时发生

2）onmouseout：会在鼠标指针移出指定的对象时发生

3）onmousemove：会在鼠标指针移动时发生

4）各边距表示

JS放大镜特效（兼容版）_第1张图片

5）ofgsetLeft与style.left对比

style.left返回的是字符串，比如：30px，offsetLeft返回的是数值30

style.left是可读写的，offsetLeft是只读写的，所以该改变div的位置，只能修改style.left

style.left的值需事件定义，否则取到的值为空

3.难点：计算

objMark.onmousemove = function (ev) {
　　var _event = ev || window.event;  //兼容多个浏览器的event参数模式

   var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
   var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
　　//当放大镜出超出横向范围的时候
   if (left < 0) {
       left = 0;
   } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
       left = objMark.offsetWidth - objFloatBox.offsetWidth;
   }
　　//当放大镜查出纵向范围的时候
   if (top < 0) {
        top = 0;
   } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
        top = objMark.offsetHeight - objFloatBox.offsetHeight;

   }

   objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言
   objFloatBox.style.top = top + "px";

   var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
   var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

   objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
   objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}

 

源码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #demo {
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }

        #small-box {
            position: relative;
            z-index: 1;
        }

        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }

        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
    </style>
    <script>

        //页面加载完毕后执行
        window.onload = function () {

            var objDemo = document.getElementById("demo");
            var objSmallBox = document.getElementById("small-box");
            var objMark = document.getElementById("mark");
            var objFloatBox = document.getElementById("float-box");
            var objBigBox = document.getElementById("big-box");
            var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

            objMark.onmouseover = function () {
                objFloatBox.style.display = "block"
                objBigBox.style.display = "block"
            }

            objMark.onmouseout = function () {
                objFloatBox.style.display = "none"
                objBigBox.style.display = "none"
            }

            objMark.onmousemove = function (ev) {

                var _event = ev || window.event;  //兼容多个浏览器的event参数模式

                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

                if (left < 0) {
                    left = 0;
                } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
                    left = objMark.offsetWidth - objFloatBox.offsetWidth;
                }

                if (top < 0) {
                    top = 0;
                } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
                    top = objMark.offsetHeight - objFloatBox.offsetHeight;

                }

                objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言
                objFloatBox.style.top = top + "px";

                var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

                objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
                objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
            }
        }
    </script>
</head>
<body>
<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="macbook-big.jpg"/>
    </div>
</div>
</body>
</html>

效果：

JS放大镜特效（兼容版）_第2张图片

 

你可能感兴趣的:(js)

  • python的django框架http请求_Django框架学习——Django（四）请求与响应 weixin_39895881
    请求回想一下，利用HTTP协议向服务器传参有几种途径？提取URL的特定部分，如/weather/beijing/2018，可以在服务器端的路由中用正则表达式截取；查询字符串（querystring)，形如key1=value1&key2=value2；请求体（body）中发送的数据，比如表单数据、json、xml；在http报文的头（header）中。1、URL路径参数在定义路由URL时，可以使用
  • Docker镜像加速配置记录 土豆沒加 docker容器运维
    编辑/etc/docker/daemon.json，没有的话就新建一个，文件内容如下{"registry-mirrors":["https://docker.registry.cyou","https://docker-cf.registry.cyou","https://dockercf.jsdelivr.fyi","https://docker.jsdelivr.fyi","https://d
  • 探索未来科技：PositronV3 - 高性能全栈Web框架 毕艾琳
    探索未来科技：PositronV3-高性能全栈Web框架去发现同类优质开源项目:https://gitcode.com/是一个强大且灵活的全栈Web开发框架，专为高效、可扩展和易于维护的应用程序设计。它集合了现代前端和后端技术，提供了一站式解决方案，让开发者能够快速构建复杂的Web应用程序。技术分析PositronV3的核心架构基于Node.js，利用其非阻塞I/O模型提供了高性能的服务端处理能力
  • ks 弹幕 评论解密 分析 2766958292 pythonjavago快手弹幕弹幕probuf
    声明:本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！逆向分析url="live_api/liveroom/recall"这个接口就是评论内容headers={"Accept":"application/json,text/plain,*/*","Accept-Language":"
  • java注释转json插件开发实战 java插件maven
    目的将java的代码注释转换为json格式，并写入文件本文介绍了完整的开发流程及如何使用运行环境jdk1.8maven3.x设计思想系统构思编译完成的class里没有注释的，所以注释信息只有在编译代码时存储起来将能够生成javadoc.json的代码做成maven插件关键技术与算法需要实现Doclet必须引入下述jar包,来导入com.sun.javadoc.Docletcom.suntools1
  • 框架基本知识总结 Day9 小斌的Debug日记 vuevue.js
    Node.jsNode.js是一个基于ChromeV8JavaScript引擎构建的JavaScript运行环境。它使得开发者能够在服务器端运行JavaScript，而不仅仅是在浏览器中运行。SE6的一些语法特性1.解构是一种从数组或对象中提取数据并将其赋值给变量的语法。它让你可以更简洁地获取对象或数组中的值，而不需要通过繁琐的方式逐个提取。属性，数组，键值对，方法都可以解构2.模块化类似于jav
  • JSP基础实践项目：创建交互式网站案例 DIY飞跃计划
    本文还有配套的精品资源，点击获取简介：JSP（JavaServerPages）是一种动态网页技术，通过将HTML与Java代码结合，简化了JavaWeb应用的开发。本案例面向初学者，包含多个JSP页面，演示了数据展示、用户输入处理等功能。页面由静态和动态内容组成，展示了JSP生命周期的三个阶段、内置对象、动作标签等核心概念。还包括JavaBean的使用和MVC设计模式的基础。案例包含JSP文件、J
  • JavaScript函数 晚安720 javascript前端开发语言
    函数what函数是一段具有特定功能的代码块。函数必须调用，才可以被执行。函数可以被重复调用，也可以被另一个函数所调用。作用：开发者根据需求定制具有特定功能的函数代码块。分类及定义使用系统函数又名库函数/内置函数alter()log()Number()parseInt()......由JS内部提供的，具有特定功能的函数，供开发者使用。自定义函数自己按照自己的需求，定制具有特定功能的函数。定义函数基本
  • Vue.js 编写组件单元测试 轻口味 VUE.JS入门与实践vue.js
    Vue.js编写组件单元测试今天我们来聊聊如何编写Vue组件的单元测试。单元测试是确保我们组件逻辑正确、功能稳定的重要手段，通过自动化测试，我们可以及时发现问题，避免后期调试困难。下面我会详细介绍如何使用VueTestUtils和Jest来编写组件的单元测试，并提供一些实际的代码示例，帮助你快速上手。为什么需要编写组件单元测试在项目开发过程中，组件通常包含了各种业务逻辑和交互功能。编写单元测试能帮
  • uniapp 自定义页面下拉刷新实现 带刺的茄子 uni-appvueuni-app
    uniapp自定义页面刷新实现//页面：......//js：data{scrollView:'611',isrefresh:false,_isrefresh:false,scrollTop:0,old:{scrollTop:0}}onRefresh(){if(this._isrefresh)return;this._isrefresh=true;if(!this.isrefresh)//界面下拉
  • uni-app在线签名功能，签名生成图片，转base64工具 棋宣
    废话不多说啊，直接上代码，代码我也是看的一个大佬的，但是不知道在哪看的了，就不写转载了这个我简单研究了一个，能直接用，样式可以自己修改。需要配合base64转换的，工具也放在这这里。base64图片转换（这个是一个工具，给大家写上原地址）说明网址：“https://www.npmjs.com/package/image-tools”取消重写确认varx=20;vary=20;vartempPoin
  • 踩坑-vue3.0-uniapp-全局变量prototype失效 cometxd 原型模式javascript前端
    项目场景：踩坑-vue3.0-uniapp-全局变量prototype失效问题描述踩坑-vue3.0-uniapp-全局变量prototype失效main.js中全局变量失效Vue.prototype.$testname="testNAME";解决方案：使用exportfunctioncreateApp(){constapp=createSSRApp(App)app
  • 在React、Vue中使用vanilla-jsoneditor ts_shinian_web reactantdreact.js前端vuejson
    在React中使用vanilla-jsoneditor一、使用vanilla-jsoneditor的场景1.安装依赖1.1安装vanilla-jsoneditor和React1.1安装vanilla-jsoneditor和Vue2.创建一个component组件2.1React创建一个新的组件，用于渲染vanilla-jsoneditor编辑器2.2Vue创建一个新的组件，用于渲染vanilla-
  • chromedriver自动下载 —— python (*￣︶￣)(*^▽^*) python开发语言
    #工作实践webdriver自带的ChromeDriverManager().install()方法，对应的驱动地址自从114版本后没有更新了；隔一段时间就需要手动下载驱动，所以写了一个简单的自动更新方法，还有一些不足，勉强够用吧1、查看源码，大致是保存了一个json文件，每次获取driver最后更新版本，并更新到json文件中；然后下载最新的资源并解压到文件夹2、本来想改源码，但是有修改提示，考
  • 【Elasticsearch】动态计算字段的几种方式 risc123456 Elasticsearchelasticsearch
    在Elasticsearch中，动态计算字段可以通过以下几种方法实现：1.动态映射（DynamicMapping）动态映射允许Elasticsearch在索引文档时自动检测并添加新字段及其数据类型。虽然动态映射主要用于自动处理新字段，但也可以通过动态模板（DynamicTemplates）来控制新字段的映射规则，从而实现一定程度的动态计算字段的功能。示例：```jsonPUT/my_index{"
  • React module CSS（React模块样式） 断下句号 reactjscsshtmlreact.js
    React模块样式导入简介一开始开发react项目使用的是.css样式，在.js文件中引入并使用className，但是项目合并后发现.css样式会影响项目中其他组件的样式，然而在react中又不可以直接编写局部样式（在HTML和vue中可以编写scoped样式），所以改成以模块导入的形式编写组件样式。模块样式导入要点：选择器驼峰命名样式文件后缀名为.module.css在js文件中导入并使用1️
  • 大模型-Tool call、检索增强 Java知识技术分享 ai大模型python数据库condaai
    大模型Toolcall心知天气：https://www.seniverse.com/例子：调用天气接口APIfromopenaiimportOpenAIimportrequestsimportjson"""#####天气接口API密钥获取：https://www.free-api.com/doc/558#####"""#定义调用天气API的函数defget_weather(location,lan
  • LLMs之ReACT-Agent：ReACT-Agent简介、实现及其使用方法(MReACT/AutoReACT)、案例应用(比如采用ReAct框架让LLM稳定输出JSON格式数据)之详细攻略 一个处女座的程序猿 RAG_AgentNLP/LLMs资深文章(前沿/经验/创新)AgentReACT
    LLMs之ReACT-Agent：ReACT-Agent简介、实现及其使用方法(MReACT/AutoReACT)、案例应用(比如采用ReAct框架让LLM稳定输出JSON格式数据)之详细攻略目录相关文章LLMs之ReACT-Agent：ReACT-Agent简介、实现及其使用方法(MReACT/AutoReACT)、案例应用(比如采用ReAct框架让LLM稳定输出JSON格式数据)之详细攻略Re
  • Web自动化之Selenium execute_script函数常用JS脚本 起个破名想半天了 #pythonselenium:从入门到精通seleniumpython自动化javascript
    在Web自动化测试中，Selenium的execute_script函数是一个非常强大的工具，它允许我们直接在浏览器中执行JavaScript代码。使用时只需将JS代码按照字符串的格式传入即可。常用JS代码以下是一些常用的JavaScript代码示例，可以在Selenium的execute_script函数中直接使用：包括操作当前页面和操作某个元素。操作当前页面获取页面标题page_title=b
  • uniapp 开发 h5 跳转微信小程序 陈龙龙的陈龙龙 uni-apphtml5微信前端vue.jsjavascript
    1、JS-SDK说明文档文档链接把JSSDK的js文件下载下来或者直接使用链接2、封装初始化jssdk的functionvarjweixin=require('../common/jweixin-1.6.0.js');jssdkConfig:(options)=>{returnnewPromise((resolve,reject)=>{uni.showLoading({title:"加载中..."
  • uniapp更新版本，apk包进度条，wgt包热更新 初晨未凉 uni-appjavascript前端
    upgrade.js/***@descriptionH5+下载App*@paramdownloadUrl:App下载链接*@paramprogressCallBack:下载进度回调*/exportconstdownloadApp=(downloadUrl,progressCallBack=()=>{},)=>{returnnewPromise((resolve,reject)=>{//创建下载任务
  • js的一些处理 初晨未凉 javascript前端开发语言
    1.翻转字符串letstr='abcdef'str=str.split('').reverse().join()console.log(str)因此想到了我之前写的截取字符串获取参数跳转，在写一遍letstr='name=Jack&age=18&gender=男'letlist=str.split('&');letobj={}list.forEach((v)=>{letitem=v.split('
  • 搭建hexo主题Butterfly部署github+个人服务器 「已注销」 编辑器
    1.文章介绍网址展示：chen&blog此文章总结不易，参考各个文章总结，如有问题请留言…2.环境要求笔者环境：win1164位；node.js：v14.15.364位；git：2.29.2.windows.264位编写代码使用Notepad++2.1node.js安装下载node-v14.15.3-x64.msi安装自主安装（修改安装路径，一路next）验证安装是否成功cmd查看版本C:\Use
  • 使用Node.js实现RESTful API chiwan3432 json开发工具ruby
    RESTful基础概念REST（RepresentationalStateTransfer）描述了一个架构样式的网络系统，它首次出现在2000年RoyFielding的博士论文中。在REST服务中，应用程序状态和功能可以分为各种资源。资源向客户端公开，客户端可以对资源进行增删改操作。资源的例子有：应用程序对象、数据库记录、算法等等。REST通过抽象资源，提供了一个非常容易理解和使用的API，它使用
  • 自定义的搭建solidity开发环境（以太坊） yinzhiqing 开发环境技术文档ubuntu开发环境
    环境地址github:GitHub-yinzhiqing/templete-sol:solidityplatform(hardhat)gitlab:zqy/templete-sol·GitLab本项目利用openzapplinsolcweb3jshardhatnodejs在ubuntu下搭建solidity合约开发环境．大多数功能实现了自动化（脚本）执行．特点：１．开发环境可充分使用２．合约可升级
  • npm : 无法加载文件 D:\dev\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=1 学不完@根本学不完 npm前端node.js
    vscode终端npminstall提示：npm:无法加载文件D:\dev\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=1解决：
  • 【区块链技术开发】 关于Windows10平台Solidity语言开发环境配置 源代码杀手 区块链技术开发区块链
    目录1、安装Node.js2、安装Solidity编译器3、安装RemixIDE4、安装MetaMask浏览器插件5、环境配置与问题解决6、安装Ganache:以太坊区块链开发测试工具7、安装Web3.js库8、VsCode配置Solidity语言环境并运行示例代码编译方法1：运行上述示例只需在终端输入编译命令Solcjs编译方法2：安装Solidity插件9、在VSCode运行合约参考文献在Wi
  • npm : 无法加载文件 D:\nodejs\npm.ps1，因为在此系统上禁止运行脚本 rjc_lihui npm前端node.js
    要以管理员身份打开PowerShell，请按照以下步骤操作：在Windows搜索框中查找PowerShell：在任务栏上，点击左下角的Windows徽标（或按Win+S键）以打开搜索框。输入“PowerShell”以查找PowerShell应用程序。右键点击PowerShell图标：在搜索结果中，找到“WindowsPowerShell”或“WindowsPowerShellISE”（如果你使用的
  • cocosCreator 和 Laya 的常用API与方法 ，多边形点击解决正方形重叠点击问题，emit，dispatchEvent，EventCustom qq_42838904
    常用API引入：require/import导出：export/module.exports/exportsNodejs不支持import和exportes6兼容以上所有语法，当然需要webpack+babel来支撑es6是ECMAScript(EuropeanComputerManufacturersAssociationEuropeanComputerManufacturersAssociat
  • ThinkJSON:通过强化学习让大型语言模型（LLM）严格遵守JSON模式 AI仙人掌 人工智能深度学习
    标题：ThinkInsidetheJSON:ReinforcementStrategyforStrictLLMSchemaAdherence作者：BhavikAgarwal,IshanJoshi,ViktoriaRojkova机构：MasterControlAIResearch链接：arXiv:2502.14905v1本文提出了一种轻量级强化学习框架，通过合成数据、多奖励函数和GRPO优化，显著提
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他