Meroy0
Meroy0

用jquery实现淘宝放大镜以及图片切换

放大镜

    1. “缩略图”窗口与“原图”窗口中放置的是同一个图片，但“缩略图”窗口中的图片被缩小为400px，
    而“原图”窗口中的图片保持原始大小，溢出部分设为隐藏
    2. 先确定缩放比例，我们假定原图大小为1000px，缩略图大小为400px，缩放比例为2.5
    3. 首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）
    4. 其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动
    5. 鼠标向右移动，“原图”窗口中的图片向左移动，它们的方向是相反的！这是实现原理中的关键环节
    6. “放大镜”框的大小不是随意设定的，它与放大倍数有关，如果要放大2.5倍，

html部分：

​这里需要使用2长一定比例的图片，在页面中按比例设置2个div中来存放这2长图片，并在小图片的div中按照一定的比例设一个用来放大的区域

<div class="nav">
        <div id="box">
            <img src="./imgs/0_big.jpg" alt="">
            <div id="show">div>
        div>
        <div id='image'>
            <img src="./imgs/0_big.jpg" alt="">
        div>
    div>

    <div>
        <li><img src="./imgs/0_big.jpg" alt="">li>
        <li><img src="./imgs/1_big.jpg" alt="">li>
        <li><img src="./imgs/2_big.jpg" alt="">li>
        <li><img src="./imgs/3_big.jpg" alt="">li>
        <li><img src="./imgs/4_big.jpg" alt="">li>
    div>

用jquery实现淘宝放大镜以及图片切换_第1张图片

主要的CSS样式：溢出隐藏overflow:hidden，隐藏图层display:none，定位position

用的主要事件：鼠标移动事件mousemove()和鼠标hover()

#box {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            position: relative;

        }
        #box img{
            width:600px;
            height:600px;
        }

        #image {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }

        li {
            list-style: none;
            float: left;
            border: 2px solid black;
        }
        li img{
            width: 100px;
            height: 100px;
            margin: 8.3px;
        }

        #show {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top:0;
        }
        .nav {
            height: 600px;
            width: 910px;
            display: flex;
            justify-content: space-between;
        }
        #image img{
            position: absolute;
            width:1300px;
            height:1300px;
        }

jquery部分代码

​最后，实现大图片对应的移动，这里要注意，大图片的一定是与放大区域移动的方向相反的

$('div li img').click(function () {
            $('#box img').attr('src',this.src)
            $('#image img').attr('src',$('#box img')[0].src)
        })
        var box = $('#box')
        var image = $('#image')
        var btn = $('#show')
        var flge = false
        $('#show').mousedown(function () {
            flge = true
            $('#box').mousemove(function (e) {
                if(flge){
                    var moveX = e.pageX - 50;
                var moveY = e.pageY - 50;
                var maxX = e.pageX;
                var maxY = e.pageY;
                if (moveX < 0) {
                    moveX = 0;
                }
                if (moveY < 0) {
                    moveY = 0;
                }
                if (moveX > 400) {
                    moveX = 400;
                }
                if (moveY > 400) {
                    moveY = 400;
                }              
                $('#show').css('left', moveX)
                $('#show').css('top', moveY)
                $('#image img').css('left',(-moveX)*2)
                $('#image img').css('top',(-moveY)*2)
                } 
            })
        })
        $('#show').mouseup(function () {
            flge = false
        })

最后上全部代码


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" nav="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" nav="ie=edge">
    <title>Documenttitle>
    <script src="./jquery-3.4.1.js">script>
    <style>
        #box {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            position: relative;

        }
        #box img{
            width:600px;
            height:600px;
        }

        #image {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }

        li {
            list-style: none;
            float: left;
            border: 2px solid black;
        }
        li img{
            width: 100px;
            height: 100px;
            margin: 8.3px;
        }

        #show {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top:0;
        }
        .nav {
            height: 600px;
            width: 910px;
            display: flex;
            justify-content: space-between;
        }
        #image img{
            position: absolute;
            width:1300px;
            height:1300px;
        }
    style>
head>

<body>
    <div class="nav">
        <div id="box">
            <img src="./imgs/0_big.jpg" alt="">
            <div id="show">div>
        div>
        <div id='image'>
            <img src="./imgs/0_big.jpg" alt="">
        div>
    div>

    <div>
        <li><img src="./imgs/0_big.jpg" alt="">li>
        <li><img src="./imgs/1_big.jpg" alt="">li>
        <li><img src="./imgs/2_big.jpg" alt="">li>
        <li><img src="./imgs/3_big.jpg" alt="">li>
        <li><img src="./imgs/4_big.jpg" alt="">li>
    div>

    <script>
        $('div li img').click(function () {
            $('#box img').attr('src',this.src)
            $('#image img').attr('src',$('#box img')[0].src)
        })
        var box = $('#box')
        var image = $('#image')
        var btn = $('#show')
        var flge = false
        $('#show').mousedown(function () {
            flge = true
            $('#box').mousemove(function (e) {
                if(flge){
                    var moveX = e.pageX - 50;
                var moveY = e.pageY - 50;
                var maxX = e.pageX;
                var maxY = e.pageY;
                if (moveX < 0) {
                    moveX = 0;
                }
                if (moveY < 0) {
                    moveY = 0;
                }
                if (moveX > 400) {
                    moveX = 400;
                }
                if (moveY > 400) {
                    moveY = 400;
                }              
                $('#show').css('left', moveX)
                $('#show').css('top', moveY)
                $('#image img').css('left',(-moveX)*2)
                $('#image img').css('top',(-moveY)*2)
                } 
            })
        })
        $('#show').mouseup(function () {
            flge = false
        })

    script>
body>

html>

你可能感兴趣的:(用jquery实现淘宝放大镜以及图片切换)

  • 【MQ】RabbitMq的可靠性保证 lose_rose777 面试题java中间件网络
    消息队列中的可靠性主要是分为三部分：消息不丢失：确保消息从生产者发送到消费者消息不丢失消息不重复：确保消息不被重复消费消息顺序性：确保消费的顺序性解决方案主要有以下几部分：消息不丢失生产者确认机制持久化机制消费者确认机制高可用消息不重复：消费者确认机制消息重试机制幂等性设计消息顺序性单消费者模式消息编号生产者确认机制作用确保生产者发送的消息成功到达mq，避免消息在传输过程中丢失实现原理生产者会发送
  • spring security解析----架构解读 梦醉天下 编程安全springsecurity
    之前写了一个关于session的，看到大家现在用springsecurity还挺多，相比当时我开始用的时候，大家都在shiro。就写几篇关于springsecurity实践以后的总结吧。先从整体的springsecurity架构设计谈谈。（后面很多内容都是借用官网最新文档）springsecurity是spring框架下的安全解决方案，从刚开始到现在，已经经历了很多版本，但是总的架构设计没有变化。
  • 策略模式-简单工具包 冥王 • 雷利 技术经验设计模式策略模式策略
    策略是大家开发中用的很多模式，特别在解决相同流程多场景的模式下显得尤为的重要，其标准的结构就是一个加载多钟场景的上下文context，一个标准的处理接口handler及若干个根据不同场景的实现。举一个实际中碰到的场景，我要获取用户登录态中的登录信息，因为种种原因，需要根据不同的登录端，从不同环境或是请求域中获取登录态信息，例如APP端，H5，PC，那么根据不同端获取登录态信息就可以通过策略模式实现
  • Java开发高频英语单词800+，熟悉后英文障碍又少了 万小猿En 程序员英语学习指北javajava英语英文单词语法
    高频词就是出现频率很高的单词，它们是我用软件从JavaAPI中常用的5个包（lang,util,io,net,sql）整理的，涉及的文档有1702个。单词的意思大多不是通用的，已经选取了计算机软件开发语境下的含义。你可能也发现了，翻译过来的JavaAPI文档有些表述不好理解或信息有损耗，所以不如直接看英文版JavaAPI文档，而这些高频词可以帮到你。学习建议：熟悉的快速过，不熟悉的多记一下。序号频
  • 物联网网关Web服务器--CGI开发接口 国产化创客 物联网Web服务器嵌入式项目服务器物联网web网关
    1、CGI(公用网关接口)CGI(公用网关接口)规定了Web服务器调用其他可执行程序(CGI程序)的接口协议标准。Web服务器通过调用CGI程序实现和Web浏览器的交互,也就是CGI程序接受Web浏览器发送给Web服务器的信息,进行处理,将响应结果再回送给Web服务器及Web浏览器。CGI程序一般完成Web网页中表单(Form)数据的处理、数据库查询和实现与传统应用系统的集成等工作。CGI程序可以
  • JS在HTML页面内动态创建SVG元素 一粒马豆 html5JavaScript数据可视化SVGJSD3WEB
    最近在学习数据可视化，深入了解了如何在网页上实现数据的动态可视化。比如D3.JS主要应用JS在HTML页面内动态生成SVG元素并绑定数据。以下是我的例程：//通过createElementNS创建svg元素并设置属性varsvg=document.createElementNS('http://www.w3.org/2000/svg','svg');svg.setAttribute("style"
  • 本类方法调用，如何使事务依然生效；调用本类方法为什么要用AopContext.currentProxy() CURRY30_1 mybatisjava
    springAOP中只会切入代理类，从一个类调用另外另外一个类的时候，是会生成代理对象的。但是如果是本类方法的互相调用，那么就不会生成代理对象，随之方法配置的事务也会失效。那么我们可以使用两种方法来避免这种事务失效的问题1.((Service)AopContext.currentProxy()).B()来调用B方法，用这种方式，即使是本类方法的互相调用也能生成代理对象啦((Service)AopC
  • 【华为OD-E卷 - VLAN资源池 100分（python、java、c++、js、c）】 CodeClimb 算法题华为od（A+B+C+D+E卷）收录分享java华为odpythonc++javascript
    【华为OD-E卷-VLAN资源池100分（python、java、c++、js、c）】题目VLAN是一种对局域网设备进行逻辑划分的技术，为了标识不同的VLAN，引入VLANID(1-4094之间的整数)的概念。定义一个VLANID的资源池(下称VLAN资源池)，资源池中连续的VLAN用开始VLAN-结束VLAN表示，不连续的用单个整数表示，所有的VLAN用英文逗号连接起来。现在有一个VLAN资源池
  • C++设计模式——Strategy策略模式 程序员与背包客_CoderZ C/C++设计模式c++设计模式策略模式c语言开发语言
    一，策略模式简介策略模式是一种行为型设计模式，策略模式在软件开发场景中定义了一系列的算法，并将每个算法单独封装在可替换的对象中，使应用程序在运行时可以根据具体的上下文来动态地选择和切换算法，同时保持原有的代码架构不被修改。策略模式的设计使得算法的实现与调用被分离，让算法可以独立于外部客户端进行开发和改动，使用独立的类来封装特定的算法，也避免了不同算法策略之间的互相影响。策略模式能适应多种应用场景，
  • 第四节 MATLAB变量 程序员老冯头 MATLAB教程matlab数据结构算法
    每个MATLAB变量可以是数组或者矩阵。用一个简单的方法指定变量。例如：x=3%definingxandinitializingitwithavalueMATLAB执行上述语句，并返回以下结果：x=3上述的例子创建了一个1-1的矩阵名为x和的值存储在其元素中。我们可以看看另外的例子，x=sqrt(16)%definingxandinitializingitwithanexpressionMATLA
  • Java八股文：MQ篇 皮皮虾我们跑 java开发语言
    3-MQ篇消息中间件用于分布式系统中程序之间的异步通信。它基于消息的发布/订阅或点对点机制，实现高效、可靠、可伸缩的消息传递。3.1RabbitMQ3.1.1RabbitMQ如何保证消息不丢失？消息丢失了怎么办？如何保证消息不丢失？开启生产者确认机制，确保生产者的消息ack能到达队列。开启持久化功能，确保消息未消费前在队列中不会丢失开启消费者确认机制auto，由spring确认消息处理成功后完成a
  • 组合模式 - 组合模式的实现 w(ﾟДﾟ)w吓洗宝宝了 C++从0到1组合模式c++
    引言组合模式（CompositePattern）是一种结构型设计模式，它允许你将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端可以统一地处理单个对象和组合对象，从而简化了代码的复杂性。本文将详细介绍如何在C++中实现组合模式，并通过示例代码帮助读者理解其工作原理。组合模式的基本概念组合模式的核心思想是将对象组织成树形结构，其中每个节点可以是单个对象（叶子节点）或组合对象（容器
  • 代理模式 - 代理模式的应用 w(ﾟДﾟ)w吓洗宝宝了 C++从0到1代理模式c++
    引言代理模式（ProxyPattern）是一种结构型设计模式，它允许你提供一个代理对象来控制对另一个对象的访问。代理对象通常会在客户端和目标对象之间起到中介的作用，从而可以在不改变目标对象的情况下，增加额外的功能或控制访问。本文将详细介绍如何在C++中实现代理模式，并通过示例代码帮助读者理解其应用场景。代理模式的基本概念代理模式的核心思想是通过引入一个代理对象来控制对目标对象的访问。代理对象通常会
  • 推荐洛谷网站：全面解析与实用指南 w(ﾟДﾟ)w吓洗宝宝了 c++c语言javac#python
    洛谷（Luogu）是中国领先的在线编程学习和竞赛平台，自成立以来，已经成为许多编程爱好者的首选平台。洛谷不仅提供了丰富的编程题目和资源，还支持多种编程语言，并且拥有活跃的社区氛围。本文将详细介绍洛谷的核心功能、使用技巧以及推荐理由，帮助你更好地利用洛谷进行编程学习和竞赛训练。一、洛谷的核心功能1.题库与练习洛谷拥有庞大的题库，涵盖了从入门到高级的各种难度级别的题目。这些题目不仅覆盖了基础算法，还包
  • 策略模式 - 策略模式的使用 w(ﾟДﾟ)w吓洗宝宝了 C++从0到1开发语言c++
    引言在软件开发中，设计模式是解决常见问题的经典解决方案。策略模式（StrategyPattern）是行为型设计模式之一，它允许在运行时选择算法的行为。通过将算法封装在独立的类中，策略模式使得算法可以独立于使用它的客户端而变化。本文将详细介绍策略模式的概念、结构、实现以及在C++中的应用。策略模式的概念策略模式定义了一系列算法，并将每个算法封装起来，使它们可以互换。策略模式使得算法可以独立于使用它的
  • 【Python高阶篇】探索人工智能：使用Python构建一个简单的聊天机器人 码农必胜客 python人工智能机器人
    人工智能是计算机科学中一个非常热门的领域，近年来得到了越来越多的关注。它通过模拟人类思考过程和智能行为来实现对复杂任务的自主处理和学习，已经被广泛应用于许多领域，包括语音识别、自然语言处理、机器人技术、图像识别和推荐系统等。本文将介绍如何使用Python构建一个简单的聊天机器人，以展示人工智能的基本原理和应用。我们将使用Python语言和自然语言处理库来构建一个聊天机器人，该机器人可以接收用户的输
  • element ui Table组件内容自适应的情况下实现表头相对页面固定 木有是我 jshtmlvuecssjs
    一、elementuiTable只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。此时有一个弊端，如果页面布局内容较多，会出现两个滚动条，一个table的一个页面的，我们的需求是页面高度随着数据数量而自适应撑开，而不是固定table视窗的高度二、效果图对比如下：三、实现步骤1、首先监听页面滚动事件、因为滚动事件触发太过频繁我就带了500毫秒的节流mou
  • Java IO模型：BIO、NIO、AIO讲解 我心向阳iu #Java进阶Java面试知识点精讲javajvmlinux
    文章目录IO首先：什么是IO？为什么要改进IO？BIO、NIO、AIOBIONIONIO实现原理Channel(通道)：Buffer(缓冲区)：Selector(选择器)：AIOBIO、NIO、AIO比较NIO和BIO的比较怎么区别NIO与AIOBIO、NIO、AIO区别举例说明BIO、NIO、AIO适用场景分析:BIO、NIO、AIO代码实战BIO、NIO、AIO相关问题思考：怎么理解IO是面向
  • 企业数字化运维运营体系规划设计方案PPT 公众号：优享智库 数字化转型数据治理主数据数据仓库运维大数据
    这份文件是关于企业数字化运维运营体系规划设计的综合解决方案，主要围绕构建高效、安全、稳定和集约的运维运营体系展开。以下是文件的核心要点总结：设计原则与目标：设计原则：包括自主可控、适配自身管理体系、稳快结合。强调不依赖厂商，通过体系变革实现统一运营运维，以及平衡创新与稳定性。目标：围绕“安全、稳定、高效、集约”建设运维运营体系，支撑高效警务运行。运维运营体系架构：强调构建“标准化、自助化、可视化、
  • 通过python实现发送钉钉个人工作通知 白白不白zab pyhtonpython钉钉开发语言
    一、钉钉官方开放文档https://open.dingtalk.com/document/isvapp/before-you-start在开发前需要看一遍官方开放文档的相关内容，来避免一些奇奇怪怪的问题出现，比如新旧版接口域名变更，请求方式不同、调用频率限制、是否开放对应接口权限、白名单等等。二、开发前准备首先开发使用的账号需要有钉钉管理员权限在钉钉后台自建应用获取应用AGENT_ID,APP_K
  • vue 前端显示图片加token_手摸手，带你用vue撸后台 系列二(登录权限篇) weixin_39562579 vue前端显示图片加tokenvue本地存储vue编辑页面和新增
    完整项目地址：vue-element-adminhttps://github.com/PanJiaChen/vue-element-admin前言拖更有点严重，过了半个月才写了第二篇教程。无奈自己是一个业务猿，每天被我司的产品虐的死去活来，之前又病了一下休息了几天，大家见谅。进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功
  • pex无人守护安装linux系统脚本 weixin_33800463
    linux系统安装大体分为两个阶段1，anaconda阶段（anaconda程序借助linux内核和initrd文件实现），也称配置阶段在这个阶段是安装配置阶段，配置语言，键盘，等信息。同时boot提示符下能够向内核传递参数.2,安装阶段.安装前脚本配置安装软件包阶段安装后脚本配置...........................................................
  • Python打包和部署利器:Pex ivwdcwso 开发运维python开发语言开发
    在Python项目开发中,如何高效地打包和部署代码一直是一个挑战。传统的方式需要在目标环境中预先安装所有依赖,非常繁琐。而Pex则为我们提供了一种更简单、更可靠的解决方案。一、Pex是什么?Pex的核心在于.pex文件,这是一种自包含的Python可执行环境。它类似于virtualenv,但更轻量、更易于部署。.pex文件包含了你的Python代码、依赖库以及运行所需的Python解释器(可选)。
  • Android外接USB扫码枪 云启软件 Android原生android
    前言公司的设备以前接入的都是串口的扫码头，优点是直接通过串口读取流里面的数据就OK了，缺点是你需要知道每一款扫码器的型号以获取波特率及Android设备的串口地址。因为现在usb扫码器越来越方便且即插即用，不需要额外供电以及价格便宜等特点，公司以后开发的设备都打算采用usb扫码器。所以我开始尝试接入usb扫码器，下面就是我在接入时的方法以及遇到的一些问题。1.USB扫码器接入前面我有说过，usb扫
  • python程序发钉钉消息 乌11111 python
    参考：使用python通过接口方式发送钉钉消息分两步：1.在钉钉群---智能群助手里添加机器人，拿到webhook链接，设置关键词。2.写python代码，用requests请求接口的方式。参考代码和实现结果如下。#python发钉钉消息importjson,requestsdefsendDing(msg):dingding_url='https://oapi.dingtalk.com/robot
  • Python支持向量机（SVM）算法：面向对象的实现与案例详解 闲人编程 进阶算法案例支持向量机算法python深度学习数据分析
    目录Python支持向量机（SVM）算法：面向对象的实现与案例详解引言一、支持向量机算法概述1.1支持向量机的基本思想1.2SVM的分类问题1.3SVM的优化目标二、面向对象的SVM实现2.1类的设计2.2Python代码实现2.3代码详解三、案例分析3.1案例一：鸢尾花分类问题描述数据准备模型训练与预测输出结果3.2案例二：手写数字识别问题描述数据准备模型训练与预测输出结果四、SVM的优化与核方
  • 字符串算法笔记 骑狗看夕阳 算法笔记算法笔记
    字符串笔记说到字符串，首先我们要注意的就是字符串的输入以及输出，因为字符串的输入格式以及要求也分为很多种，我们就来说几个比较常见的格式getsgetsgets我们先来说这个函数的含义ÿ
  • 初识 内嵌iframe 家里有只小肥猫 iframevue前端
    iframe的基本介绍与使用介绍iframe（内嵌框架）是HTML中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。基础使用标签的基本用法如下：例如：属性除了src属性，还可以使用其他属性来设置iframe的行为和样式，如allow、allowfullscreen、class、frame
  • Vue2.0+ElementUI实现查询条件展开和收起功能组件 热忱1128 elementui前端javascript
    一、需求el-form如果查询条件过多，影响页面的展示效果。查询条件表单是我们系统中非常常见的功能，我们需要把它封装成一个通用的组件，方便在系统开发中提升开发效率。除了在实现基本查询条件的功能上，还需要实现多条件的折叠和展开功能二、效果图三、代码示例封装查询条件表单组件SearchButton.vue查询重置{{word}}exportdefault{props:{showAll:{type:Bo
  • 深度ResUnet与ResUnet++：新一代的语义分割神器 倪澄莹George
    深度ResUnet与ResUnet++：新一代的语义分割神器去发现同类优质开源项目:https://gitcode.com/在这个数据驱动的时代，深度学习模型在图像处理领域展现出了强大的潜力，尤其是在语义分割任务中。今天，我们向您推荐一个基于PyTorch实现的开源项目——DeepResUnet和ResUnet++。这两个模型源自于学术界的最新研究，旨在提高图像分割的准确性和效率。项目介绍这个开源
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他