king-w
king-w

js实现京东购物放大镜和选项卡效果

购物网站点击商品后，都会有一个查看物品图片，并且可以放大仔细观察物品的功能。这个功能看起来复杂，其实实现起来非常简单。下面我们来一起做这个小效果吧！

首先，我们看一下页面的布局：

js实现京东购物放大镜和选项卡效果_第1张图片

1.小图片显示区，上面有一个方形遮罩层
2.缩略图横向列表
3.大图显示区域

然后，我们写出开发步骤：
1.编写3个区域的html布局，使他们位于同一个容器内
2.显示区域2的图片列表
3.给区域2的图片添加mouseover事件，使图片显示在区域1内
4.鼠标移入区域1，生成半透明的选择框
5.区域3显示区域2选择框对应的图片位置放大的效果
6.鼠标移除区域2，区域3隐藏

最后，根据需求写出相应代码：
html和css：

<style>
        ul{
            list-style: none;
            padding: 0;
        }
        .zoom-box{
            position: relative;
            width: 452px;
        }
        .small-box{
            border: 1px solid #ccc;
            position: relative;
        }
        .small-box .square{
            position: absolute;
            background-color: yellow;
            opacity: 0.5;
            display: none;
        }
        .small-box .mask{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top:0;
            left:0;
        }
        .img-list ul:after{
            clear: both;
            content: '';
            display: table;
        }
        .img-list ul li{
            float: left;
            padding: 0 8px;
        }
        .img-list img{
            border: 2px solid transparent;
        }
        .img-list img.active{
            border: 2px solid red;
        }
        .big-box{
            position: absolute;
            top:0;
            left: 100%;
            margin-left: 2px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            display: none;
            overflow: hidden;
        }
        .big-box img{
            position: absolute;
        }
    style>

head>
<body>
<div class="zoom-box">
    <div class="small-box">
        <img src="../../../img/京东放大镜/m1.jpg" alt="">
        <div class="square">

        div>
        <div class="mask">div>
    div>

    <div class="img-list">
        <ul>
            <li><img class="active" src="../../../img/京东放大镜/s1.jpg" alt="" data-small="../../../img/京东放大镜/m1.jpg"
                     data-big="../../../img/京东放大镜/b1.jpg">li>
            <li><img src="../../../img/京东放大镜/s2.jpg" alt="" data-small="../../../img/京东放大镜/m2.jpg"
                     data-big="../../../img/京东放大镜/b2.jpg">li>
            <li><img src="../../../img/京东放大镜/s3.jpg" alt="" data-small="../../../img/京东放大镜/m3.jpg"
                     data-big="../../../img/京东放大镜/b3.jpg">li>
            <li><img src="../../../img/京东放大镜/s4.jpg" alt="" data-small="../../../img/京东放大镜/m4.jpg"
                     data-big="../../../img/京东放大镜/b4.jpg">li>
            <li><img src="../../../img/京东放大镜/s5.jpg" alt="" data-small="../../../img/京东放大镜/m5.jpg"
                     data-big="../../../img/京东放大镜/b5.jpg">li>
            <li><img src="../../../img/京东放大镜/s6.jpg" alt="" data-small="../../../img/京东放大镜/m6.jpg"
                     data-big="../../../img/京东放大镜/b6.jpg">li>
        ul>
    div>
    <div class="big-box">
        <img src="../../../img/京东放大镜/b1.jpg" alt="">
    div>
div>

js代码：

<script>
    var smallBox=$('.small-box .mask');
    var smallImg=$('.small-box img');
    var square=$('.square');
    var imagesList=$all('.img-list img');
    var bigBox=$('.big-box');
    var bigImg=$('.big-box img');

    //选项卡切换
    for(var i=0;ifunction () {
            for (var j=0;j'';
            }
            this.className='active';
            bigImg.src=this.getAttribute('data-big');
            smallImg.src=this.getAttribute('data-small');
        }
    }
    //鼠标移进事件
    smallBox.onmouseover=function () {
        square.style.display='block';
        bigBox.style.display='block';
        //利用比例公式计算square的宽高
        //square的宽/smallImg的宽 = bigBox的宽/bigIma的宽
        square.style.width=smallImg.offsetWidth * bigBox.offsetWidth / bigImg.offsetWidth + 'px';
        square.style.height=smallImg.offsetHeight * bigBox.offsetHeight / bigImg.offsetHeight + 'px';
    };
    //鼠标移出事件
    smallBox.onmouseout=function () {
        square.style.display='none';
        bigBox.style.display='none';
    };
    //鼠标移动事件
    smallBox.onmousemove=function (e) {
        var e=e||window.event;
        var x,y;
        //x和y的坐标
        x=e.offsetX-square.offsetWidth/2;
        y=e.offsetY-square.offsetHeight/2;
        if(x<0){
            x=0;
        }
        if(x>smallBox.offsetWidth-square.offsetWidth){
            x=smallBox.offsetWidth-square.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>smallBox.offsetHeight-square.offsetHeight){
            y=smallBox.offsetHeight-square.offsetHeight;
        }
        square.style.left=x+'px';
        square.style.top=y+'px';

        //利用公式计算大图的坐标
        //
        //

        bigImg.style.left=-x * bigImg.offsetWidth / smallImg.offsetWidth + 'px';
        bigImg.style.top=-y * bigImg.offsetHeight / smallImg.offsetHeight + 'px';
    };
    function $(name) {
        return document.querySelector(name);
    }
    function $all(name) {
        return document.querySelectorAll(name);
    }
script>

大家可以做一下看看效果：
js实现京东购物放大镜和选项卡效果_第2张图片

添加一个mask的div是因为，如果直接在smallBox上添加事件，会受到其中的子元素的影响，导致图片抖动。而对一个空内容的mask操作就不会有影响了。

你可能感兴趣的:(js实现京东购物放大镜和选项卡效果)

  • 【信息系统项目管理师-选择真题】2017下半年综合知识答案和详解 数据知道 信息系统项目管理师(软考高级)软考高级信息系统项目管理师高项备考高项综合知识
    更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第21题】【第22题】【第23题】【第24题】【第25题】【第26题】【第27题】【第28题】【第29题】【第30题
  • 深入浅出 Python 函数：编写、使用与高级特性详解 田猿笔记 python开发语言函数
    引言在Python编程的世界中，函数堪称构建复杂逻辑和模块化程序的基础砖石。它能够帮助程序员组织代码、避免重复，并通过封装逻辑提高代码的可读性和可维护性。本文旨在全方位解析Python函数的核心概念，包括基础定义、文档化、默认参数、可选参数、解包参数、关键字仅参数、注解、可调用性检查、函数名称获取、匿名函数（lambda表达式）、生成器以及装饰器等多种实用特性。一、函数基础与文档化defexamp
  • 大模型项目落地时，该如何估算模型所需GPU算力资源 kcarly 大模型知识乱炖认识系列gpu算力深度学习自然语言处理AIGC
    近期公司有大模型项目落地。在前期沟通时，对于算力估算和采购方案许多小伙伴不太了解，在此对相关的算力估算和选择进行一些总结。不喜欢过程的可以直接跳到HF上提供的模型计算器要估算大模型的所需的显卡算力，首先要了解大模型的参数基础知识。大模型的规模、参数的理解模型参数单位我们的项目中客户之前测试过Qwen1.5-110B的模型，效果还比较满意。（Qwen还是国产模型中比较稳定的也是很多项目的首选）模型中
  • 2021年Javascript最常见的面试题以及答案 2401_86401365 javascript原型模式开发语言
    区别：||和原数据是否指向同一个对象|第一层数据为基本数据类型|原数据中包含的子对象||—|—|—|—||浅拷贝|否|不会使原数据一起改变|会使原数据一起改变||深拷贝|否|不会使原数据一起改变|不会使原数据一起改变|点击对Javscript中浅拷贝和深拷贝的探索和详解查看详解项目中实现深浅拷贝常用的方法有哪些？===========================================
  • PaddleSeg 从配置文件和模型 URL 自动化运行预测任务 如若123 自动化运维人工智能深度学习
    gitclonehttps://github.com/PaddlePaddle/PaddleSeg.git#在ipynb里面运行cdPaddleSegimportsyssys.path.append('/home/aistudio/work/PaddleSeg')importos#配置文件夹路径folder_path="/home/aistudio/work/PaddleSeg/configs"#
  • 第38周：猫狗识别 (Tensorflow实战第八周) weixin_46620278 tensorflow人工智能python
    目录前言一、前期工作1.1设置GPU1.2导入数据输出二、数据预处理2.1加载数据2.2再次检查数据2.3配置数据集2.4可视化数据三、构建VGG-16网络3.1VGG-16网络介绍3.2搭建VGG-16模型四、编译五、训练模型六、模型评估七、预测总结前言本文为中的学习记录博客原作者：说在前面1）本周任务：了解model.train_on_batch()并运用；了解tqdm，并使用tqdm实现可视
  • Docker Desktop 在Windows 环境中开发、测试和运行容器化的应用程序 jcsx dockerdockerwindows容器
    Docker为Windows提供了专门的桌面版工具，称为DockerDesktop，它允许你在Windows环境中开发、测试和运行容器化的应用程序。如何在Windows上使用DockerDockerDesktopDockerDesktop是一个专为Windows设计的应用程序，它简化了在Windows上安装和管理Docker的过程。DockerDesktop支持Windows10和Windows1
  • 编译安装PaddleClas@openKylin（失败，安装好后报错缺scikit-learn） skywalk8163 操作系统人工智能kylinPaddleClas
    编译安装前置需求：手工安装swig和faiss-cpupipinstallswigpipinstallfaiss-cpu小技巧，pip编译安装的时候，可以加上--jobs=64来多核编译。注意先升级pip版本：pipinstallpip-Upip3installfaiss-cpu--config-settings="--jobs=64"--global-option="--jobs=4"还有一种方
  • 对STM32芯片架构及固件库的理解 小欧不要怂 STM32学习stm32架构嵌入式硬件
    一、STM32芯片的基本架构1、STM32内部组成STM32芯片，其实就是一台功能阉割的电脑，属于片上SOC的一种。里面包含有Cortex-M、RAM、FLASH等组件。图中所示为STM32F1芯片的内部架构。以日常生活中使用的电脑为例：(1)内核Cortex-M：相当于X86电脑的CPU；(2)总线矩阵：内核和外部设备进行交互的时候需要总线矩阵进行通信，这个总线矩阵就像是台式机上的南北桥，实现数
  • 【Java学习】从0到1掌握行为抽象与Lambda表达式：分区的深度解析与实战指南 墨瑾轩 一起学学Java【二】java学习开发语言
    关注墨瑾轩，带你探索编程的奥秘！超萌技术攻略，轻松晋级编程高手技术宝库已备好，就等你来挖掘订阅墨瑾轩，智趣学习不孤单即刻启航，编程之旅更有趣从0到1掌握行为抽象与Lambda表达式：分区的深度解析与实战指南！引言在现代编程中，行为抽象和Lambda表达式是提高代码可读性和灵活性的重要工具。特别是在Java8引入的流（Stream）API和分区功能，更是让处理集合数据变得简单而优雅。今天，我们就一起
  • 请简述vue2和vue3的区别 youhebuke225 vue面试题vue.js前端javascript
    Vue2和Vue3作为Vue.js框架的两个主要版本，在多个方面存在显著的差异。以下是它们之间主要区别的详细概述：生命周期函数钩子：Vue2：包含了一系列的生命周期钩子函数，如beforeCreate、created、beforeMount等，这些函数在组件的不同生命周期阶段被调用。Vue3：对生命周期函数进行了调整，setup成为了新的入口点，代替了beforeCreate和created。同时
  • app架构 yx1166 IOS
    一个好的app架构，能够经得起时间的检验，能让开发者愉快并非常自豪，拓展性非常好。架构是什么？一个app的架构，包含外在和内在2个方面。外在，指的是项目的目录。内在，指的是支撑app的基础运行库。具体包括但不限于：网络请求框架、日志输出框架、图片处理框架、地图、推送等基础必备的库。有了这些库，这个框架不一定是高效的，还要看框架的使用和搭建的成果，框架改动的次数。怎样设计一个好架构？架构，只有适合自
  • 设计模式-桥接模式 C++ 星星典典 设计模式c++桥接模式
    一、简介1、什么是桥接模式桥接（Bridge）是用于把抽象化与实现化解耦，使得二者可以独立变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。需要注意的是，这里面说的抽象化和实现化并不是指抽象基类和具体派生类的关系。即桥接模式的目的并不是把抽象基类和具体派生类进行分离。而是指把问题的具体特质分离出来，以关联的关系加入对象的实例化过程。可以结合下面的桥接
  • Pywinauto 快速学习指南 口_天_光健 microsoftpythonwindows自动化
    Pywinauto技术指南一、基础概念（一）控件（Widgets）在Windows应用程序中，控件是用户界面的基本组成部分，如按钮、文本框、下拉列表等。Pywinauto提供了方法来识别和操作这些控件。（二）应用程序（Applications）代表正在运行的Windows应用程序。可以使用Pywinauto启动、连接和操作应用程序。（三）窗口（Windows）应用程序中的窗口是用户与之交互的界面。
  • java语言中“导包”的解释 喵果森森 java编程学习日志javajvmservlet
    在java编程过程中，常常使用一种功能，叫“导包”。关键字为import例如importjava.util.Scanner;importjava.util.Random;什么是导包？导包即导入包，通过import关键字将他人完善的代码导入自己的代码中。“他人完善的代码”是被封装成类和包的形式，导入包，并不会将他人的代码插入自己的代码里，只需将其对象实例化后使用即可。什么人写的代码都可以导入吗？Ja
  • Hibernate不是过时了么？SpringDataJpa又是什么？和Mybatis有什么区别？ 芝士汉堡 ིྀིྀ mybatishibernatespring
    一、前言ps:大三下学期，拿到了一份实习。进入公司后发现用到的技术栈有SpringDataJpa\Hibernate,但对于持久层框架我只接触了Mybatis\Mybatis-Plus，所以就来学习一下SpringDataJpa。1.回顾MyBatis来自官方文档的介绍：MyBatis是一款优秀的持久层框架，它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动
  • 深度学习｜表示学习｜卷积神经网络｜由参数共享引出的特征图｜08 漂亮_大男孩 表示学习深度学习学习cnn
    如是我闻：FeatureMap（特征图）的概念与ParameterSharing（参数共享）密切相关。换句话说，参数共享是生成FeatureMap的基础。FeatureMap是卷积操作的核心产物，而卷积操作的高效性正是由参数共享带来的。下面我们详细看一下FeatureMap和ParameterSharing之间的关系：1.什么是FeatureMap？定义：FeatureMap是卷积操作生成的输出结
  • 23种设计模式-桥接(Bridge)设计模式 萨达大 软考中级-软件设计师设计模式javaC++桥接模式结构型设计模式软考软件设计师
    文章目录一.什么是桥接设计模式？二.桥接模式的特点三.桥接模式的结构四.桥接模式的优缺点五.桥接模式的C++实现六.桥接模式的Java实现七.代码解析八.总结类图：桥接设计模式类图一.什么是桥接设计模式？ 桥接模式（BridgePattern）是一种结构型设计模式，用于将抽象部分与实现部分分离，使它们可以独立地变化。通过桥接模式，抽象层和实现层之间的耦合度被降低，从而使系统具有更好的灵活性和可扩展
  • 【数据结构】最有效的实现栈和队列的方式（C&C++语言版） 大名顶顶 数据结构数据结构c语言c++程序员计算机编程软件开发
    在这个技术飞速发展的时代，掌握基础的数据结构知识是每个程序员必不可少的技能。本文将深入探讨栈和队列这两种线性数据结构，带你了解它们在实际编程中的应用以及如何用C/C++代码实现这些结构的核心操作。我们不仅讲解了栈的后进先出（LIFO）和队列的先进先出（FIFO）原理，还通过实例展示了如何将这两种数据结构结合起来，提升编程效率和解决实际问题的能力⚙️。不论你是编程新手还是经验丰富的开发者‍，本文都将
  • vue3实际开发bug解决 我爱加班、、 前端开发遇到的问题vue项目实际开发中的bugbug前端javascript
    index.vue:119Uncaught(inpromise)TypeError:Cannotcreateproperty'value'onstring'我是标题'问题分析：问题出在componentName的解构和赋值操作上。你尝试将一个字符串赋值给ref的.value属性，这导致了错误。ref是Vue3中用于响应式引用的工具，它返回一个对象，该对象的.value属性用于存储实际的值。解决：不
  • 实际开发中的有趣bug：“undefined“ is not valid JSON SyntaxError: “undefined“ is not valid JSON。 我爱加班、、 vue项目实际开发中的bugvuexbugjson前端javascriptvue.jsecmascriptajax
    bug解读：指出在尝试解析或序列化JSON数据时遇到了问题。JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，它要求数据必须是有效的JSON格式。在JavaScript中，undefined是一个特殊的值，表示变量没有被赋值，它不是一个有效的JSON值。场景：在后台项目，用户登录后，通过用户的菜单权限渲染侧边栏菜单，做了持久化存储。当登出后，在登录页刷新页面，
  • PySide6与PyQt5的区别 大乔乔布斯 pyqtpythonqt
    虽然PySide6和PyQt5的功能和API十分相似，但由于它们分别是基于不同版本的Qt和由不同的团队维护，是两个不同的Python绑定库，分别用于与Qt库进行交互，可能会在一些细节上表现出差异，一些关键区别：1.维护和授权PySide6:由TheQtCompany官方维护。使用LGPL授权，这意味着你可以在开源和闭源项目中免费使用它（遵守LGPL条款）。版本号与Qt本身一致，PySide6对应于
  • Java 和 JavaScript 的区别 大乔乔布斯 javajavascript开发语言
    尽管名字相似，JavaScript的名字中带有“Java”，确实让很多人误以为它与Java有紧密联系。但实际上，它们是完全不同的语言，只是在JavaScript的发展历史中与Java有一定的关联。1.JavaScript的诞生背景时间点：1995年，网景公司（Netscape）开发了一种轻量级的脚本语言，用于增强网页的交互性。开发者：JavaScript的发明者是布兰登·艾奇（BrendanEic
  • TypeError: ‘str‘ object is not callable的几种情况及解决办法 兔兔爱学习兔兔爱学习 pandaspython机器学习深度学习人工智能
    TypeError:‘str’objectisnotcallable的几种情况及解决办法第一个可能，定义了一个str的变量，这个和Python自带函数str的命名冲突了，所以发生这个错误。确实，这是一个情况。这种情况的解决办法就是：严格遵守命名规范，避免命名冲突。第二个可能，是字符串后面加了括号调用的缘故。这一般是由于不了解，对某个对象的细节不清楚，错把属性看成了函数。
  • Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件 王二红 +Vue3elementplusel-dropdownvue3把command加上.stop下拉菜单组件如何点击不冒泡stop事件修饰符阻止点击冒泡click.stop无法使用
    前言平常只需要给@click事件加入即可，但现在使用stop修饰符无法支持和识别语法。本文实现了在vue3+elementplus项目开发中，解决el-dropdown下拉菜单组件时点击事件冒泡问题（激活触发外层嵌套元素的点击事件，从而同时触发），使用.stop修饰符又没有地方可以加入的问题。本文提供完美解决方案，保证100%解决。如下图所示，常见于这种需求页面，点击“···”图标时就会引发点击事
  • 移动应用开发技术 架构图 彭乙肱
    移动应用相关视频讲解：AIGC和微信的辅助学习移动应用开发技术架构图移动应用开发技术架构图是移动应用程序员必备的工具之一。它展示了一个应用程序的各个部分如何相互交互，以及它们之间的关系。在这篇文章中，我们将简要介绍移动应用开发技术架构图的基本概念，并使用代码示例来说明其重要性。架构图的重要性移动应用开发技术架构图对于理解一个应用程序的整体设计和功能至关重要。它可以帮助开发人员更好地组织代码，减少代
  • vue-cli项目中使用Electron 骆驼Lara Vuevue.jselectronjavascript
    Vue项目中使用Electron一、安装二、创建background.js三、创建preload.js文件四、修改package.json文件五、修改vue.config.js文件六、启动1本地启动2打包补充：一、安装安装electron,electron-builder,vue-cli-plugin-electron-builder,electron-devtoolsnpmi--save-dev
  • Vue企业开发实战——学习心得 sienn vue.js前端javascript
    一、Vue.js简介Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它与其他大型框架的不同之处在于，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，也便于与第三方库或已有项目整合。二、环境配置安装Node.js和npm：Vue.js的开发需要使用Node.js和npm（Node包管理器）。可以从Node.js的官网下载并安装Node.js，它会自动
  • JVM中的STW和CMS Modify_QmQ #JVMjvmstwcms
    STWJava中Stop-The-World机制简称STW，是在执行垃圾收集算法时，Java应用程序的其他所有线程都被挂起（除了垃圾收集帮助器之外）。Java中一种全局暂停现象，全局停顿，所有Java代码停止，native代码可以执行，但不能与JVM交互；这些现象多半是由于gc引起。GC时的StoptheWorld(STW)是大家最大的敌人。但可能很多人还不清楚，除了GC，JVM下还会发生停顿现象
  • 为什么 TCP 挥手需要有 TIME_WAIT 状态？ qq_39279448 tcp/ip网络网络协议
    在TCP协议里，连接关闭过程需精确处理。TCP借助四次挥手（four-wayhandshake）实现从建立连接到断开连接，而在四次挥手最后阶段，TCP协议会进入特殊的TIME_WAIT状态，此步骤对确保可靠的连接断开意义重大。本文将深入探讨设置TIME_WAIT状态的原因及其在TCP协议中的作用。一、四次挥手和TIME_WAIT状态概述TCP连接关闭时，客户端和服务器会执行四次挥手：第一次挥手：主
  • 安装数据库首次应用 Array_06 javaoraclesql
    可是为什么再一次失败之后就变成直接跳过那个要求 enter full pathname of java.exe的界面 这个java.exe是你的Oracle 11g安装目录中例如：【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe！ 注意第一次，使用SQL D
  • Weblogic Server Console密码修改和遗忘解决方法 bijian1013 Welogic
            在工作中一同事将Weblogic的console的密码忘记了，通过网上查询资料解决，实践整理了一下。 一.修改Console密码         打开weblogic控制台，安全领域 --> myrealm -->&n
  • IllegalStateException: Cannot forward a response that is already committed Cwind javaServlets
    对于初学者来说，一个常见的误解是：当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。 示例代码： protected void doPost() { if (someCondition) { sendRedirect(); } forward(); // Thi
  • 基于流的装饰设计模式 木zi_鸣 设计模式
    当想要对已有类的对象进行功能增强时，可以定义一个类，将已有对象传入，基于已有的功能，并提供加强功能。 自定义的类成为装饰类 模仿BufferedReader，对Reader进行包装，体现装饰设计模式 装饰类通常会通过构造方法接受被装饰的对象，并基于被装饰的对象功能，提供更强的功能。 装饰模式比继承灵活，避免继承臃肿，降低了类与类之间的关系 装饰类因为增强已有对象，具备的功能该
  • Linux中的uniq命令 被触发 linux
    Linux命令uniq的作用是过滤重复部分显示文件内容，这个命令读取输入文件，并比较相邻的行。在正常情 况下，第二个及以后更多个重复行将被删去，行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如 果输入文件用“- ”表示，则从标准输入读取。 AD： uniq [选项] 文件 说明：这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个
  • 正则表达式Pattern 肆无忌惮_ Pattern
    正则表达式是符合一定规则的表达式，用来专门操作字符串，对字符创进行匹配，切割，替换，获取。   例如，我们需要对QQ号码格式进行检验 规则是长度6~12位  不能0开头  只能是数字，我们可以一位一位进行比较，利用parseLong进行判断，或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14} &nbs
  • Oracle高级查询之OVER (PARTITION BY ..) 知了ing oraclesql
    一、rank()/dense_rank() over(partition by ...order by ...) 现在客户有这样一个需求，查询每个部门工资最高的雇员的信息，相信有一定oracle应用知识的同学都能写出下面的SQL语句： select e.ename, e.job, e.sal, e.deptno from scott.emp e, (se
  • Python调试 矮蛋蛋 pythonpdb
    原文地址： http://blog.csdn.net/xuyuefei1988/article/details/19399137 1、下面网上收罗的资料初学者应该够用了，但对比IBM的Python 代码调试技巧： IBM：包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试： http://www.ibm.com/d
  • webservice传递自定义对象时函数为空，以及boolean不对应的问题 alleni123 webservice
    今天在客户端调用方法 NodeStatus status=iservice.getNodeStatus(). 结果NodeStatus的属性都是null。 进行debug之后，发现服务器端返回的确实是有值的对象。 后来发现原来是因为在客户端，NodeStatus的setter全部被我删除了。 本来是因为逻辑上不需要在客户端使用setter， 结果改了之后竟然不能获取带属性值的
  • java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针 百合不是茶
    C语言的强大在于可以直接操作指针的地址，通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大，初学者很难掌握， java的出现解决了c，c++中指针的问题 java将指针封装在底层，开发人员是不能够去操作指针的地址，但是可以通过引用来间接的操作：   定义一个指针p来指向a的地址（&是地址符号）：        
  • Eclipse打不开，提示“An error has occurred.See the log file ***/.log” bijian1013 eclipse
    打开eclipse工作目录的\.metadata\.log文件，发现如下错误： !ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139 !MESSAGE Application error !STACK 1 java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai
  • spring aop实例annotation方法实现 bijian1013 javaspringAOPannotation
            在spring aop实例中我们通过配置xml文件来实现AOP，这里学习使用annotation来实现，使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut AdviceMethods.jav
  • [Velocity一]Velocity语法基础入门 bit1129 velocity
    用户和开发人员参考文档 http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html   注释 1.行级注释## 2.多行注释#*  *#   变量定义 使用$开头的字符串是变量定义，例如$var1, $var2,   赋值 使用#set为变量赋值，例
  • 【Kafka十一】关于Kafka的副本管理 bit1129 kafka
    1. 关于request.required.acks   request.required.acks控制者Producer写请求的什么时候可以确认写成功，默认是0， 0表示即不进行确认即返回。 1表示Leader写成功即返回，此时还没有进行写数据同步到其它Follower Partition中 -1表示根据指定的最少Partition确认后才返回，这个在   Th
  • lua统计nginx内部变量数据 ronin47 lua nginx　 统计
    server { listen 80; server_name photo.domain.com; location /{set $str $uri; content_by_lua ' local url = ngx.var.uri local res = ngx.location.capture(
  • java-11.二叉树中节点的最大距离 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class MaxLenInBinTree { /* a. 1 / \ 2 3 / \ / \ 4 5 6 7 max=4 pass "root"
  • Netty源码学习-ReadTimeoutHandler bylijinnan javanetty
    ReadTimeoutHandler的实现思路： 开启一个定时任务，如果在指定时间内没有接收到消息，则抛出ReadTimeoutException 这个异常的捕获，在开发中，交给跟在ReadTimeoutHandler后面的ChannelHandler，例如 private final ChannelHandler timeoutHandler = new ReadTim
  • jquery验证上传文件样式及大小(好用) cngolon 文件上传jquery验证
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.
  • 浏览器兼容【转】 cuishikuan css浏览器IE
    浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里    *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设
  • Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数 daizj shell$#$?特殊变量
    前面已经讲到，变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。例如，$ 表示当前Shell进程的ID，即pid，看下面的代码： $echo $$ 运行结果 29949   特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个
  • 程序设计KISS 原则-------KEEP IT SIMPLE, STUPID! dcj3sjt126com unix
    翻到一本书，讲到编程一般原则是kiss：Keep It Simple, Stupid.对这个原则深有体会，其实不仅编程如此，而且系统架构也是如此。 KEEP IT SIMPLE, STUPID! 编写只做一件事情，并且要做好的程序；编写可以在一起工作的程序，编写处理文本流的程序，因为这是通用的接口。这就是UNIX哲学.所有的哲学真 正的浓缩为一个铁一样的定律，高明的工程师的神圣的“KISS 原
  • android Activity间List传值 dcj3sjt126com Activity
    第一个Activity： import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a
  • tomcat 设置java虚拟机内存 eksliang tomcat 内存设置
    转载请出自出处：http://eksliang.iteye.com/blog/2117772 http://eksliang.iteye.com/ 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space   ------------
  • Android 数据库事务处理 gqdy365 android
    使用SQLiteDatabase的beginTransaction()方法可以开启一个事务，程序执行到endTransaction() 方法时会检查事务的标志是否为成功，如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务，如果没有调用setTransactionSuccessful() 方法则回滚事务。事
  • Java 打开浏览器 hw1287789687 打开网址open浏览器open browser打开url打开浏览器
    使用java 语言如何打开浏览器呢? 我们先研究下在cmd窗口中,如何打开网址 使用IE 打开 D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709 使用火狐打开 D:\software\bin>cmd /c start firefox http://hw1287789
  • ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件 justjavac chromeGooglegoogle apichrome插件
    Chrome Web Store 安装地址： https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice 由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。 同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧
  • 进程VS.线程 m635674608 线程
    资料来源： http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点 优点： 多进程模式最大
  • Linux下安装MemCached 字符串 memcached
    前提准备：1. MemCached目前最新版本为：1.4.22，可以从官网下载到。2. MemCached依赖libevent，因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令，查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n
  • java设计模式之--jdk动态代理（实现aop编程） Supanccy2013 javaDAO设计模式AOP
        与静态代理类对照的是动态代理类，动态代理类的字节码在程序运行时由Java反射机制动态生成，无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作，而且提高了软件系统的可扩展性，因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。 &
  • Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持 wiselyman spring 4
    2.1 默认方法(default method) java8引入了一个default medthod; 用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展 使用default关键字 Spring 4.2支持加载在默认方法里声明的bean 2.2 将要被声明成bean的类 public class DemoService {
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他