yi把菜刀
yi把菜刀

通过JavaScript如何做一个仿京东的跟随图片放大镜效果？(附加注释)简单实用。

效果示例：
通过JavaScript如何做一个仿京东的跟随图片放大镜效果？(附加注释)简单实用。_第1张图片

思想过程：
在一个大盒子里放一个图片，一个半透明的黄色遮罩层(带有绝对定位才可以移动)，一个放大过后的图片，采取绝对定位固定到图片的一侧

html+css的片段：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .a1 {
      
            position: relative;
            width: 300px;
            height: 300px;
            cursor: move;
        }
        .a1>img{
      
            width: 100%;
            height: 100%;
        }
        .a1box {
      
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color:  #FEDE4F;  //设置颜色
            opacity: 0.5; // 设置为半透明
        }
        .big {
      
            display: none;
            position: absolute;
            left: 310px;
            top: 0;
            width: 600px;
            height: 600px;
            overflow: hidden;
        }
        .big>img {
      
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
        }
    style>
    <script src="try.js">script>  //引入js代码片段
head>
<body>
    <div class="a1">
        <img src="../../../html+css/images/yzfc.jpg" alt="">
        <div class="a1box">div>
        <div class="big">
            <img src="../../../html+css/images/yzfc.jpg" alt="" class="bigimg">
        div>
    div>
body>
html>

javascript的片段：：

window.addEventListener('load',function() {
     
    //获取各个元素
    var a1 = document.querySelector('.a1');
    var a1box = document.querySelector('.a1box');
    var big = document.querySelector('.big')
    var bigimg = document.querySelector('.bigimg')
    // 1.鼠标经过两个图片显示出来哦
    a1.addEventListener('mouseover',function() {
     
        a1box.style.display = 'block';
        big.style.display = 'block';
    })
    // 2.鼠标离开，两个图片的display改为none，隐藏
    a1.addEventListener('mouseout',function() {
     
        a1box.style.display = 'none';
        big.style.display = 'none';
    })
    // 3.当鼠标在其中移动时的相关联的代码及解释
    a1.addEventListener('mousemove',function(e){
     
        var x = e.pageX -a1.offsetLeft; //获取 鼠标在盒子内的x坐标
        var y = e.pageY - a1.offsetTop; // 获取 鼠标在盒子内的x坐标
        x = x - a1box.offsetWidth/2; // 使得鼠标在盒子的中间
        y = y - a1box.offsetWidth/2; // 使得鼠标在盒子的中间
        xmax = a1.offsetWidth - a1box.offsetWidth;  //算出盒子在x方向的最大移动距离
        ymax = a1.offsetHeight - a1box.offsetHeight; // 算出设置盒子在y方向最大的移动距离
        // 判断鼠标是否离开盒子，防止盒子跟着鼠标离开父容器
        if(x<=0) {
     
            x=0;
        }
        if(y<=0) {
     
            y=0;
        }
        if(x>=xmax) {
     
            x = xmax +'px';
        }
        if(y>=xmax) {
     
            y = ymax+ 'px';
        }
        a1box.style.left = x+'px'; //设置盒子的 x坐标
        a1box.style.top = y+'px'; // 设置盒子的 y坐标
        //大图片移动距离= 遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
        var bigimgx = bigimg.offsetWidth - big.offsetWidth; //获取大图片x方向上的最大移动距离
         var bigimgy = bigimg.offsetHeight - big.offsetHeight; //获取大图片y方向上的最大移动距离
        bigimg.style.left = -x * bigimgx / xmax +'px'  //根据公式求出 大图片x方向应该移动的距离
        bigimg.style.top = -y * bigimgx / ymax +'px'  // 根据公式求出 大图片y方向应该移动的距离
    })
})

通过JavaScript如何做一个仿京东的跟随图片放大镜效果？(附加注释)简单实用。_第2张图片
本图为代码示例的图，可搬走。

你可能感兴趣的:(前端学习,前端小例子,html5)

  • 使用Odoo Shell卸载模块 odoo中国 odooodoo开源软件erp
    使用OdooShell卸载模块我们在Odoo使用过程中，因为模块安装错误或者前端错误等导致odoo无法通过界面登录，这时候你可以使用OdooShell来卸载模块。OdooShell是一个交互式Pythonshell，允许你直接与Odoo数据库和模型进行交互。以下是使用OdooShell卸载模块的详细步骤：步骤1：启动OdooShell要启动OdooShell，你需要在终端中运行以下命令。确保你已经
  • 基于 Spring Boot 的社区居民健康管理系统部署说明书 小星袁 毕业设计原文springboot后端java
    目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架，前端页面的设计主要依托Vue框架来构建，实现丰富且交互性强的用户界面，后台管理功能则采用SpringBoot框架与MySQL数
  • html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作 律保阁-Michael html5中css的含义
    HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48
  • 前端性能优化——如何提高页面加载速度？ 忘川... 前端性能优化html
    1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的
  • 前端开发入门指南：HTML、CSS和JavaScript基础知识 方向感超强的 javascriptcsshtml前端
    引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与
  • 前端504错误分析 ox0080 #北漂+滴滴出行WebVIP激励前端
    前端出现504错误（网关超时）通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案：1.确认错误来源504含义：代理服务器（如Nginx、Apache）在等待后端服务响应时超时。常见架构：前端→代理服务器→后端服务，问题通常出在代理与后端之间。2.排查步骤（1）检查后端服务状态确认服务是否运行：通过日志或监控工具（如systemctlstatus,KubernetesPod
  • 部署前端项目2 augenstern416 前端
    前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V
  • 对象的操作 augenstern416 javascript开发语言ecmascript
    在前端开发中，JavaScript提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key
  • 前端基础入门：HTML、CSS 和 JavaScript 阿绵 前端前端htmlcssjs
    在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元
  • 前端超长列表，虚拟滚动实现 大橙子- 前端cssjavascript
    虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main
  • 前端框架虚拟DOM的产生 大橙子- 前端框架前端javascript
    直接说结论：为了找出与命令式(原生实现步骤)所执行代码的最小差异化，从而优化代码性能。命令式：可以理解为面向过程编程，需要写好每个实现步骤constdiv=document.querySelector('#app')//获取divdiv.innerText='helloworld'//设置文本内容如果需要修改文字内容为“你好”div.innerText='你好'//设置文本内容声明式：可以理解为面
  • 27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？ 程序员yt java机器学习开发语言
    今天给大家分享的是一位粉丝的提问，27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问：211建筑本科，22年毕业后gap一年转码去了英国读的QS100的it的水硕（24年12月份毕业），转码后对就业形势认知不足，时间全花在课业上，八股文和算法准备的不充足，秋招算是惨败。读研
  • 芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案 青牛科技-Allen GLOBALCHIP音视频单片机嵌入式硬件收录机人工智能家用电器
    引言在直播设备、智能语音终端等新兴应用的推动下，高性能音频采集系统的需求持续增长。芯麦半导体推出的GC1808立体声音频模数转换器，凭借其全集成信号链设计和灵活的接口配置，为开发者提供了高性价比的音频前端解决方案。本文将从核心架构、关键技术特性及典型应用场景三个方面，深入解析这款芯片的设计亮点。一、GC1808核心特性概览全集成信号链内置64倍过采样率Δ-Σ调制器集成数字梳状滤波器（CombFil
  • 前端面试题（HTML篇） 每天一点点~ htmlcssjavascript
    1.网络中使用最多的图片格式有哪些？JPEG，GIF，PNG最流行的是JPEG格式，可以把文件压缩到最小在PS以JPEG格式存储时，提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?声明文档类型声明位于位于HTML文档中的第一行，处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严
  • python websocket 心跳_websocket心跳及重连机制 蜗牛老湿 pythonwebsocket心跳
    websocket心跳及重连机制websocket是前后端交互的长连接，前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒。因此为了保证连接的可持续性和稳定性，websocket心跳重连就应运而生。在使用原生websocket的时候，如果设备网络断开，不会立刻触发websocket的任何事件，前端也就无法得知当前连接是否已经断开。这个时候如果调用websocket.send方法，浏览器
  • electron学习笔记 weixin_46452138 electron学习javascript
    electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基
  • 虚拟DOM和真实DOM的区别 水煮庄周鱼鱼 概念前端
    虚拟DOM（VirtualDOM）、DOM（RealDOM）是前端开发中常用的两种概念。什么是真实DOM？真实DOM是浏览器中实际存在的DOM结构，它由浏览器解析HTML生成，并且直接与浏览器交互。当页面中的数据发生变化时，真实DOM会重新计算布局和渲染，这个过程比较耗费性能。什么是虚拟DOM?虚拟DOM是一种在内存中以JavaScript对象的形式表示的轻量级的DOM结构。它是对真实DOM的一种
  • Java开发实习面试笔试题（含答案） 小钊（求职中） java面试开发语言springspringbootmaventomcat
    在广州一家中大公司面试（BOSS标注是1000-9999人，薪资2-3k），招聘上写着Java开发，基本没有标注前端要求，但是到场知道是前后端分离人不分离。开始先让你做笔试（12道问答+4道SQL题），接着面试也是八股文之类的，没有问项目，没有做算法，现分享笔试和面试题目给大家做参考。（基础的没复习忘了不会，只会几道感觉已经寄了，最重要的是前端基本不会）一、笔试内容1.Java有哪些数据类型，什么
  • 鸿蒙5.0实战案例：关于图像撕裂、掉帧等异常现象的原理以及优化方案 敢嗣先锋 鸿蒙开发HarmonyOS移动开发harmonyos鸿蒙开发openharmony移动开发ArkUI性能优化
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 【如何实现 JavaScript 的防抖和节流？】 程序员远仔 前端面试高频问题宝典javascriptvue.js前端框架前端html5开发语言
    如何实现JavaScript的防抖和节流？前言防抖（Debounce）和节流（Throttle）是JavaScript中优化高频事件处理的两种常用技术。它们可以有效减少事件处理函数的调用次数，提升性能并改善用户体验。本文将详细介绍防抖和节流的实现原理及其应用场景。关键词JavaScript、防抖、节流、高频事件、性能优化、事件处理、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实
  • Web开发中的可专利性分析：透过一个案例学习 CodePatentMaster 前端学习
    Web开发工程师在创新过程中经常面临是否能申请专利并获得专利权的问题。本文通过一个详细的Web开发领域案例来阐释可专利性的分析过程。案例分析假设您是一名Web开发工程师，您开发了一种名为“动态响应式前端框架”（DynamicResponsiveFrontendFramework，DRFF）的新型前端框架。与传统前端框架相比，DRFF通过引入一种基于AI的组件化设计方法和实时数据流处理机制，显著提高
  • 前端实现防抖功能的详细解读 黑码小帅 前端知识总结前端vue.jsvuejavascriptajaxeasyuibootstrap
    在前端开发中，防抖（Debounce）是一种优化技术，用于限制某个函数在短时间内被频繁调用的次数。它的核心思想是：在一定时间内，无论触发多少次事件，只执行最后一次操作。防抖通常用于处理用户输入、窗口调整、滚动事件等高频触发的场景，以减少不必要的计算或请求，提升性能。1.防抖的应用场景常见场景搜索框输入：当用户在搜索框中输入内容时，每次按键都会触发搜索请求。如果不做防抖处理，可能会导致大量不必要的请
  • 前端 window.print() 打印图片 BillKu 前端
    在使用document.write时，确保内容加载完成后再执行其他操作（如print），可以通过以下方法实现：1.使用window.onload事件window.onload事件会在页面所有资源（包括图片、脚本等）加载完成后触发。javascript复制window.onload=function(){document.write("页面已加载完成");window.print();//确保内容加
  • Svelte 5 框架加速实时应用开发, 或引领未来前端编译式框架大爆发? 寒鸦xxx 前端前沿技术前端前端框架
    自从去年Svelte团队发布了Svelte5稳定版，同样也是该项目历史上最重要的版本,目前start已经上升到了80K+,也有越来越多的企业和项目投入了该生态.下面我们来看看它与众不同的几大点一、为何Svelte5能加速实时应用？响应式系统的革命细粒度更新：通过$state和$derived实现精准依赖追踪，仅更新受影响的UI部分（而非虚拟DOM全量比对）。性能对比：在实时数据流场景（如股票行情）
  • TypeScript 中的 type 和 interface：你真的了解它们的不同吗？ 液态不合群 typescriptjavascript前端
    如果你有写过Vue3的项目，那么对TypeScript肯定不会陌生。不管是公司新项目技术选型还是个人学习开发新的前端项目，Vue3+TypeScript已经成为首选技术方案之一在TypeScript这个强大的静态类型系统中，type和interface是两个重要的关键字，用于定义和描述数据类型。然而，这两者之间的区别是什么，在实际开发过程中我们要怎么用呢？废话不说，直接进入正题，就让我们一起深入探
  • ollama-chat-ui-vue，一个可以用vue对接ollama的开源项目,可接入deepSeek 是你的小熊啊 uivue.js前端ai
    ollama-chat-ui-vue使用vue3+vite+elementUi搭建的前端chat,通过ollama可与模型对话,目前支持独立思考,切换模型(联网查询后续支持)github地址：ollama-chat-ui-vue制作不易github点点star，谢谢前置工作安装ollama,ollama官网地址安装完ollama后，打开cmd，下载模型(我选了个最小的模型，模型地址)ollamar
  • HTML5的新增标签有哪些？ 「已注销」 HTML5
    2019-07-3009:46我们都知道，想要成为一名合格的前端开发人员，掌握好HTML5是一个重要的先决条件，相比较于HTML，HTML5中新增了许多功能标签，那么这么标签都有哪些呢？格式：定义文本的文本方向，使其脱离其周围文本的方向设置。定义有记号的文本。定义预定义范围内的度量。定义任何类型的任务的进度。定义若浏览器不支持ruby元素显示的内容。定义ruby注释的解释。定义ruby注释。定义日
  • 1 html5-新标签 xiaolongyu3 前端新学html5前端html
    年龄稍大一点的码农可能见证了html的发展，亲历了头声明的变化，但是现在起步就是html5,那么html有哪些不为大家常用的新东西呢，这一章我先来谈谈这个问题。1dialog标签——弹窗标签。弹窗可能前端一路走来，见过很多。甚至现在我们在用各种UI库的时候这个弹窗也是必须的一个功能。这个标签支持的api:show:展示弹窗框，采用决定定位，showModal:展示弹窗，并带有遮罩，采用了一个特殊的
  • HTMl5新增特性有哪些？ 番茄牛腩汤 大数据
    (1)新增了语义化标签(2)新增了音频视频标签(3)新增了canvas和svg绘图(4)新增了地理定位（navigator.geolocation）(5)新增了拖拽API(drapable)(6)新增了多线程技术webworker(7)新增了即时通讯websocket
  • HTML5 新特性有哪些？ IT木昜 大白话前端面试题html5前端html
    HTML5新特性，你知道几个？语义化标签：HTML5引入了一系列语义化标签，比如代表网页的头部，就像是一本书的封面和目录部分，包含网站标志、导航栏等重要信息；用于导航链接，是网页的“交通指示牌”，方便用户快速找到不同页面；表示独立的文章内容，每一篇新闻报道、博客文章都可以放在这里；用来划分页面的不同区域，像一个商场里不同的楼层分区；代表网页底部，一般放版权信息、联系方式等。这些标签让网页结构更清晰
  • java Illegal overloaded getter method with ambiguous type for propert的解决 zwllxs javajdk
    好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，
  • IT人应当知道的10个行业小内幕 beijingjava 工作互联网
    10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。 　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。 　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配
  • java 实现自定义链表 CrazyMizzz java数据结构
    1.链表结构   链表是链式的结构 2.链表的组成    链表是由头节点，中间节点和尾节点组成    节点是由两个部分组成：       1.数据域       2.引用域 3.链表的实现 &nbs
  • web项目发布到服务器后图片过一会儿消失 麦田的设计者 struts2上传图片永久保存
      作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片
  • CodeIgniter框架Cart类 name 不能设置中文的解决方法 IT独行者 CodeIgniterCart框架　
    今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。 在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '
  • linux回收站 _wy_ linux回收站
    今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。     后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在
  • jquery回到页面顶端 知了ing htmljquerycss
    html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
  • B树、B-树、B+树、B*树 矮蛋蛋 B树
    原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树        即二叉搜索树：        1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb
  • 数据库连接池 alafqq 数据库连接池
    http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼 数据库连接池 用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
  • java泛型 百合不是茶 java泛型
    泛型 在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患   泛型的特点：消除强制转换 确保类型安全 向后兼容   简单泛型的定义：      泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan
  • javascript闭包[两个小测试例子] bijian1013 JavaScriptJavaScript
    一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　
  • 探索JUnit4扩展：假设机制（Assumption） bijian1013 javaAssumptionJUnit单元测试
    一.假设机制（Assumption）概述        理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，
  • 【Gson四】范型POJO的反序列化 bit1129 POJO
    在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO   import com.google.gson.Gson; import java.
  • 【Spark八十五】Spark Streaming分析结果落地到MySQL bit1129 Stream
    几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，
  • NGINX + LUA实现复杂的控制 ronin47 nginx lua
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-递归判断数组是否升序 bylijinnan java
    public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv
  • Netty源码学习-DefaultChannelPipeline2 bylijinnan javanetty
    Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”： 如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB） 来
  • Java工具之JPS chinrui java
    JPS使用     熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来
  • window.print分页打印 ctrain window
    function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) {
  • 安装hadoop时 执行jps命令Error occurred during initialization of VM daizj jdkhadoopjps
    在安装hadoop时，执行JPS出现下面错误   [slave16][email protected]:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working
  • PHP开发大型项目的一点经验 dcj3sjt126com PHP重构
    一、变量 最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十
  • android笔记之--向网络发送GET/POST请求参数 dcj3sjt126com android
    使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi
  • linux复习笔记 之bash shell (3) 通配符 eksliang linux 通配符linux通配符
    转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。 下面列出一些常用的通配符，如下表所示 符号 意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c
  • Android关于短信加密 gqdy365 android
    关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）：     1、因为Android有短信收发接口，可以调用接口完成短信收发；         发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
  • asp.net在网站根目录下创建文件夹 hvt .netC#hovertreeasp.netWeb Forms
    假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D
  • 一个合格的程序员应该读过哪些书 justjavac 程序员书籍
    编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本， 你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单，不过都是推荐数
  • 单实例实践 跑龙套_az 单例
       1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes
  • PO VO BEAN 理解 q137681467 VODTOpo
    PO：      全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。     BO：     全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对
  • 战胜惰性，暗自努力 金笛子 努力
    偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？ 我有个朋友是搞技术的，平时嘻嘻哈哈，以
  • NDK/JNI二维数组多维数组传递 wenzongliang 二维数组jniNDK
    多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组 用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他