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

原生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)

  • 《突破性能瓶颈，用 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,
  • HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？ 2501_90699640 html编辑器wordckeditor粘贴wordckeditor导入wordckeditor导入pdfckeditor导入ppt
    要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.netcore功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentO
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴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,
  • MongoDB下载安装 数据潜水员 mongodb
    ###MongoDB1.MongoDB是一种基于文档的非关系型（NoSQL）数据库，数据存储在灵活的JSON文档中，便于快速查询和索引。####二、MongoDB下载1.**官网下载**：-官网地址：(https://www.mongodb.com/)-下载页面：(https://www.mongodb.com/try/download)-**注意**：需要登录账号（可免费注册）后才能下载。2.*
  • Cool Admin5(Go版)后台管理系统开发框架搭建使用记录 后青春期的诗go 经验分享golang开发语言后端go
    一、环境说明nodejs建议版本：18二、安装安装框架github下载最新的zip压缩包，然后解压。#进入解压缩后的目录cdcool-admin5#直接修改go.mod里面的模块名（或删除原go.mod文件，重新初始化：Gomodinitcool-admin5）#根据需要调整man.go文件里的导入路径#安装依赖gomodtidy#运行后端项目Gorun.#进入前端目录Cdfrontend#安装依
  • npm version 命令完全指南 程序员
    npmversion命令完全指南什么是npmversion?npmversion是npm提供的一个非常实用的版本管理命令，它可以帮助我们方便地更新package.json中的版本号，同时创建一个版本提交和标签。版本号格式说明在介绍命令之前，我们先了解一下npm使用的版本号格式：主版本号.次版本号.修订号（例如：1.2.3）主版本号(major)：做了不兼容的API修改次版本号(minor)：做了向
  • Node.js和webpack入门-个人学习笔记 ksmswq node.jswebpack学习
    Node.js-入门Node.js基础概念Node.js是一个跨平台JavaScript运行环境，是开发者可以搭建服务器端的JavaStript应用程序。作用1.编写服务端程序2.编写数据接口，提供网页浏览资源等等3.实现“前端工程化”，为Vue和React等框架做铺垫前端工程化-概念开发项目直到上线，过程中集成的所有工具和技术。（Node.js是前端工程化的基础（因为Node.js可以主动读取前
  • Node.js入门(学习笔记) 唐小艾 学习笔记node.js
    文章目录简介NodeJS下载安装下载安装NodeJS与WebStorm整合JS文件运行CommonJS规范模块模块化定义模块引用模块标识node中的对象globalexports和module.exports属性方法引用包packageNPM(NodePackageManager)NPM命令NPM包引用NPM注意下载速度慢Nodejs核心模块Buffer模块buffer类方法buffer实例的属性
  • 基于python+django+vue.js开发的社区养老管理系统源码+运行步骤 冷琴1996 Python系统设计pythondjangovue.js
    业余时间开发的社区养老系统，基于python/vue技术开发。学习过程问题可以留言。功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。功能包括：老人管理、护工管理、亲属管理、病史管理、房间管理、活动管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_yanglao演示地址ht
  • 基于 Vue 和 Element Plus 的时间范围控制与数据展示 奶糖 肥晨 vuevue.jselementui前端
    文章目录1.核心功能2.实现效果3.代码实现️3.1HTML部分3.2JavaScript部分3.3CSS部分本文将重点讲解如何在Vue项目中使用ElementPlus的el-date-picker组件实现时间范围选择，并结合“日”、“月”、“年”按钮动态控制时间范围。！1.核心功能时间范围选择：使用el-date-picker实现日期范围选择。快速切换：通过“日”、“月”、“年”按钮快速设置时间
  • 【Vue.js 2.x源码解析】第18章 从Vue源码分析计算属性与侦听属性的本质差别 代码简单说 教你读懂Vue2.x源码vue.js前端javascript
    想深入了解Vue2.x源码底层原理实现，从编译系统、渲染系统到响应式系统vue-router和vuex等实现方式可以关注『Vue.js2.x源码精讲』专栏或查看专栏目录了解详情从Vue源码分析计算属性与侦听属性的本质差别计算属性（Computed）——了解它，你就能高效利用它`defineComputed`和`createComputedGetter`侦听属性（Watch）——灵活监听变化`wat
  • Vue.js 事件处理与修饰符详解 vvilkim vuevue.js前端javascript
    Vue.js是一个流行的前端框架，它提供了强大的事件处理机制，使得开发者可以轻松地处理用户交互。Vue的事件处理通过v-on指令实现，同时还提供了丰富的事件修饰符和按键修饰符，帮助我们更高效地处理事件。本文将详细介绍Vue的事件处理机制、修饰符的使用方法，并结合示例代码展示如何在实际开发中应用这些功能。1.v-on指令与事件处理在Vue中，v-on指令用于监听DOM事件，并在事件触发时执行Java
  • 深入理解Vue 3：计算属性与侦听器的艺术 qcidyu 实战案例性能优化模板路由侦听器计算属性Vue3
    title:深入理解Vue3：计算属性与侦听器的艺术date:2024/5/30下午3:53:47updated:2024/5/30下午3:53:47categories:前端开发tags:Vue3计算属性侦听器路由模板性能优化实战案例前言Vue3的新特性简介Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性
  • Cursor中搭建vue 阿什么名字不会重复呢 vue.js前端javascript
    首先检查你电脑上是否安装了node和npm下面是具体的代码node-vnpm-v如果安装好了则会显示node和npm的版本。如果没有安装则可以去官网安装这个是node.js网址下面一步是全局安装VueCLI命令是npminstall-g@vue/cli但是直接安装的话，速度会非常的慢，我们可以选择国内淘宝的镜像，切换npm源到淘宝镜像：npmconfigsetregistryhttps://reg
  • 【k8s004】 Docker 打包 K8s镜像 姚毛毛-aione1.com kubernetesdocker容器
    文章目录一.准备工作1.安装Docker:[官方安装文档](https://docs.docker.com/get-docker/)2.准备应用代码（示例使用Node.js应用）二.创建Dockerfile3、构建镜像（注意最后的点号）4、测试运行5、推送镜像到仓库6、Kubernetes部署文件示例7、部署到Kubernetes三、注意事项8、常用调试命令四、注意事项9、最佳实践一.准备工作1.
  • 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其他