北极光之夜。
北极光之夜。

放大镜特效 html+css+js

效果：

前言：

思路是看up主xiao-high的，然后自己也弄了一个。效果有一个缺点就是图片边缘区域放大不了。

实现：

  1. 定义标签：.frame是底层盒子，img是小图片，宽设置100%，跟底层盒子一样。.circle是放大镜，.circle里的img是放在.circle里的大图片。
 <div class="frame">
        <img src="25.jpg" width="100%">
        <div class="circle">
            <img src="25.jpg">
        div>
div>
  1. 底层盒子样式：高就不设置了，让小图片把盒子撑开。因为宽是800px，所以放的图片本身宽像素大过800才行，最好是那种电脑壁纸，够大够清晰。
 .frame{
     
            width: 800px;
            min-height: 200px;
            position: relative;
        }
  1. 设置放大镜样式，设置绝对定位。
 .circle{
     
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            border: 5px solid rgb(0, 0, 0);
            box-shadow: 0 0 5px rgb(0,0,0);
            border-radius: 50%;
            overflow: hidden;
            cursor:pointer;
            opacity: 0;
        }
 .frame:hover .circle{
     
            opacity: 1;
        }

border: 5px solid rgb(0, 0, 0); 黑色边框。
box-shadow: 0 0 5px rgb(0,0,0); 阴影。
border-radius: 50%; 角的弧度。
cursor:pointer; 鼠标经过样式为小手。
opacity: 0; 透明度为0，鼠标经过为1。

  1. 放大镜里的图片样式，不设置宽高了，让它原本大小就好：
 .circle img{
     

            position: absolute;
            top: 0;
            left: 0;
        }
  1. js部分，注释也在里面了：
<script>

   /*  先获取元素，底层盒子，放大镜，放大镜里的大图 */
      var frame = document.querySelector('.frame');
      var circle = document.querySelector('.circle');
      var picture = document.querySelector('.circle img');
     
      /*  给底层盒子绑定一个鼠标移动的事件 */
      frame.addEventListener('mousemove',function(e){
     

   /*  放大镜左右移动 */
            /*  获取鼠标距离左边距离 */
         let x = e.clientX;
            /*  获取底层盒子距离左边距离 */
         let left = frame.offsetLeft;
              /*  放大镜左右移动距离就是 x 减 left 再减去本身宽度一半 */
         let moveX = x - left - circle.offsetWidth/2; 
               /*  如果是移动距离是负数就等于零。相当于放大镜在底层盒子最左边时，不要让他跑出去 */
          if(moveX<=0)      moveX=0;  
            /* 以此类推，相当于放大镜在底层盒子最右边时，不要让他跑出去 */
         if(moveX>=frame.offsetWidth - circle.offsetWidth )   moveX= frame.offsetWidth - circle.offsetWidth ;
          /* 放大镜移动 */
         circle.style.left = moveX + 'px'; 
           /* 放大镜里大图片移动距离。就是按比例算，鼠标移动距离/小图宽度=大图移动距离/大图宽度  可以想象一下这个比例。*/
         let moveleft = ( moveX + circle.offsetWidth/2 ) / frame.offsetWidth * picture.offsetWidth - circle.offsetWidth/2;

          /* 大图移动，向左移动，所以是负数 */
         picture.style.left = -moveleft + 'px'; 

 /* 放大镜上下移动，跟上面左右移动是一样的原理 */
        let y = e.clientY;
         let top = frame.offsetTop;
         let moveY = y - top - circle.offsetHeight/2;
          if(moveY<=0)
            moveY=0;  
         if(moveY>=frame.offsetHeight - circle.offsetHeight )
           moveY= frame.offsetHeight - circle.offsetHeight ;
 
         circle.style.top = moveY + 'px'; 

         let movetop = ( moveY + circle.offsetHeight/2 ) / frame.offsetHeight * picture.offsetHeight - circle.offsetHeight/2;


         picture.style.top = -movetop + 'px';


        

      })

    </script>

完整代码：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
      
            margin: 0;
            padding: 0;
            box-sizing:border-box;
        }
        body{
      
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        
        .frame{
      
            width: 800px;
            min-height: 200px;
            position: relative;
        }
        .frame:hover .circle{
      
            opacity: 1;
        }
        .circle{
      
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            border: 5px solid rgb(0, 0, 0);
            box-shadow: 0 0 5px rgb(0,0,0);
            border-radius: 50%;
            overflow: hidden;
            cursor:pointer;
            opacity: 0;
        }

        .circle img{
      

            position: absolute;
            top: 0;
            left: 0;
        }
    style>
head>
<body>

    <div class="frame">
        <img src="25.jpg" width="100%">
        <div class="circle">
            <img src="25.jpg">
        div>
div>   
    <script>
      var frame = document.querySelector('.frame');
      var circle = document.querySelector('.circle');
      var picture = document.querySelector('.circle img');
     
      frame.addEventListener('mousemove',function(e){
      

       /*  左右 */
         let x = e.clientX;
         let left = frame.offsetLeft;
         let moveX = x - left - circle.offsetWidth/2; 
          if(moveX<=0)      moveX=0;  
         if(moveX>=frame.offsetWidth - circle.offsetWidth )   moveX= frame.offsetWidth - circle.offsetWidth ;
 
         circle.style.left = moveX + 'px'; 

         let moveleft = ( moveX + circle.offsetWidth/2 ) / frame.offsetWidth * picture.offsetWidth - circle.offsetWidth/2;


         picture.style.left = -moveleft + 'px'; 

      /* 上下 */
        let y = e.clientY;
         let top = frame.offsetTop;
         let moveY = y - top - circle.offsetHeight/2;
          if(moveY<=0)
            moveY=0;  
         if(moveY>=frame.offsetHeight - circle.offsetHeight )
           moveY= frame.offsetHeight - circle.offsetHeight ;
 
         circle.style.top = moveY + 'px'; 

         let movetop = ( moveY + circle.offsetHeight/2 ) / frame.offsetHeight * picture.offsetHeight - circle.offsetHeight/2;


         picture.style.top = -movetop + 'px';


        

      })

    script>
body>
html>

最后：

其它文章~：
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
炫彩流光按钮 html+css
记一些css属性总结（一）
Sass总结笔记
…等等

最后：

Bye~

你可能感兴趣的:(前端,html+css的常见特效,放大镜,html,css,js)

  • OPC/MQTT工业通信软件OPLink 牛宝柱
    OPLink是上海泗博自主研发的基于OPC数据采集及转发，OPC数据到MQTT通信的产品。它是基于上海泗博多年的OPC应用经验和工业通信产品的开发背景，推出的OPC/MQTT工业通信软件。软件设计简洁、实用、稳定。同时，OPLink还具备与KepwareLinkMaster相似的数据转发功能，可实现PLC设备间的自主数据通信。功能升级实时性增强：针对复杂的工业自动化环境，OPLink优化了数据传输
  • 安卓开发 手动构建 .so XCZHONGS android
    手动构建.so（兼容废弃ABI）下载旧版NDK（推荐r16b）地址：https://developer.android.com/ndk/downloads/older_releases下载NDKr16b（最后支持armeabi、mips、mips64的版本）使用ndk-build手动构建（不使用Gradle）在源文件目录下执行D:\ideal\androidstudio\sdk\ndk\16.1.
  • SnowConvert：自动化数据迁移的技术解析与最佳实践 weixin_30777913 迁移学习数据库运维
    SnowConvert是Snowflake生态系统的关键迁移工具，专为将传统数据仓库（如Oracle、Teradata、SQLServer等）的代码资产高效、准确地转换为Snowflake原生语法而设计。以下基于官方文档对其技术原理、工作流程及最佳实践进行深入分析：一、SnowConvert核心技术解析精准的语法映射引擎语言支持：深度解析源系统特有语法（OraclePL/SQL,TeradataB
  • GitHub Actions与AWS OIDC实现安全的ECR/ECS自动化部署 ivwdcwso 运维与云原生githubaws安全ecrecsoldcCI/CD
    引言在现代云原生应用开发中，实现安全、高效的CI/CD流程至关重要。本文将详细介绍如何利用GitHubActions和AWSOIDC（OpenIDConnect）构建一个无需长期凭证的安全部署管道，将容器化应用自动部署到AmazonECR和ECS服务。架构概述整个解决方案的架构包含三个主要部分：GitHub端：代码仓库和GitHubActions工作流AWS端：OIDC身份验证、ECR容器仓库和E
  • ArkTS 开发学习路径全攻略：从入门到实战 码农乐园 学习
    随着HarmonyOS的持续演进，ArkTS（ArkTypeScript）已成为鸿蒙系统的主力开发语言。特别是HarmonyOSNEXT推行纯鸿蒙化后，ArkTS成为构建鸿蒙原生应用的唯一选择。本文将为你梳理一套系统化的学习路径，从语法基础到实战项目，再到系统能力调用与分布式开发，一步步带你成为合格的鸿蒙开发者。第一阶段：ArkTS语言和HarmonyOS基础入门学习目标：掌握ArkTS基础语法；
  • AWS Lambda与RDS连接优化之旅 t0_54manong 编程问题解决手册aws云计算个人开发
    在云计算的时代，AWSLambda与RDS的结合为开发者提供了高效且灵活的解决方案。然而，在实际应用中，我们常常会遇到一些性能瓶颈。本文将通过一个真实案例，探讨如何优化AWSLambda与RDS之间的连接，以提高API的响应速度。背景介绍最近，我们在AWS上部署了一个使用Dotnet6开发的API，它通过APIGateway暴露给外部，并连接到同VPC内的MySQLAuroraRDS数据库。部署前
  • 前端用MQTT协议通信的场景和好处 CreatorRay 前端网络面试前端MQTT网络协议物联网
    上家公司中前端项目有用MQTT协议和硬件通信的场景，虽然很早就听说过MQTT协议，但是这是第一次在前端项目里基于MQTT协议做网络通信。当时没了解太多，工作中只做好了代码层面的工作，并没有深入了解MQTT协议的好处和适合的应用场景。在前端项目中，应该99%的情况都会基于HTTP和WebSocket来进行网络通信，使用MQTT在前端里确实比较小众。目前可能只会在物联网项目中，需要跟硬件通信的前提下，
  • “自动化失败归因”测试集-Who&When liliangcsdn 自动化人工智能语言模型
    在MAS(Multi-Agent系统)中，Agent之间自主协作、信息链条长，异常常见而且诊断困难。Who&When就是测者MAS系统异常诊断的benchmark。Who&When的prompt问题来源于GAIAandAssistantBench，包含了127个LLMMulti-Agent系统中收集的异常日志，并经过系统和人工处理。Who&When样本配有如下所示的细粒度标注：“谁”(Who)：哪
  • 游戏寻路之A*算法（GUI演示） jforgame 从零开始搭建游戏服务器框架javaA星自动寻路
    一、A*算法介绍A*算法是一种路径搜索算法，用于在图形网络中找到最短路径。它结合了Dijkstra算法和启发式搜索的思想，通过综合利用已知的最短路径和估计的最短路径来优化搜索过程。在游戏自动寻路得到广泛应用。二、A*算法的基本思想在图形网络中选择一个起点和终点。维护两个列表：开放列表和关闭列表。开放列表用于存储待考虑的节点，关闭列表用于存储已考虑过的节点。将起点加入开放列表。循环以下工作当open
  • 从历史到未来：《今日简史》与《原则》的世界格局研究 喝醉酒的小白 破万卷历史
    目录标题一、引言：两种视角下的世界格局二、世界观比较：历史演进与系统运行2.1赫拉利的人类中心史观2.2达利欧的系统论世界观2.3世界观的异同与互补三、方法论比较：历史叙事与系统建模3.1赫拉利的历史叙事方法3.2达利欧的系统建模方法3.3方法论的异同与互补四、核心议题比较：科技、经济与全球治理4.1科技变革：颠覆性力量的不同解读4.2经济周期：历史规律的不同阐释4.3全球治理：未来秩序的不同展望
  • Linux ps 指令 halugin Linux指令linux运维
    Linuxps指令ps（ProcessStatus）是Linux系统中用于查看进程状态的核心命令行工具。它提供系统当前运行进程的快照，显示进程ID、CPU和内存使用情况、运行状态等信息。作为系统管理员或开发人员，ps是监控系统资源、排查性能问题和管理系统进程的必备工具。其灵活的选项和输出格式使其适用于从简单查询到复杂分析的各种场景。什么是ps指令？概述ps是一个经典的Linux/Unix命令，用于
  • Linux netstat 指令 halugin Linux指令linux运维
    Linuxnetstat指令netstat（NetworkStatistics）是Linux系统中用于查看网络状态、连接、路由表和接口统计信息的经典命令行工具。它为系统管理员和开发人员提供了强大的网络诊断功能，帮助分析网络连接、监控流量以及排查网络问题。尽管在现代Linux系统中，netstat正在被更新的工具（如ss）部分取代，但其简单性和广泛适用性使其仍然是许多场景下的首选工具。什么是nets
  • Linux ss 指令 halugin Linux指令linux运维
    Linuxss指令ss（SocketStatistics）是Linux系统中用于显示网络套接字（socket）信息的现代命令行工具，是netstat的继任者，性能更高、输出更简洁。它提供详细的网络连接、监听端口和协议统计信息，广泛用于网络监控、故障排查和性能分析。相比传统的netstat，ss直接从内核获取数据显示更快，功能更强大，适合现代Linux系统。什么是ss指令？ss是Linux系统中的一
  • 微服务分布式事务的几种解决方案及应用场景 凌晨四点的打铁声 分布式事务微服务分布式数据库springcloud
    文章目录分布式事务的几种方案1.2pcseata的AT一阶段二阶段-回滚二阶段-提交2.柔性事务——TCC事务补偿型3.柔性事务-最大努力通知型方案4.柔性事务-可靠消息+最终一致性方案（异步确保型）分布式事务的几种方案2pc模式TCC模式：柔性事务——TCC事务补偿型柔性事务-最大努力通知型方案柔性事务-可靠消息+最终一致性方案（异步确保型）1.2pc2pc就是2phasecommit二阶段提交
  • 鸿蒙HarmonyOS应用开发之在非ArkTS线程中回调ArkTS接口 「已注销」 harmonyOS移动开发鸿蒙开发harmonyos鸿蒙鸿蒙开发组件化uiArkts移动开发
    场景介绍ArkTS是单线程语言，通过NAPI接口对ArkTS对象的所有操作都须保证在同一个ArkTS线程上进行。本示例将介绍通过napi_get_uv_event_loop和uv_queue_work实现在非ArkTS线程中通过NAPI接口回调ArkTS函数。使用示例接口声明、编译配置以及模块注册接口声明//index.d.tsexportconstqueueWork:(cb:(arg:numbe
  • 【Python】 如何使用.whl文件安装Python包？ civilpy python开发语言
    基本原理在Python的世界中，.whl文件是一种分发格式，它代表“Wheel”。Wheel是一种Python包格式，旨在提供一种快速、可靠且兼容的方式，用于安装Python库。与源代码包相比，Wheel文件是预编译的，这意味着它们已经包含了编译后的扩展模块，这使得安装过程更快，更简单。代码示例以下是使用.whl文件安装Python包的示例步骤：示例1：基本安装假设你已经下载了一个名为exampl
  • AIRIOT物联网低代码平台如何配置MQTT驱动？ AIRIOT 网络服务器物联网
    MQTT驱动配置简介MQTT全称为消息队列遥测传输（英语：MessageQueuingTelemetryTransport），是ISO标准（ISO/IECPRF20922）下基于发布(Publish)/订阅(Subscribe)范式的消息协议，工作在TCP/IP协议族上。MQTT最大优点在于，可以用极少的数据和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协
  • Spring Cloud 微服务架构部署模式 Java技术栈实战 架构springcloud微服务ai
    SpringCloud微服务架构部署模式：从单体到云原生的进化路径关键词：SpringCloud、微服务架构、部署模式、容器化、Kubernetes、服务网格、DevOps摘要：本文系统解析SpringCloud微服务架构的核心部署模式，涵盖传统物理机部署、容器化部署、Kubernetes集群编排、服务网格集成等技术栈。通过技术原理剖析、实战案例演示和最佳实践总结，揭示不同部署模式的适用场景、技术
  • Redis配置与优化 ?ccc? redis数据库缓存
    目录一：Redis介绍1：关系数据库与非关系型数据库2：Redis基础2.1Redis简介2.2Redis安装部署2.3配置参数3：Redis命令工具3.1redis-cli命令行工具3.2redis-benchmark测试工具4：Redis数据库常用命令4.1key相关命令4.2多数据库常用命令二：Redis持久化1：RDB和AOF的区别2：RDB和AOF的优缺点3：Redis持久化配置三：性能
  • Shell 编程之正则表达式与文本处理器
    目录一：正则表达式二：基础正则表达式1.基础正则表达式示例（1）查找特定字符（2）利用中括号“[]”来查找集合字符（3）查找行首“^”与行尾字符“$”（4）查找任意一个字符“.”与重复字符“*”（5）查找连续字符范围“{}”2.元字符总结3.扩展正则表达式二：文本处理器1.sed工具（1）输出符合条件的文本(p表示正常输出)（2）删除符合条件的文本(d)（3）替换符合条件的文本（4）迁移符合条件的
  • Nginx 核心功能 ?ccc? nginx服务器网络
    目录一：正向代理1：编译安装Nginx（1）安装支持软件（2）创建运行用户、组和日志目录（3）编译安装Nginx（4）添加Nginx系统服务2：配置正向代理二：反向代理1：配置nginx七层代理2：配置nginx四层代理三：Nginx缓存1：缓存功能的核心原理和缓存类型2：代理缓存功能设置四：Nginxrewrite和正则一：正向代理正向代理（ForwardProxy）是一种位于客户端和原始服务器
  • 简单介绍物联网MQTT协议 Zio_Zhou 计算机网络linux
    在学习mqtt应用层协议之前，我们先来介绍一下发布/订阅模型以及请求/响应模型两种模型。请求/响应模型是网络应用系统中最常见的模型。在这种模型中，一个客户端（如一个Web浏览器）向服务器发送一个请求，服务器处理这个请求并返回一个响应。这个过程是同步的，意味着客户端需要等待服务器的响应。这种模型的优点是简单和易于理解，但在处理大量并发请求时可能会导致性能问题。发布/订阅模型。在这种模型中，有一个或多
  • VB.NET,C#字典对象来保存用户数据,支持大小写 专注VB编程开发20年 java开发语言
    用这个保存的,登录时大小写不一样会不会无法识别根据你提供的SaveUsersToJson方法，我注意到你使用了JSON序列化来保存用户数据，但没有显式指定字典的比较器。这意味着在反序列化时，默认会使用区分大小写的比较器，导致大小写不同的用户名无法正确匹配。问题分析当你保存用户数据时：PrivateSubSaveUsersToJson(usersAsDictionary(OfString,UserI
  • 疲劳检测与行为分析：工厂智能化实践 智驱力人工智能 安全智慧城市行为识别人员属性识别疲劳检测抽烟检测徘徊检测
    视觉分析算法赋能工厂疲劳与安全管理一、背景与需求在制造业中，疲劳作业是导致安全事故和效率下降的核心因素之一。传统人工巡检存在覆盖面不足、响应滞后等问题，而基于视觉分析的智能监控系统通过多算法协同，可实现全天候、高精度的疲劳检测与行为管理。本文围绕疲劳检测算法、人员计数算法、抽烟检测算法及徘徊检测算法，探讨其在工厂场景中的技术实现与应用价值。二、技术实现疲劳检测算法原理：基于PERCLOS（眼睑闭合
  • 三阶落地：腾讯云Serverless+Spring Cloud的微服务实战架构 大熊计算机 #腾讯云架构腾讯云serverless
    云原生演进的关键挑战（1）传统微服务架构痛点资源利用率低（非峰值期资源闲置率>60%）运维复杂度高（需管理数百个容器实例）突发流量处理能力弱（扩容延迟导致P99延迟飙升）（2）Serverless的破局价值腾讯云SCF（ServerlessCloudFunction）提供：毫秒级计费粒度（成本下降40%~70%）百毫秒级弹性伸缩（支持每秒万级并发扩容）零基础设施运维同步调用异步事件用户请求API网
  • Nordic智能楼宇自动化系统方案/nrf-knx-iot Halfway-- Product物联网iot
    1:KNXIoT通过物联网（IoT）的强大功能和灵活性扩展了KNX标准的能力。因此，它允许KNX设备与物联网设备和云服务集成，从而能够创建先进的智能楼宇自动化系统。通过KNXIoT，设备可以在IP网络上进行通信，从而在设备连接和控制方式上提供更大的灵活性2:KNXIoT由3个主要负责数据互操作性的主要元素组成：KNXIoT第三方API一个标准化的API，通过一个抽象层连接KNX特定知识和第三方应用
  • 鸿蒙 ArkTS 开发知识点全体系（HarmonyOS NEXT 架构） 码农乐园 harmonyos架构华为
    一、基础知识：ArkTS语言与项目结构1.ArkTS基础语法（华为增强TypeScript）类型声明与推导函数与箭头函数类、接口、枚举、泛型模块导入与导出装饰器语法（@Entry、@Component等）异步编程（async/await）2.DevEcoStudio开发环境项目创建与构建模拟器配置与真机调试工程结构（entry、pages、resources、common、config.json）
  • 如何安装 `.whl` 文件（Python Wheel 包） 喝醉酒的小白 LiunxPython模块python开发语言
    目录标题如何安装`.whl`文件（PythonWheel包）安装前提安装方法（3种）方法1：直接使用pip安装（推荐）方法2：先进入文件目录再安装方法3：使用绝对路径（适合脚本中调用）⚠️常见问题解决问题1：版本不兼容错误问题2：缺少依赖问题3：权限不足验证安装进阶技巧如何安装.whl文件（PythonWheel包）.whl文件是Python的二进制分发格式（Wheel格式），用于快速安装Pyth
  • 【开源项目】「安卓原生3D开源渲染引擎」：Sceneform‑EQR
    「安卓原生3D开源渲染引擎」：Sceneform‑EQR渲染引擎“那一夜凌晨3点，第一次提交PR的手在抖……”——我深刻体会这种忐忑与激动。仓库地址：(github.com)。一、前言：开源对我意味着什么DIY的自由Vs.工业化的束缚刚入Android原生开发时，我习惯自己在项目里嵌入各种3D渲染／AR／XR模块，结构臃肿、流程混乱。当我知道GoogleSceneformSDK被弃用，起初只是出于
  • GPT-4o重磅升级！只需一条指令，教你秒出SCI级专业科研图！ 智写AI AI学术写作指南信息可视化人工智能
    经过数月爆肝，七哥终于完成专业的学术AI使用教程，估计也有个80万字的详细操作指南。分为多个细分的专业写作场景，跟着一步一步操作，借助ChatGPT做学术、干科研、写论文、课题申报都变得超简单。欢迎加我交流（yida985），祝你一臂之力。七哥之前写过关于用AI生成流程图的教程，不过需要借助其他软件才能搞定完美的流程图。近期GPT-4o全新推出了“生图功能”，这个生图的过程就更加方便轻松了，全能G
  • js动画html标签（持续更新中） 843977358 htmljs动画mediaopacity
    1.jQuery 效果 - animate() 方法    改变 "div" 元素的高度：    $(".btn1").click(function(){      $("#box").animate({height:"300px
  • springMVC学习笔记 caoyong springMVC
    1、搭建开发环境    a>、添加jar文件，在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar    b>、在web.xml中配置前端控制器       <servlet>     &nbs
  • POI中设置Excel单元格格式 107x poistyle列宽合并单元格自动换行
    引用：http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结： 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.
  • jquery 获取A href 触发js方法的this参数 无效的情况 一炮送你回车库 jquery
    html如下：  <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>"   j
  • md5 3213213333332132 MD5
    import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq
  • 完全卸载干净Oracle11g sophia天雪 orale数据库卸载干净清理注册表
    完全卸载干净Oracle11g A、存在OUI卸载工具的情况下：     第一步：停用所有Oracle相关的已启动的服务；     第二步：找到OUI卸载工具：在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中         &
  • apache 的access.log 日志文件太大如何解决 darkranger apache
    CustomLog logs/access.log common  此写法导致日志数据一致自增变大。 直接注释上面的语法 #CustomLog logs/access.log common 增加： CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log 
  • Hadoop单机模式环境搭建关键步骤 aijuans 分布式
            Hadoop环境需要sshd服务一直开启，故，在服务器上需要按照ssh服务，以Ubuntu Linux为例，按照ssh服务如下： sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件，将JAVA_HOME设置为Java
  • PL/SQL DEVELOPER 使用的一些技巧 atongyeye javasql
    1 记住密码 这是个有争议的功能，因为记住密码会给带来数据安全的问题。 但假如是开发用的库，密码甚至可以和用户名相同，每次输入密码实在没什么意义，可以考虑让PLSQL Developer记住密码。 位置：Tools菜单－－Preferences－－Oracle－－Logon HIstory－－Store with password 2 特殊Copy 在SQL Window
  • PHP：在对象上动态添加一个新的方法 bardo 方法动态添加闭包
    有关在一个对象上动态添加方法，如果你来自Ruby语言或您熟悉这门语言，你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象，并给这个对象添加一个额外的方法。   好！不说Ruby了，让我们来谈谈PHP   PHP未提供一个“标准的方式”做这样的事情，这也是没有核心的一部分...   但无论如何，它并没有说我们不能做这样
  • ThreadLocal与线程安全 bijian1013 javajava多线程threadLocal
    首先来看一下线程安全问题产生的两个前提条件：  1.数据共享，多个线程访问同样的数据。  2.共享数据是可变的，多个线程对访问的共享数据作出了修改。    实例：         定义一个共享数据： public static int a = 0;        
  • Tomcat 架包冲突解决 征客丶 tomcatWeb
    环境： Tomcat 7.0.6 win7 x64 错误表象：【我的冲突的架包是：catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突，不知道其他架包冲突时是不是也报这个错误】 严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep
  • 【Scala三】分析Spark源代码总结的Scala语法一 bit1129 scala
    Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象，等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class    2. 方法默认值 defaultMinPartitions就是一个默认值，类似C++的方法默认值    
  • java 线程池管理机制 BlueSkator java线程池管理机制
    编辑 Add Tools   jdk线程池   一、引言 第一：降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二：提高响应速度。当任务到达时，任务可以不需要等到线程创建就能立即执行。第三：提高线程的可管理性。线程是稀缺资源，如果无限制的创建，不仅会消耗系统资源，还会降低系统的稳定性，使用线程池可以进行统一的分配，调优和监控。  
  • 关于hql中使用本地sql函数的问题（问-答） BreakingBad HQL存储函数
    转自于：http://www.iteye.com/problems/23775 问： 我在开发过程中，使用hql进行查询（mysql5）使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好，但是我直接把它写在hql语句里面（from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
  • 读《研磨设计模式》-代码笔记-迭代器模式-Iterator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象内部表示 * * 个人觉得，为了不暴露该
  • 常用SQL chenjunt3 oraclesqlC++cC#
    --NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA
  • 数学是科学技术的语言 comsci 工作活动领域模型
      从小学到大学都在学习数学，从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学，看起来好像掌握了这些数学知识，但是在工作中却很少真正用到这些知识，为什么？    最近在研究一种开源软件-CARROT2的源代码的时候，又一次感觉到数学在计算机技术中的不可动摇的基础作用，CARROT2是一种用于自动语言分类（聚类）的工具性软件，用JAVA语言编写，它
  • Linux系统手动安装rzsz 软件包 daizj linuxszrz
    1、下载软件 rzsz-3.34.tar.gz。登录linux，用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf  rzsz-3.34.tar.gz 3、安装  cd rzsz-3.34 ; make posix 。注意：这个软件安装与常规的GNU软件不
  • 读源码之:ArrayBlockingQueue dieslrae java
        ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时 不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
  • C语言学习九枚举的定义和应用 dcj3sjt126com c
    枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne
  • Vagrant 三种网络配置详解 dcj3sjt126com vagrant
    Forwarded port Private network Public network Vagrant 中一共有三种网络配置，下面我们将会详解三种网络配置各自优缺点。 端口映射(Forwarded port)，顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上，访问宿主计算机端口时，请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为： c
  • 16.性能优化-完结 frank1234 性能优化
    性能调优是一个宏大的工程，需要从宏观架构(比如拆分，冗余，读写分离，集群，缓存等)， 软件设计（比如多线程并行化，选择合适的数据结构）， 数据库设计层面（合理的表设计，汇总表，索引，分区，拆分，冗余等） 以及微观（软件的配置，SQL语句的编写，操作系统配置等）根据软件的应用场景做综合的考虑和权衡，并经验实际测试验证才能达到最优。 性能水很深， 笔者经验尚浅 ，赶脚也就了解了点皮毛而已，我觉得
  • Word Search hcx2013 search
    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
  • Spring4新特性——Web开发的增强 jinnianshilongnian springspring mvcspring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装配置tengine并设置开机启动 liuxingguome centos
    yum install gcc-c++  yum install pcre pcre-devel  yum install zlib zlib-devel  yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens
  • 第14章 工具函数（上） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Xelsius 2008 and SAP BW at a glance blueoxygen BOXelsius
    Xelsius提供了丰富多样的数据连接方式，其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢？ 以下Wiki文章应该提供了全面的概览。   http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
  • oracle表空间相关 tongsh6 oracle
    在oracle数据库中，一个用户对应一个表空间，当表空间不足时，可以采用增加表空间的数据文件容量，也可以增加数据文件，方法有如下几种： 1.给表空间增加数据文件    ALTER TABLESPACE "表空间的名字" ADD DATAFILE    '表空间的数据文件路径' SIZE 50M;   &nb
  • .Net framework4.0安装失败 yangjuanjava .netwindows
    上午的.net framework 4.0，各种失败，查了好多答案，各种不靠谱，最后终于找到答案了 和Windows Update有关系，给目录名重命名一下再次安装，即安装成功了！ 下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法： 1.运行cmd，输入net stop WuAuServ 2.点击开
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他