半朵梨花压海棠
半朵梨花压海棠

原生HTML放大镜

该放大区域用背景图片放大

DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>title>
		<style type="text/css">
			body {
				height: 1200px;
				background-color: lightskyblue;
			}

			ul {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.itemarea {
				position: relative;
				width: 500px;
				height: 680px;
				border: 1px black solid;
				margin: 50px auto;
			}

			.itemarea .pic {
				margin-bottom: 15px;
			}

			.itemarea img {
				width: 500px;
				height: 600px;

			}

			.itemarea .pic .cover {
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background-image: url(img/7.png);
				opacity: 0.6;
				display: none;
			}

			.itemarea .list {
				display: flex;

			}

			.itemarea .list li {
				margin: auto;
			}

			.itemarea .list img {
				display: block;
				width: 50px;
				height: 50px;
			}

			.itemarea .detail {
				position: absolute;
				top: 0;
				left: 500px;
				/* 此处为放大2倍，显示框的大小是遮阴框宽高的2倍 */
				width: 400px;
				height: 400px;
				display: none;
				border: 1px black solid;
				background: url(img/1.PNG);
				/* 此处放大2倍，背景图片的宽高是左边显示图片的2倍 */
				background-size: 1000px 1200px;
				/* background-size: 200%; 或者这样写*/

			}

			.itemarea .list .current {
				border: 2px green solid;
			}
		style>
	head>
	<body>
		<div class="itemarea">
			<div class="pic">
				<img src="img/1.PNG">
				<div class="cover">div>
			div>
			<ul class="list">
				<li><img src="img/1.PNG">li>
				<li><img src="img/2.PNG">li>
				<li><img src="img/3.PNG">li>
				<li><img src="img/4.PNG">li>
				<li><img src="img/5.PNG">li>
				<li><img src="img/6.PNG">li>
			ul>
			<div class="detail">

			div>
		div>
		<script type="text/javascript">
			/* 
		 需求
		 1，鼠标放入图片时候，会动态修改图片地址
		 2，鼠标放入大图，会动态修改右边图片位置
		 2.1显示图片的放大镜，
		 2.2显示右边效果
		 */
			var itemarea = document.querySelector(".itemarea");
			var list = document.querySelector(".list");
			/* 上面的大图片 */
			img = document.querySelector(".pic img");
			/* 所有的图片 */
			imgs = list.querySelectorAll("img");
			/* 主图片展示区域 */
			pic = document.querySelector(".itemarea .pic");
			/* 放大镜 */
			cover = document.querySelector(".cover");
			/* 放大的区域 */
			detail = document.querySelector(".detail");
			/* 监听事件，切换图片src */
			list.addEventListener("mousemove", function(e) {
				if (e.target.tagName == "IMG") {
					img.src = e.target.src;
					detail.style.backgroundImage = "url(" + e.target.src + ")";
					/* 遍历 所有边框都为空*/
					imgs.forEach(function(item) {
						item.className = "";
					})
					/* 选中的改变边框颜色*/
					e.target.className = "current";
				}
			})
			pic.addEventListener("mousemove", function(e) {
				/* 放大镜距离浏览器的距离 */
				var x = e.clientX;
				y = e.clientY;
				/* 图片框距离浏览器的距离 */
				cx = pic.getBoundingClientRect().left;
				cy = pic.getBoundingClientRect().top;
				tx = x - cx - 100;
				ty = y - cy - 100;
				if (tx < 0) {
					tx = 0;
				}
				if (ty < 0) {
					ty = 0;
				}
				/* 显示图片宽-遮阴框的宽 */
				if (tx >300) {
					tx = 300;
				}
				/* 显示图片高-遮阴框的高 */
				if (ty > 400) {
					ty = 400;
				}
				cover.style.left = tx + "px";
				cover.style.top = ty + "px";
				/* 根据遮阴框在盒子的移动距离百分比------对应放映框在大图片的移动距离百分比 */
				/*    tx,ty/遮阴框的极限范围 */
				detail.style.backgroundPosition = tx / 300 * 100 + "%" + ty / 400 * 100 + "%";
			})
			/* 移除隐藏 */
			itemarea.onmouseout = function() {
				cover.style.display = "none";
				detail.style.display = "none"
			}
			itemarea.onmouseover = function() {
				cover.style.display = "block";
				detail.style.display = "block";
			}
		script>
	body>
html>

效果如下：

原生HTML放大镜_第1张图片

你可能感兴趣的:(js,html,css,css3)

  • 构建AngularJS动态Web应用的示例教程 你这人真狗
    本文还有配套的精品资源，点击获取简介：AngularJS是一个由Google支持的前端JavaScript框架，用于创建动态Web应用程序。本文将通过一个名为“angular-sample-app”的示例应用程序，详细介绍AngularJS的核心特性，包括双向数据绑定、控制器、指令系统、服务与依赖注入、表单处理、路由与导航、模板和局部存储以及其他高级特性。通过这个示例应用的深入剖析，开发者可以学习
  • html中单选框怎么取消选中,radio单选框的选中与取消 你这人真狗 html中单选框怎么取消选中
    需求：单选框可重复点击选中和取消；背景：单选框只可以选中，取消需要点击其他单选框。解决方案：单选按钮取消选中$(function(){$('input:radio').click(function(){vardomName=$(this).attr('name');var$radio=$(this);//ifthiswaspreviouslycheckedif($radio.data('wasch
  • 【css酷炫效果】纯CSS实现3D翻转卡片动画 冰夏之夜影 web前端css前端
    【css酷炫效果】纯CSS实现3D翻转卡片动画缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构正面内容背面内容...css样式/*容器设置透视*/.card-containe
  • 深入理解 Node.js 事件循环（Event Loop）与异步机制 全栈探索者chen nodenode.jsvim编辑器开发语言程序人生异步性能优化
    深入理解Node.js事件循环（EventLoop）与异步机制前言Node.js以其单线程、异步非阻塞I/O的特性在高并发场景中广泛应用。然而，许多开发者对其事件循环（EventLoop）机制不够熟悉，导致在编写异步代码时遇到回调地狱、Promise处理不当、性能瓶颈等问题。本文将详细解析Node.js事件循环的运行原理，结合代码示例，帮助你深入理解其核心机制。一、什么是事件循环（EventLoo
  • 基于 Vue.js 和 Element UI 实现九宫格按钮拖拽排序功能 | 详细教程与代码实现 小杰~ vue.jsjavascriptvuedraggableCSSGrid
    在Vue.js项目中使用vue-element-template（基于ElementUI）实现按钮的九宫格拖拽排序功能，可以通过以下步骤实现。我们将使用vuedraggable库来实现拖拽排序功能。1.安装依赖首先，确保你已经安装了vuedraggable库：npminstallvuedraggable2.创建组件接下来，创建一个Vue组件来实现九宫格拖拽排序功能。{{button.label}}
  • CSS语言的数论算法 宇瞳月 包罗万象golang开发语言后端
    CSS语言的数论算法引言数论作为数学的一个重要分支，主要研究整数及其性质。数论的基本问题包括素数的性质、最大公约数、最小公倍数、同余等，同时数论在密码学、计算机科学等领域具有广泛的应用。而CSS（层叠样式表）本身是一种样式表语言，用于控制HTML文档的样式和布局，虽然CSS本身并不能直接进行复杂的数论运算，但它可以和JavaScript等编程语言结合使用，实现数论算法的可视化与交互。本文将探讨数论
  • 使用 WebP 优化 GPU 纹理占用 泫凝 javascript前端
    WebP格式相比JPEG/PNG文件更小，可以减少GPU纹理内存占用，提高WebGL/Three.js/3D渲染的性能。为什么WebP能减少GPU内存占用？文件更小→WebP比JPG/PNG压缩率更高，减少纹理上传带宽，提高渲染速度。支持透明度（RGBA）→比PNG更小，适用于UI贴图/透明纹理。减少Mipmaps体积→WebP生成的mipmap纹理占用的GPU内存更少。⚠️但WebP仍然是8-b
  • 【开原宝藏】30天学会CSS - DAY1 第一课 hikktn 开源宝藏css前端
    下面提供一个由浅入深、按步骤拆解的示例教程，让你能从零开始，逐步理解并实现带有旋转及悬停动画的社交图标效果。为了更简单明了，以下示例仅创建四个图标（Facebook、Twitter、Google+、LinkedIn），并在每一步都附带代码展示和讲解。第0步：项目结构说明先准备两个文件：index.htmlHTML的主体结构style.css样式代码，控制图标外观与动画目录结构如下：project/
  • GTP生成UI代码 酒江 ui人工智能深度学习
    使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能
  • Tomcat 新手入门指南：从零开始掌握安装与配置 超级小狗 tomcatjava
    Tomcat新手入门指南：从零开始掌握安装与配置一、Tomcat是什么？ApacheTomcat是一个开源的轻量级Web应用服务器，专为运行JavaServlet和JSP设计。它是初学JavaWeb开发的必备工具，也是企业级应用的常见选择。核心功能：处理HTTP请求、管理Servlet生命周期、支持动态网页渲染。适用场景：开发测试环境、中小型Web应用部署、微服务架构中的容器化组件。二、快速安装T
  • Apache Tomcat 新手入门指南：从安装到部署的全流程解析 小志开发 服务apachetomcatjava
    ApacheTomcat作为一款轻量级的JavaServlet容器，被广泛应用于开发和运行基于Java的Web应用程序（如Servlet和JSP）。对于刚接触Tomcat的开发者来说，快速掌握其基本操作至关重要。本文将从零开始，详细介绍Tomcat的安装、配置、部署及常见问题的解决方法，助你轻松入门。第一部分：环境准备与安装1.确认JDK环境Tomcat依赖Java运行环境，因此需提前安装JDK8
  • Tomcat新手入门指南：从零开始搭建Web服务器 xiaoyu❅ javatomcat前端服务器
    目录一、Tomcat是什么？二、快速安装指南1.环境准备2.下载安装3.验证安装三、目录结构解析四、第一个Web应用部署1.创建标准目录结构2.编写测试JSP3.部署方式对比五、核心配置详解1.修改端口号2.配置虚拟主机3.JVM参数优化六、常用操作命令七、常见问题排查1.端口冲突2.应用热更新失败3.内存溢出八、最佳实践建议九、学习资源推荐一、Tomcat是什么？ApacheTomcat是一个开
  • 博客搭建之路：hexo使用next主题博客侧边栏标题点击不跳转 程序员
    hexo使用next主题博客侧边栏标题点击不跳转hexo版本5.0.2npm版本6.14.7next版本7.8.0本着我肯定不是第一个出这个问题的人，去github上找了找，果然我不是第一个好吧，也跟着改吧(修改themes/next/source/js/utils.js)，找到registerSidebarTOC函数registerSidebarTOC:function(){constnavIt
  • 下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？ liangshanbo1215 前端性能css前端
    下载CSS文件会对页面的渲染过程产生影响，具体是否阻塞DOM树的构建和页面的显示，取决于浏览器的渲染机制。1.CSS文件下载是否会阻塞DOM树的构建？一般情况下，CSS文件下载不会阻塞DOM树的构建：DOM树的构建是由HTML解析器完成的，解析器会逐行解析HTML并构建DOM树。即使CSS文件正在下载，HTML解析器仍然会继续工作，构建DOM树。但如果JavaScript访问了样式，CSS文件下载
  • 《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》 煜bart 人工智能机器人
    引言：当JavaScript遇上硬核计算**“为什么我的音频分析页面卡到崩溃？”这是前端工程师在实现实时频谱可视化时最常见的噩梦。传统JavaScript的FFT计算在万级数据点时就会引发严重卡顿，但今天我们将用**Rust+WebAssembly**的组合拳，在浏览器中实现**零依赖、300%加速的傅里叶变换**。无需WebGL黑魔法，直接上硬核代码！---###**一、血腥现场：JS的Type
  • WEB UI自动化测试中，元素定位的八大定位方式详解 做测试的小薄 测试进阶selenium八大元素定位cssUI自动化xpath
    在WebUI自动化测试中，元素定位是实现自动化操作的核心步骤。准确、高效的元素定位能够确保测试脚本的稳定性和可维护性。SeleniumWebDriver提供了八种常见的元素定位方式，每种方式都有其适用场景和高级技巧。本文将逐一解析这八大定位方式，并分享一些进阶技巧，帮助你提升自动化测试的效率。一、通过ID定位(find_element(By.ID,"value"))原理HTML元素的id属性通常是
  • 【React】使用reduxjs/toolkit进行状态管理 编码七号 react.jsjavascript前端
    在我们的项目中通常需要维护一个状态管理器来支持我们进行跨组件的数据通讯，react生态提供了reduxjs/toolkit来进行状态管理首先我们安装一下必要的依赖npminstallreact-redux@reduxjs/toolkit接下来在我们的工程项目的src同级目录里面新建文件夹store文件夹内新建index.js和userStore.js文件userStore文件：import{cre
  • json-rpc 传递对象的python示例代码 weixin_45081353 jsonrpcpython
    1.json文档IntroducingJSONcJSONjson的c解析库janssonjson的c解析库jsonpathjanssonapidocs2.json-rpc协议文档JSON-RPC1.0Specification(2005)JSON-RPC2.0Specification2个版本可同时存在下面的代码示例，实现的json-rpc2.0协议3.客户端代码操作对象json-rpc2.0#i
  • Go语言JSON-RPC 实战： `net/rpc/jsonrpc` 包的高效使用指南 walkskyer golang标准库golangjsonrpc
    Go语言JSON-RPC实战：`net/rpc/jsonrpc`包的高效使用指南简介`jsonrpc`包的基础客户端（Client）创建客户端调用方法服务器（Server）配置服务器数据类型和错误处理搭建基础的JSON-RPC服务服务端的实现客户端的实现进阶应用示例实现异步调用处理并发请求使用中间件增强功能问题解决和调试技巧常见错误及其解决方法连接失败方法调用返回错误性能优化异步处理连接复用安全性
  • 最新计算机专业毕设论文选题大全基于BeautifulSoup的毕业设计详细题目100套优质毕设项目分享(源码+论文)✅ 会写代码的羊 毕设选题课程设计beautifulsoup毕业设计毕业设计题目毕设题目python网络爬虫
    文章目录前言最新毕设选题（建议收藏起来）基于BeautifulSoup的毕业设计选题毕设作品推荐前言2025全新毕业设计项目博主介绍：✌全网粉丝10W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者。技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、大数据、机器学习等设计与开发。主要内容：免费
  • gis地图开发-openlayer2热力图显示 粮忆雨 GIS地图开发gis地图开发热力图标注
    openlayers2还没将heatmap类加入，到openlayers3采用。但是考虑到浏览器的兼容性兼容到更低本版的IE，所以这里采用openlayers2版本开发gis。想要进行热力图开发就必须先对其扩展（heatmap-openlayers.js）。直接上代码//地图基础配置varoptions={controls:[newOpenLayers.Control.PanZoomBar(),n
  • 【后端开发面试题】每日 3 题（十五） Pandaconda 的测开之路 #后端开发面试专栏面试后端后端开发分布式数据库幂等性python
    ✍个人博客：Pandaconda-CSDN博客专栏地址：https://blog.csdn.net/newin2020/category_12903849.html专栏简介：在这个专栏中，我将会分享后端开发面试中常见的面试题给大家，每天的题目都是独立且随机的，之前的面试题不会影响接下来的学习~❤️如果有收获的话，欢迎点赞收藏，您的支持就是我创作的最大动力题目1:什么是分布式锁？它的使用场景是什么？
  • 【测试开发面试题】每日 3 题（十六） Pandaconda 的测开之路 #测试开发面试专栏面试测试开发测试性能测试测试用例边界值分析A/B测试
    ✍个人博客：Pandaconda-CSDN博客专栏地址：https://blog.csdn.net/newin2020/category_12903869.html专栏简介：在这个专栏中，我将会分享测试开发面试中常见的面试题给大家，每天的题目都是独立且随机的，之前的面试题不会影响接下来的学习~❤️如果有收获的话，欢迎点赞收藏，您的支持就是我创作的最大动力题目1:什么是测试用例的边界值分析？为什么它
  • 【后端开发面试题】每日 3 题（八） Pandaconda 的测开之路 #后端开发面试专栏分布式负载均衡后端面试后端开发java数据库
    ✍个人博客：Pandaconda-CSDN博客专栏地址：https://blog.csdn.net/newin2020/category_12903849.html专栏简介：在这个专栏中，我将会分享后端开发面试中常见的面试题给大家~❤️如果有收获的话，欢迎点赞收藏，您的支持就是我创作的最大动力1.简述负载均衡的概念、常见算法及其在后端开发中的应用场景概念：负载均衡是一种将工作负载分布到多个计算资源
  • 鸿蒙（HarmonyOS）性能优化—Web开发常见问题 码牛程序猿 HarmonyOS鸿蒙工程师鸿蒙harmonyos华为HarmonyOS鸿蒙应用开发鸿蒙系统鸿蒙鸿蒙开发
    H5页面如何与ArkTS交互(API10)问题现象目前javaScriptProxy仅支持同步调用，异步调用无法获取执行结果。解决措施对javaScriptProxy和runJavaScript封装，实现JSBridge通信方案。适用于H5调用原生侧函数。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口执行JS脚本到H5中，
  • Flexbox 布局详细笔记 .毅晨. html5cssvue.jshtmles6npm笔记
    Flexbox布局详细笔记Flexbox（弹性盒子布局）是CSS3中用于实现高效、灵活的页面布局的模块，特别适合处理一维布局（行或列）。以下是核心知识点和常见用法：一、Flexbox基础概念容器（FlexContainer）通过display:flex;或display:inline-flex;将一个元素定义为Flex容器。其直接子元素自动成为Flex项目（FlexItems）。主轴（MainAx
  • 【JSON-RPC】 python+JSON-RPC示例与入门 魔都吴所谓 jsonrpcpython
    JSON-RPC是一种无状态的、轻量级的远程过程调用（RPC）协议。它定义了几种数据结构及其处理规则。它使用JSON（JavaScriptObjectNotation）作为数据格式，允许实现相同功能的程序以松散耦合的方式跨网络通信。以下是一个简单的JSON-RPC使用Python的示例。我们将使用jsonrpclib这个库来创建一个JSON-RPC服务端和一个客户端。首先，你需要安装jsonrpc
  • turfijs合并相邻或者相交多边形 库库的写代码 arcgis
    文章目录前言合并多边形一、安装turf二、加载高德三、绘制图形四、计算交点六、绘制图像七、效果前言合并多边形一、安装turfnpmi@turf/turf二、加载高德AMapLoader.load({key:"你的key",//申请好的Web端开发者Key，首次调用load时必填version:"2.0",//指定要加载的JSAPI的版本，缺省时默认为1.4.15plugins:["AMap.Pol
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • github中多个平台共存 jackyrong github
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
  • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
    //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
  • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
  • javaSE javaEE javaME == API下载 Array_06 java
    oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
  • shiro入门学习 cugfy javaWeb框架
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
  • Array添加删除方法 357029540 js
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
  • navigation bar 更改颜色 张亚雄 IO
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
  • unicode转换成中文 adminjun unicode编码转换
      在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
  • 一站式 Java Web 框架 firefly aijuans Java Web
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
  • 设计模式——单例模式 ayaoxinchao 设计模式
    定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
  • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
  • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
  • 【Spark八十】Spark RDD API二 bit1129 spark
    coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
    在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
  • Java基础-克隆 BrokenDreams java基础
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
  • HDR图像PS教程集锦&心得 cherishLC PS
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
  • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
    maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
  • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
    一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
  • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
    恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
  • 数据库中数据表数据迁移方法 dcj3sjt126com sql
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
  • Java反转字符串 dyy_gusi java反转字符串
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
  • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
  • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
  • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
  • ZooKeeper原理及使用 liyonghui160com
               ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
  • 程序员解决问题的60个策略 pda158 框架工作单元测试
    根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
  • Create the Google Play Account sillycat Google
    Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
  • JSP三大指令 vikingwei jsp
    JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他