lucksoul
lucksoul

Html+Css+Js实现放大镜功能（完整代码+详解）

一，问题描诉

通过将鼠标指向指定的图片，将鼠标移动到图片时，显示一个透明的小区域，然后将小区域的部分放大，查看细节。放大过程中必须满足几个条件：

1.鼠标移动时，透明的小区域也跟着移动，并且透明的小区域必须在指定的图片内，不得出该图片的范围。
2.放大的区域要按照一定的比例展示出来

二，难点分析

2.1难点列出

1.鼠标在图片区域时，透明小区域出现，放大的区域出现
2.鼠标移出图片时，透明小区域小时，放大区域消失
3.透明小区域随着鼠标移动

2.2 难点解决关键（对应解决回答）

1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block
2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none
3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.Y,然后通过放入鼠标事件onmoursemove监听，不停的将透明小区域的top和left置为event.layerX,event.layer.Y的值

三，详细代码

3.1 代码结构

Html+Css+Js实现放大镜功能（完整代码+详解）_第1张图片

3.2 具体代码

html代码


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<link rel="stylesheet" type="text/css" href="../css/Magnifier.css"/>
	<script src="../js/Magnifier.js" type="text/javascript" charset="utf-8">script>
	<body>
		<div id="all">
			<div id="small">
				<img src="../images/small.jpg"/>
				<div id="shadow">div>
				<div id="cover">div>	
			div>
			<div id="big">
				<img src="../images/big.jpg"/>
			div>
			
		div>
	body>
html>

Css代码

*{
	padding: 0px;
	margin: 0px;
}
#all{
	margin: 0 auto;
	width: 1000px;
	height: 800px;
	border:1px solid blue ;
}
#small{
	width: 310px;
	height: 310px;
	margin-top: 80px;
	margin-left:100px;
	border:1px solid red ;
	position: relative;
	float: left;
}
#small img{
	/*border:1px solid gray ;*/
}
#shadow{
	width: 100px;
	height: 100px;
	background-color: black;
	opacity: .2;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	cursor: move;
}
#cover{
	width: 100%;
	height:100%;
	z-index: 10;
	position: absolute;
	left: 0px;
	top: 0px;
	cursor: move;
}
#big{
	width: 310px;
	height: 310px;
	position: relative;
	overflow: hidden;
	border:1px solid yellow ;
	display: none;
	
}
#big img{
	position: absolute;
	top: 0px;
	left: 0px;
}

Js代码

window.onload=function(){
	small=document.getElementById("small");
	shadow=document.getElementById("shadow");
	shadowWH=shadow.style.width?shadow.style.width:document.defaultView.getComputedStyle(shadow,null).width;
	shadowWH=parseInt(shadowWH);
	smallW=small.style.width?small.style.width:document.defaultView.getComputedStyle(small,null).width;
	smallW=parseInt(smallW);
//	smallML=small.style.marginLeft?small.style.marginLeft:document.defaultView.getComputedStyle(small,null).marginLeft;
//	smallML=parseInt(smallML);
	
	smallMT=small.style.marginTop?small.style.marginTop:document.defaultView.getComputedStyle(small,null).marginTop;
	smallMT=parseInt(smallMT);
	big=document.getElementById("big");
	bigW=big.style.width?big.style.width:document.defaultView.getComputedStyle(big,null).width;
	bigW=parseInt(bigW);
//	console.log(smallW);
//	console.log(shadowWH)
//console.log("smallML="+smallML);
//console.log("smallMT="+smallMT);
//console.log("bigw="+bigW);
	bigImg=big.getElementsByTagName("img")[0];
	move();
}
function move(){
	small.onmouseover=function(){
		shadow.style.display="block";
		big.style.display="block";
		change(event);
	}
	small.onmouseout=function(){
		shadow.style.display="none";
		big.style.display="none";
	}
	small.onmousemove=function(){
		change(event);
	}
}
function change(event){
	var evt=event?event:window.event;
//	var moveL=evt.pageX;
//	var moveT=evt.pageY;
	var moveL=evt.layerX-shadowWH/2;
	var moveT=evt.layerY-shadowWH/2;
	
//	console.log("moveL="+moveL+":  moveT="+moveT);
	
	if(moveL<0){
		moveL=0;
	}
	if(moveL>smallW-shadowWH){
		moveL=smallW-shadowWH;
	}
	
	if(moveT<0){
		moveT=0;
	}
	if(moveT>smallW-shadowWH){
		moveT=smallW-shadowWH;
	}
	
	shadow.style.left=moveL+"px";
	shadow.style.top=moveT+"px";
	/**
	 * 图片放大
	 */
//	big.style.left=smallW+smallML+50+"px";
	big.style.left=50+"px";
	big.style.top=smallMT+"px";
	bigImgW=bigImg.offsetWidth;
//	console.log("bigImgW="+bigImgW);
	var scale=bigImgW/bigW;
	bigImg.style.top=-moveT*scale+"px";
	bigImg.style.left=-moveL*scale+"px";
}

四，效果演示

你可能感兴趣的:(读卷有益,Html,JavaScript,Css,案例详解)

  • Python实用记录(十五)：PyQt/PySide6打包成exe，精简版（nuitka/pyinstaller/auto-py-to-exe） ZZY_dl 实用操作总结pythonpyqt开发语言
    文章目录Python打包工具：Nuitka、PyInstaller和Auto-py-to-exe详解方式一：Nuitka安装与使用方式二：PyInstaller安装环境打包方式使用spec文件打包打包后文件说明打包参数说明方式三：Auto-py-to-exe安装环境✅⚠️▶️➡️⭐❄️✅⚠️▶️➡️⭐❄️✅⚠️▶️➡️⭐❄️✅⚠️Python打包工具：Nuitka、PyInstaller和Auto
  • 第9章：Python TDD解决货币对象相等性比较难题 Tester_孙大壮 测试驱动开发python驱动开发开发语言
    写在前面这本书是我们老板推荐过的，我在《价值心法》的推荐书单里也看到了它。用了一段时间Cursor软件后，我突然思考，对于测试开发工程师来说，什么才更有价值呢？如何让AI工具更好地辅助自己写代码，或许优质的单元测试是一个切入点。就我个人而言，这本书确实很有帮助。第一次读的时候，很多细节我都不太懂，但将书中内容应用到工作中后，我受益匪浅。比如面对一些让人抓狂的代码设计时，书里的方法能让我逐步深入理解
  • 面试官：谈谈你对JavaScript原型链的理解 程序员
    在前端开发领域的每一次深入交流中，JavaScript的原型链总是那个绕不开的技术高地。它不仅是理解JavaScript对象模型的关键，也是评估前端开发者技术深度和广度的重要指标。引言：为何原型链如此重要？在JavaScript中，原型链是实现继承的核心机制。它允许对象通过原型对象间接地共享属性和方法，这种机制不仅减少了代码的冗余，还提高了代码的可复用性和灵活性。因此，掌握原型链的原理和应用，对于
  • linux 安装mysql5.6 李逍遙️ linuxadbandroid
    下载mysql安装包https://dev.mysql.com/downloads/mysql/5.6.html卸载系统自带的mariadb[root@gpap-prod-3~]#rpm-qa|grepmariadbmariadb-libs-5.5.68-1.el7.x86_64[root@gpap-prod-3~]#rpm-e--nodepsmariadb-libs-5.5.68-1.el7.x
  • RC和RR隔离级别下SELECT操作的读取机制及差异 机械猿-- sql数据库mysqlmybatis
    RC（读已提交）和RR（可重复读）隔离级别下不同的查询语句行为不同，读取到的数据可能不同，以下是详细分析：RC（读已提交）隔离级别1.select*fromtablewhereid=1forupdate：读取类型：不管是否在事务中执行forupdate，这都是一种当前读，能确保读取的数据是最新的，因为forupdate会对符合条件的记录加排他锁。因为RC级别下是每次执行forupdate都会新生成
  • Nginx正向代理配置详解 水月清辉 Nginxnginx代理模式
    一、nginx正向代理介绍及配置（需要在客户端配置代理服务器进行指定网站访问）#模块ngx_http_proxy_module:http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_set_header1、环境介绍代理服务器系统环境为：centosnginx代理服务器为：192.168.10.10测试客户端为局域网内任意win
  • UML类图详解（全网最无敌详解版(自封的)） 可乐泡枸杞· 面向对象设计模式uml
    UML类图详解鉴于很多同学反馈《面向对象设计模式》系列博客中的类图看不懂，所以博主贴心的单独写了一篇关于UML的文章在开始阅读之前，请点赞收藏关注，三连鼓励下博主UML（UnifiedModelingLanguage，统一建模语言）类图是面向对象建模的重要工具，用于描述系统的静态结构。类图通过展示类、接口及其之间的关系，帮助开发者理解和设计系统。本文将详细介绍类图中的各个元素及其线条和图像。类图的
  • 代码编写java代做c++程序代编程Python代c#设计C语言接单软件定制 matlabgoodboy javac++c#
    您提到的服务涵盖了多种编程语言和软件开发需求，包括Java代码编写、C++程序代编、Python编程代做、C#设计、C语言编程，以及软件定制服务。这些服务在软件开发领域非常常见，且有着广泛的应用。以下是对这些服务更详细的解释和接单时的一些建议：服务详解Java代码编写Java以其跨平台性、面向对象和丰富的API而著称，广泛应用于企业级应用、Android应用开发、Web服务端开发等领域。您可以提供
  • @SpringBootApplication详解(Spring Boot启动原理) m0_74823388 面试学习路线阿里巴巴资料职业发展springboot后端java
    本文来说下SpringBoot中的自动装配机制。SpringBoot最强大的功能就是把我们常用的场景抽取成了一个个starter（场景启动器），通过SpringBoot为我们提供的这些场景启动器，我们再进行少量的配置就能使用相应的功能。文章目录概述什么是SpringBoot约定优于配置自动装配@SpringBootConfiguration注解@ComponentScan注解@EnableAuto
  • Docker使用 使用Dockerfile来创建镜像 BILLY BILLY 开发必备工具docker容器
    本篇文章主要介绍了Docker使用Dockerfile来创建镜像，本文学习Dcokerfile的基本命令,并且创建一个支持ssh服务的镜像.1.Dockerfile1.1基本案例基本案例dockerfile可以说是docker的描述符,该文件定义了docker镜像的所能拥有哪些东西.基本格式如下:第一行指定该镜像基于的基础镜像(必须)FROMjava:8维护者信息MAINTAINERqudingn
  • MySQL学习笔记5: MySQL查询语句案例及pymysql模块 Hojas MySQLmysql学习笔记
    MySQL学习笔记5:MySQL查询语句案例及pymysql模块文章目录MySQL学习笔记5:MySQL查询语句案例及pymysql模块一些MySQL语句案例pymysql模块sql注入总结pymysql补充一些MySQL语句案例1、查询所有的课程的名称以及对应的任课老师姓名--SELECT--course.cname,--teacher.tname--FROM--course--INNERJOI
  • 每日读码1 Unity GL hookby 每日读码unity
    //一般在渲染函数里实现，比如：OnPostRender()/*相机后处理*/,OnRenderImage()/*图像处理*/voidOnRenderImage(RenderTexturesrc,RenderTexturedst){Vector3toRight=cameraTransform.right*halfHeight*aspect;Vector3toTop=cameraTransform.
  • C# 解析 HTML 实战指南 code_shenbing C#c#html开发语言
    在网页开发和数据处理的场景中，经常需要从HTML文档里提取有用的信息。C#作为一门强大的编程语言，提供了丰富的工具和库来实现HTML的解析。这篇博客就带你深入了解如何使用C#高效地解析HTML。一、为什么要在C#中解析HTML在实际项目中，无论是进行网页数据采集、网页内容分析，还是开发网页爬虫，都离不开对HTML的解析。例如，电商平台可能需要从竞品网站上采集商品价格和库存信息；新闻聚合应用可能需要
  • 【Python】selenium结合js模拟鼠标点击、拦截弹窗、鼠标悬停方法汇总（使用 execute_script 执行点击的方法） 翠花上酸菜 selenium网络爬虫pythonseleniumjavascript
    我们在写selenium获取网络信息的时候，有时候我们会受到对方浏览器的监控，对方通过分析用户行为模式，如点击、滚动、停留时间等，网站可以识别出异常行为，进而对Selenium爬虫进行限制。这里我们可以加入JavaScript的使用。Selenium可以执行JavaScript，通过使用execute_script方法，来执行点击操作。它可以绕过一些Selenium直接操作元素时可能遇到的问题，比
  • springboot文档 生产队队长 SpringAllspringboot
    中英文文档https://www.cnblogs.com/wangxiaocong/p/10062872.html
  • 【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽黑客鹏哥 linux网络安全web安全密码学CTF夺旗赛
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 数据结构——堆详解（c语言版） 吹个泡泡（c++服务端开发） 数据结构c语言
    目录1堆的概念和结构和性质1.1堆的概念和结构1.2堆的性质2堆的实现2.1堆的结构创建2.1堆的功能声明2.2堆的功能实现2.2.1打印堆数据2.2.2堆的初始化2.2.3交换函数2.2.4向下调整法2.2.5向上调整法2.2.6添加数据2.2.7删除数据2.2.8求堆的大小2.2.9获取堆顶数据2.2.10销毁堆3全部代码1堆的概念和结构和性质1.1堆的概念和结构如果有一个关键码的集合K={，
  • MySQL字段约束条件,外键约束条件,表关系 Yietong309 MySQL数据库mysql数据库开发语言
    目录字符编码与配置文件统一字符编码存储引擎修改存储引擎的方式自定义选项存储引擎不同存储引擎产生的表文件有几个?MERGEInnoDBArchiveBLACKHOLEblackhole与memory存取数据的特征Blackhole：丢弃写操作，读操作会返回空内容Memory：置于内存的表创建表的完整语法字段类型之整型字段类型之浮点型字段类型之字符类型字段类型之枚举与集合字段类型之日期类型约束条件自增
  • 探索前沿AI技术：什么是LLM框架?什么是Agent应用?什么是Workflow架构?一篇文章带你全部搞懂 大模型学习路线 大模型人工智能架构llmagentai大模型agi
    探索前沿AI技术：什么是LLM框架?什么是Agent应用?什么是Workflow架构?前排提示，文末有大模型AGI-CSDN独家资料包哦！文章目录探索前沿AI技术：什么是LLM框架?什么是Agent应用?什么是Workflow架构?摘要引言正文LLM框架：定义与重要性什么是LLM框架?详细的知识点讲解和分析详细的代码案例详细的操作命令Agent应用：智能与自动化什么是Agent应用?知识点讲解代码
  • 设计微服务的过程 Ethan3014 微服务每天一篇技术博客微服务java服务器
    原文：https://microservices.io/post/architecture/2023/02/09/assemblage-architecture-definition-process.html文章目录OverviewofAssemblageStep1:DiscoveringsystemoperationsStep2:DefiningsubdomainsStep3:Designing
  • 【AI日记】25.01.06 AI完全体 AI日记人工智能机器学习kaggle比赛
    【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】AI参加：kaggle比赛ForecastingStickerSales读书书名：国家为什么会失败阅读原因：2024年诺贝尔经济学奖得主的力作，之前我已经读过他另一本书了《權力與進步》备注：有兴趣的建议读未删减版https://book.douban.com/subject/26388427/discussion
  • 基于深度学习的极端天气预测全解析与实战指南：基于MetNet 模型 AI_DL_CODE 深度学习人工智能MetNet天气预测python
    摘要：本文全面解析了基于深度学习的极端天气预测，重点介绍了MetNet模型。首先，文章阐述了极端天气预测的重要性和传统天气预报的局限性。接着，详细介绍了MetNet模型的基本架构、特点以及与其他气象预测模型的对比。然后，通过实战案例展示了MetNet模型在极端降雨天气预测中的应用，包括数据准备、模型搭建与训练、模型评估与预测。最后，文章总结了MetNet模型的优势与挑战，并展望了深度学习在气象领域
  • 深度解析：Python与TensorFlow在日平均气温预测中的应用——LSTM神经网络实战 AI_DL_CODE python神经网络tensorflowLSTM气温预测RNN
    文章目录1.引言1.1研究背景与意义1.2研究目标与问题定义2.概念解析2.1Python语言简介2.2TensorFlow框架概述2.3LSTM神经网络原理3.原理详解3.1时间序列分析基础3.1.1时间序列的组成3.1.2时间序列分析方法3.2LSTM在时间序列分析中的应用3.2.1LSTM的优势3.2.2LSTM的结构3.3日平均气温预测的数学模型3.3.1ARIMA模型3.3.2LSTM模
  • cmd批处理常用符号详解 weixin_34129696
    1、@一般在它之后紧跟一条命令或一条语句，则此命令或语句本身在执行的时候不会显示在屏幕上。请把下面的代码保存为test.cmd文件，然后运行，比较一下两条echo语句在屏幕上的输出差异：echoa@pause@echob@pause执行结果如下：C:\DocumentsandSettings\JM\桌面>echoaa请按任意键继续...b请按任意键继续...2、%、%%百分号用在不同的场合，有不同
  • socket网络通信基础 杨枝甘露小码 网络
    目录一、套接字编程基本流程二、TCP流式协议及Socket编程的recv()和send()三、读写无阻塞-完美掌握I/O复用select（）函数详解poll（）函数详解epoll()函数详解一、套接字编程基本流程原文链接：Socket编程权威指南(一)打通网络通信的任督二脉_seqpacket-CSDN博客Socket进行编程通常包括以下几个步骤:创建Socket绑定Socket(绑定地址信息)监
  • ZYNQ + Linux jerwey linuxzynq
    ZYNQLinux操作系统移植说明文档http://xilinx.eetrend.com/content/2019/100018437.html1，组成ZYNQ上面移植Linux操作系统包括四个部分，uboot,devicetree,kernel,ramdisk.其中uboot类似于bios，负责对设备进行简单的初始化，devicetree以树的形式对zynq相连的硬件设备进行描述，kernel是
  • 2024年华为OD机试真题- 英文输入法-(C++/Java/python)-OD统一考试（C卷D卷） dijkstra2023 华为odc++pythonjava
    题目描述主管期望你来实现英文输入法单词联想功能，需求如下：依据用户输入的单词前缀，从已输入的英文语句中联想出用户想输入的单词。按字典序输出联想到的单词序列，如果联想不到，请输出用户输入的单词前缀。注意英文单词联想时区分大小写缩略形式如"don’t"判定为两个单词"don"和“t”输出的单词序列不能有重复单词，且只能是英文单词，不能有标点符号输入描述输入两行首行输入一段由英文单词word和标点构成的
  • Python datetime timedelta Claroja Python
    https://docs.python.org/3/library/datetime.html#timedelta-objectsclassdatetime.timedelta(days=0,seconds=0,microseconds=0,milliseconds=0,minutes=0,hours=0,weeks=0)timedelta对象基本介绍classdatetime.timedelta
  • 基于JAVA水果商城设计计算机毕业设计源码+数据库+lw文档+系统+部署 柳下网络 java开发语言jvm
    基于JAVA水果商城设计计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA水果商城设计计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https
  • GBase 8c 教程（十六）VACUUM指令 唤溪 GBase8c数据库database
    GBase8c数据库需要周期性的清理维护以达到最优的性能，清理维护工作可以通过自动清理守护进程或手动管理VACUUM命令来进行。一、VACUUM命令基础建议使用VACUUM命令定期对GBase8c数据库的表进行清理，主要有以下几个原因：恢复或重用被已更新或已删除行所占用的磁盘空间；更新被查询规划器使用的数据统计信息；更新可见性映射，它可以加速只用索引的扫描；保护老旧数据不会由于事务ID回卷或多事务
  • Java 并发包之线程池和原子计数 lijingyao8206 Java计数ThreadPool并发包java线程池
    对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C
  • java编程思想 抽象类和接口 百合不是茶 java抽象类接口
    接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface;
  • [房地产与大数据]房地产数据挖掘系统 comsci 数据挖掘
           随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb
  • 数组队列总结 沐刃青蛟 数组队列
          数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。      以下是数组队列的功能实现代码：   import List.Student; public class
  • Oracle存储过程无法编译的解决方法 IT独行者 oracle存储过程　
    今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN
  • 重装系统之后oracle恢复 文强chu oracle
    前几天正在使用电脑，没有暂停oracle的各种服务。 突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 直接把我的c盘给格式化了 并且清理了注册表，再装系统。 然后的结果就是我的oracl
  • python学习二（ 一些基础语法） 小桔子 pthon基础语法
    紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&
  • svn 常用命令 aichenglong SVN版本回退
    1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio
  • 某小公司面试归来 alafqq 面试
    先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 老拿这些对付毕业生的东东来吓唬我。。 面试官很刁难，问了几个问题，记录下； 1，包的范围。。。public,private,protect. --悲剧了 2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 4，stru
  • 动态数组的存储速度比较 集合框架 百合不是茶 集合框架
    集合框架： 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器
  • 用JS实现一个JS对象，对象里有两个属性一个方法 bijian1013 js对象
    <html> <head> </head> <body> 用js代码实现一个js对象，对象里有两个属性，一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){
  • 探索JUnit4扩展：使用Rule bijian1013 java单元测试JUnitRule
            在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n
  • [Gson一]非泛型POJO对象的反序列化 bit1129 POJO
    当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段，例如泛型集合或者泛型类 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    
  • 【Kakfa五】Kafka Producer和Consumer基本使用 bit1129 kafka
    0.Kafka服务器的配置 一个Broker， 一个Topic Topic中只有一个Partition（）   1. Producer： package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor
  • lsyncd实时同步搭建指南——取代rsync+inotify ronin47
    1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify
  • java-9. 判断整数序列是不是二元查找树的后序遍历结果 bylijinnan java
    public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时，肯定是查找树 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是
  • MySQL的sum函数返回的类型 bylijinnan javaspringsqlmysqljdbc
    今天项目切换数据库时，出错 访问数据库的代码大概是这样： String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows
  • java设计模式之单例模式 chicony java设计模式
    在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构 　　单例模式的特点： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 　　饿汉式单例类   publ
  • javascript取当月最后一天 ctrain JavaScript
    <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont
  • linux tune2fs命令详解 daizj linuxtune2fs查看系统文件块信息
    一.简介： tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 二.用法： Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou
  • 做有中国特色的程序员 dcj3sjt126com 程序员
      从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有
  • Android：TextView属性大全 dcj3sjt126com textview
    android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输
  • tomcat虚拟目录安装及其配置 eksliang tomcat配置说明tomca部署web应用tomcat虚拟目录安装
    转载请出自出处：http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config：存放tomcat的配置文件 temp  ：存放tomcat跑起来后存放临时文件用的 work   ： 当第一次访问应用中的jsp
  • 浅谈：APP有哪些常被黑客利用的安全漏洞 gg163 APP
    首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞：APK 包非常容易被反编译成可读
  • C#根据网址生成静态页面 hvt Web.netC#asp.nethovertree
    HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri
  • SVG 教程 （一） 天梯梦 svg
    SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量
  • 一个简单的java栈 luyulong java数据结构栈
    public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top
  • 基础数据结构和算法八：Binary search sunwinner AlgorithmBinary search
    Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori
  • 12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 刘星宇 c面试
    12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 1.gets()函数 问：请找出下面代码里的问题： #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff));
  • ITeye 7月技术图书有奖试读获奖名单公布 ITeye管理员 活动ITeye试读
    ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾： http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《Java性能优化权威指南》
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他