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

放大镜特效 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)

  • 十年老Python程序员：给我一个链接，没有我不能爬的视频，只有我顶不住的视频 IT孔乙己
    一、写在前面真的，为什么别人发游戏这么多人看，我发了两次了加起来才一百个。算了算了，不整游戏了，反正你们也不爱看~python今天来试试把头条上扭腰上热门的那些妹子爬一爬，不知道我顶不顶得住~python二、准备工作1、使用的环境python3.8pycharm2021.2专业版2、要用的第三方模块seleniumrequestsparsel三、大致流程鉴于你们不喜欢我啰嗦，但是流程呢，我还是要给
  • Python中win32com的用法详解：自动化办公与COM交互的利器 detayun Pythonpython自动化交互win32
    在Python自动化办公场景中，win32com模块凭借其与WindowsCOM（ComponentObjectModel）的深度集成能力，成为操控MicrosoftOffice、工业设备甚至第三方软件的核心工具。本文将通过实战案例、技术细节和避坑指南，系统解析这一模块的核心用法。一、核心功能与安装配置1.1模块定位与优势win32com是pywin32扩展包的核心组件，其核心价值在于：跨软件交互
  • 计算机视觉：人工智能的“眼睛” 人工智能教程 人工智能计算机视觉机器学习算法pytorchpython数据结构
    前言在人工智能的众多领域中，计算机视觉（ComputerVision）无疑是其中最为引人注目的方向之一。它赋予了机器“看”的能力，使计算机能够像人类一样理解和解释视觉信息。从自动驾驶汽车到医疗影像诊断，从安防监控到虚拟现实，计算机视觉的应用场景无处不在，深刻地改变着我们的生活和工作方式。本文将深入探讨计算机视觉的核心技术、应用场景以及未来的发展趋势，帮助您全面了解这一充满活力的领域。一、计算机视觉
  • 晨跑产生的“灵感” 觉醒的蜗牛
    都说“空无”状态的时候容易产生灵感，这对创作之人来讲是个非常好的事。关于写作已经有快三个月时间了，时常为了不知道写什么而苦恼，而“灵感”就显得至关重要。作为一名演讲培训师，早已习惯了对万事万物喜欢追本溯源，喜欢总结规律，推己及人。“灵感”的产生一般来自大脑处于“空无”的状态，或者说“无念”的状态。这是什么意思？就是一个人处于大脑没有思考并且保持意识高度临在状态的时候。可能很多人又不明白意识高度临在
  • 《相面天师》第九百二十四章 道歉 先峰老师
    “李先生，咱……咱们还是在里面安全点吧？”跟着李尚鸿走出会场的时候，汤加林那一路上简直就是背若芒刺一般，要是眼睛能杀人的话，他不知道自己已经死了多少次了，浑身的衣襟都被冷汗打湿掉了。要知道，虽然这次异能者大会背后的组织者，都是各国政府，但是在明面上，没有任何一个国家的政府会承认这次会议的，所以不管在会场中发生什么事情，都不会被追究的。就像是泰国国师乃他信.沙旺素西被李尚鸿用“生死簿”杀死，泰国政府
  • 探索图形知识梳理[3.29] 虫zi
    【课题名称】人教版数学五年级下册第三单元——探索图形【学习时间】2022年3月29日上午8：30-9：10【学习平台】国家中小学网络云平台(https://ykt.eduyun.cn/)【学习准备】准备笔记本和草稿本，边观看边记录。适时控制播放，按老师指令完成相应的课上练习。【学习任务】（1）进一步认识和理解正方体的特征。（2）通过观察、列表、想象等活动，经历发现正方体涂色和位置的规律的全过程，获
  • 牡丹江做一次新生儿亲子鉴定需要多少钱？牡丹江亲子鉴定单位汇总 中量国鉴科普
    在黑龙江牡丹江进行新生儿亲子鉴定的费用因所办理的亲子鉴定类型不同而有所变化。在牡丹江，亲子鉴定一般可分为新生儿亲子鉴定、上户口亲子鉴定和产前亲子鉴定三种。每种类型的亲子鉴定都有其独特的收费标准。1.牡丹江新生儿亲子鉴定隐私亲子鉴定是在保护个人隐私的前提下进行的，通常用于父母私下确认孩子是否为亲生。该类型的鉴定无需当事人面对面交流或到场采集样本，仅需通过邮寄匿名的检测样本办理。目前，在牡丹江进行新生
  • 元宵节的碎碎念 方糖多多
    昨天晚上宝宝7点就睡着了，大概是睡的太早，凌晨两点忽然醒了，喝完奶咿咿呀呀的在床上说着话，不停踢腾着腿。是真的困，但还是被她的样子给逗笑了。为了让她快点儿消耗体力继续睡觉，我帮她翻身趴下，这下如了小姑娘的愿，更加开心的咿咿呀呀起来。我于是爬起来坐床上陪着她。直到她趴累了，抱怀里喝完奶睡下。这中间又喂过一两次奶。7:00的时候宝宝又醒了，比正常睡到8:30提前了一个半小时又。我把奶递给她，她吭哧着吃
  • 希鹿生活邀请码怎么选?希鹿生活邀请码填谁的好? 高省APP珊珊
    希鹿生活邀请码在哪里呢？这个问题很多人都在问，因为在没有APP注册的时候，它需要填写邀请码才能够注册成功的，没有邀请码不会卡在这一步，那么很多朋友都在问邀请码，到底哪个才是正确的呢？我为何从希鹿生活转到高省呢？当然高省佣金更高啊高省APP佣金更高，模式更好，终端用户不流失。咱们高省是一个可省钱佣金高，能赚钱有收益的平台，百度有几百万篇报道，也期待你的加入。珊珊导师，高省邀请码777777，送2皇冠
  • 很好 寻荀
    早上临出门发现钥匙包找不到了，时间不允许我再耽搁，抓起备用钥匙就出门了。没有和其他人提起此事，就碰到老爸问了下有没有看到我的钥匙包，得到的回答“晚上回去看看”。中午回家又仔细找了一遍还是没有，努力回想后把希望定在老爸家。下午老公发来微信问我是不是把钥匙包落在他车上了，哈哈，自动浮现了。我发现整个过程中没有自责、没有抓狂，没有懊恼。而是回忆钥匙包里有什么，如果真的找不到接下来应该做什么，这种感觉很好
  • O (1) 空间搞定链表：穿针引线法核心技巧与例题 无聊的小坏坏 算法链表c++算法
    文章目录穿针引线法的核心思想基础应用：链表反转1.全链表反转2.部分链表反转高级应用：链表重排穿针引线法的设计模式常见问题解决方案1.K个一组反转链表2.环形链表检测在链表操作的世界里，"穿针引线"是一种优雅而高效的技巧，它通过精准的指针操作，像缝纫一样重新连接节点，解决各种复杂的链表问题。这种技巧不依赖额外数据结构，空间复杂度仅为O(1)，是算法面试中的必备技能。穿针引线法的核心思想指针即针线：
  • 2023-11-15 自然科学学术论文=记叙文+说明文+议论文写作 不停的追梦人
    一篇自然科学的实验性的原创论文，包含了前言、材料方法、结果、讨论结论，这四块主要内容。而前言部分，就是记叙文，介绍所有研究问题的由来；而材料方法和结果部分，就是说明文部分，介绍材料方法具体过程和结果部分，主要描述结果的情况详细具体情况；而讨论结论，就是议论文部分，以实验结果为论据，来证明你的分论点，而结论就是你的一篇文章总论点。
  • Kubernetes 高级调度 02 别骂我h kubernetes容器云原生
    一、Taint（污点）和Toleration（容忍）在生产环境中，经常会有这样的需求：master节点只部署系统组件容器，比如Calico、MetricsServer、Dashboard等，不应该部署业务应用。新添加节点不应该立即就允许部署业务容器，也就是新节点需要经过完整性及稳定性测试才可以被允许调度。某些节点可能需要进行系统升级或者其他维护，可能会引起节点上的容器不可用，此时需要将该节点上的P
  • Kubernetes 资源管理
    一、ResourceQuota首先看一下ResourceQuota（资源配额）的使用，资源配额是限制某个命名空间对资源使用的一个总量限制，比如内存、CPU、Pod数量等。1.什么是资源配额在生产环境中，可能会有多个Kubernetes集群，面向开发环境、测试环境、预生产环境和生产环境等。身为Kubernetes管理员，必然知道每个环境的规模有多大、可调度资源有多少，并且知道如何合理地为容器分配内存
  • 计算机视觉：打开机器之眼看世界 LeafyJee_ 人工智能人工智能深度学习计算机视觉
    计算机视觉是人工智能领域中备受关注的一部分，它的目标是赋予计算机类似于人类眼睛的功能，让机器能够感知和理解周围的世界。通过图像和视频数据，计算机视觉技术将信息转化为可理解和可操作的数据，为各种应用领域提供了强大的支持。一、计算机视觉的起源和发展计算机视觉起源于20世纪50年代，当时科学家们开始研究如何让计算机能够识别和理解图像。随着技术的不断进步，计算机视觉逐渐发展成为一门独立的学科，并广泛应用于
  • 草原雄鹰诗社王巧英老师的作品《组诗二首：赞杨倩：贺李发彬奥运举重夺金》文/王巧英——内蒙古诗人 草原雄鹰诗社
    赞杨倩文/王巧英出征奥运同追梦，枪到东京夺首金。悦耳声声传捷报，冠军风采比星辰。贺李发彬奥运举重夺金文/王巧英杠铃高举一金收，力士威风壮志酬。义勇军歌震天响，名扬世界耀神州。写于2021年7月24日原创首发
  • 精读《能断金刚》（14）：六时书 一心船长
    6:471上一篇介绍到，要想将“万物潜能和意识铭印”这一套理念转化为个人事业上的成功，最好的实践方式是建立一个追踪体系，你用这个体系来积累你的行为。在西藏，这套体系被称为“undruk”，意思是“一天六次”，我们称之为“六时书”。具体如何实施？出门给自己买一本可以随身携带的小记事本。然后回顾之前提到的46个商业问题，从中找出自己最相关的三个问题。这些是你最棘手的三大问题。当某个问题化解或者情况有所
  • 有一种爱情叫“惦念” 清香的泥土
    梅长苏化名苏哲，随景睿进帝都金陵城内休养，在城门口巧遇青梅竹马的霓凰，他忙拉上车帘不敢相见，却又忍不住掀开帘子默默注视……图片发自App在太皇太后面前与霓凰公开相见，梅长苏一把抓住霓凰欲收回的手，他的失态已让霓凰猜疑；他虽隐忍着对霓凰的爱，但还是没有克制住自己。图片发自App梅长苏听到霓凰在越贵妃处遇险一向沉稳的他竟然惊慌失错，可见霓凰在他心里的重要。陪霓凰在穆府赏梅，梅长苏轻轻摘掉落在霓凰发迹和
  • 如何使用 OpenCV 打开指定摄像头
    在计算机视觉应用中，经常需要从特定的摄像头设备获取视频流。例如，在多摄像头环境中，当使用OpenCV的cv::VideoCapture类打开摄像头时，如果不指定摄像头的ID，可能会随机打开系统中的某个摄像头，或者按照设备连接的顺序打开第一个可用的摄像头。比如：   //打开两个摄像头   cv::VideoCapture cap0(0);   if (!cap0.isOpened()){    c
  • 【OS】AUTOSAR架构下的Interrupt详解（下篇） 汽车电子嵌入式 AUTOSAR精进之路AUTOSAROSInterruptEnableInterruptSuspendISR
    目录3.代码分析3.1中断配置代码3.2OS如何找到中断处理函数3.3Os_InitialEnableInterruptSources实现3.4Os_EnableInterruptSource3.5DisableAllInterrupts3.5.1Os_IntSuspendCat13.5.2Os_InterruptDisableAllEnter3.5.3Disable二类中断3.5.4Disabl
  • EFK架构日志采集系统
    以下是基于‌Filebeat+Elasticsearch+Kibana（EFK）‌构建日志采集系统的核心要点及部署指南，综合多来源最佳实践整理：一、架构核心要点‌组件角色‌‌Filebeat‌：轻量级日志采集器，实时监控文件/目录变化，高效转发日志数据（资源占用仅为Logstash的1/10）。‌Elasticsearch‌：分布式搜索引擎，存储日志并提供实时检索与分析能力。‌Kibana‌：可视
  • 部署 Zabbix 企业级分布式监控 别骂我h zabbix分布式网络
    一、监控系统的功能概述监控，从中文的字义来看，有两个内容，一是检测，二是控制。重点在第一个字眼，即检测、预防的意思。监控，对应的英文单词是Monitoring。在计算机领域，可以将其分为5种监控类型：应用性能监控业务交易监控网络性能监控操作系统监控上面5种类型将监控这个概念划分成了多个领域。我们通常所说的监控，都会模糊地包含以上5个细分的领域。在任何一个IT业务环境中，都会存在各种各样的硬件设备、
  • 1.7分钟了解华宝协办app亏损惨重！虚假数字投票被骗套路遭曝光！ 最新曝光36
    1.华宝协办APP在平台不能提现怎么办？2.华宝协办APP这个软件靠谱可信吗？3.华宝协办APP在软件做任务被骗？4.华宝协办APP软件app无法登录?5.华宝协办APP平台是真的吗？6.华宝协办APP被骗无法提现，操作失误！7.华宝协办APP平台是騙局吗？8.华宝协办APP被骗无法出金如何维护自己的合法权益!希望看到这篇文章的人可以及时止损；请及时联系为你提供解决方案，要想讨回损害资产务必阅读以
  • 6.24 一只111
    Thoughtfeedsitselfwithitsownwordsandgrows。思想以他自己的语言喂养它自己，而成长起来了。网上有个段子，细思恐极的是，大脑告诉你大脑是你身上最聪明的器官。感觉和上边这句诗有着异曲同工之处，有了思想，知道方向，学到如何去汲取去更进一步，然后就有了更加成熟的思想，可能是这样吧。
  • 林欢周晴《狐臭校花污染源》完结版免费阅读_狐臭校花污染源全文免费阅读_林欢周晴(狐臭校花污染源)完整版免费在线阅读_《狐臭校花污染源》全集在线阅读_林欢周晴(狐臭校花污染源)最新章节免费在线阅读... 小说全文全本
    林欢周晴《狐臭校花污染源》完结版免费阅读_狐臭校花污染源全文免费阅读_林欢周晴(狐臭校花污染源)完整版免费在线阅读_《狐臭校花污染源》全集在线阅读_林欢周晴(狐臭校花污染源)最新章节免费在线阅读_(林欢周晴)完结版在线阅读主角配角：林欢周晴简介：校花室友有狐臭我提出切除汗腺就可痊愈，但她不领情，反而给我下药，趁我昏迷，用腋下将我活生生闷死临死前，我还听到她怨毒的声音：要不是你把我有狐臭的事情说出去
  • 穿越日记第208天 蔚之蓝
    2020年1月20日一、365天穿越日记第208天1、家名：幸福圆满之家。2、家风：健康和睦。3、家规：（1）每天表达感恩3条以上。（2）承诺的事情坚持做到。（3）每天表达对家人和他人的看见及爱。4、使命：自我觉醒，引领家族，圆满精进。5、愿景：子女孝顺安康，兄姐情深圆融，家族圆满。6、身份：我是贤淑善解人意的妻子，我是孝顺的女儿，我是智慧的母亲，我是家庭圆满的引领者，我是有责任有担当的员工。7、
  • 熬夜后遗症 娜娜陪你成长
    在持续10多天凌晨十二点多，甚至一点多点睡觉，早上六点多就醒了以后，今天我终于撑不住了。累到不想说话，做什么事情都提不起兴趣，而且脑子似乎停止了思考，变得很迟钝。对家人和孩子都非常没有耐心、易怒，嘴巴的口腔溃疡反复出现，而且每次都持续很久。医生诊断后，说是阴虚火旺，而产生的一个关键原因是熬夜，没休息好。熬夜干嘛了？或者追剧，或者把本该白天完成的日更，拖到晚上十点多才去做，或者胡思乱想，迟迟睡不着…
  • 同盟/The Union(2024) 美国电影【1080P高清英语中字Netflix版本】百度/夸克网盘下载免费在线观看完整版 e95cfad15310
    随着科技的日新月异，Netflix已成为全球观众不可或缺的观影平台。近日，一部名为《同盟》的2024年美国电影在Netflix上正式上线，1080P高清英语中字版本吸引了大量影迷的关注。这部动作悬疑大戏以其跌宕起伏的情节、紧张刺激的节奏，以及充满悬疑与惊险的精彩画面，为观众带来了一场视觉盛宴。于是同盟/TheUnion(2024)美国电影【1080P高清英语中字Netflix版本】百度/夸克网盘下
  • 未来三年做什么生意能赚钱？分享5个低成本高利润的好项目 高省APP大九
    未来三年，只要你用心做好以下四个行业之一，不赚钱可以来找我，话不多说，直接上干货！1、社交导购电商社交导购电商是当下最值得年轻人去尝试创业的一种零成本创业模式，也是最早淘宝客的优化版，无货源无售后操作模式，很多小伙伴不知道怎么做，这里我给大家介绍一个靠谱的淘宝导购电商赚钱渠道，可以用来抖音快速短视频直播带货选品，可以地摊进货赚佣金，也可以做微信羊毛群，捡漏群，社群团购等多种赚钱方法就算你不用这个平
  • ［原创文集］女孩子真正的安全感 旅游学院20旅管一班
    旅游学院20旅管本一班罗美英巴菲特给女儿一-生的忠告:如果将来我有女儿，不会从小给她灌输要温柔、要善良、要懂事、要乐于助人这类思想。这些看似美好的词，变成束缚要求在-一个人身，上在我看来和德绑架没什么两样。我会教她权衡利弊，做事之前想好得失，先爱自己，在爱别人，我要把她养成一-个既世俗，又浪漫的精明女人。我非常肯定这个父亲的教育方法，随着我们的长大，我们开始接触爱情的懵懂，在我们身边有很多女孩子都
  • 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其他