oi520
oi520

用js实现简单放大镜效果

用js实现简单放大镜效果

此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩，图片的一个区域就会被放大，然后展示在右边。当鼠标移动时右边的大图片也会局部移动。这里的放大并不是真正的放大，而是等比例移动。下面是实现的代码：
css样式代码如下：

html代码如下：

<body>
    <div class="s_box">
        <img src="../img/large1.jpg" alt="">
        <span>span>
    div>
    <div class="b_box">
        <img src="../img/large1.jpg" alt="">
    div>
    <ul class="list">
        <li><img src="../img/large1.jpg" alt="">li>
        <li><img src="../img/large2.jpg" alt="">li>
    ul>
body>

js主要代码如下：

// 分析:
//     1.选择元素
//     2.绑定事件
// 	   3.进入的时候显示元素
//     4.移动：遮罩层跟随鼠标移动的同时计算遮罩层的移动比例 、右侧大图，等比例移动
//     5.离开的时候隐藏元素            
<script>
    class Large{
        constructor(){
            this.sBox = document.querySelector(".s_box");
            this.sImg = document.querySelector(".s_box img");
            this.sSpan = document.querySelector(".s_box span");
            this.bBox = document.querySelector(".b_box");
            this.bImg = document.querySelector(".b_box img");
            // 点击小图切换大图的按钮
            this.li = document.querySelectorAll(".list li");
        }
        addEvent(){
            var that = this;
            this.sBox.onmouseover = function(){
                that.over();
            }
            this.sBox.onmousemove = function(eve){
                var e = eve || window.event;
                that.move(e);
            }
            this.sBox.onmouseout = function(){
                that.out();
            }
            // 切换图片按钮的点击事件：根据布局做出调整
            for(var i=0;i<this.li.length;i++){
                this.li[i].onclick = function(){
                    that.sImg.src = this.children[0].src;
                    that.bImg.src = this.children[0].src;
                }
            }
        }
        over(){
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
        }
        move(e){
            // 计算遮罩层跟随鼠标移动时的left和top
            var l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth/2;
            var t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight/2;
            // 边界限定
            if(l<0) l=0;
            if(t<0) t=0;
            if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            // 设置遮罩层的位置
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            // 根据遮罩层移动的距离计算比例
            var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            // 根据上一步得到的比例，计算右侧大图要移动的当前值
            this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
            this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
        }
        out(){
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }

    // 启动
    var l = new Large();
    l.addEvent();

</script>

实现效果：
用js实现简单放大镜效果_第1张图片

你可能感兴趣的:(js)

  • Python-Django毕业设计医院门诊管理信息系统（程序+Lw) Python计算机毕设程序源码_ pythondjango课程设计
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程项目运行环境配置：Pychram社区版+python3.7.7+Mysql5.7+HBuilderX+listpip+Navicat11+Django+nodejs。项目技术：django+python+Vue等等组成，B/S模式+pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版
  • Java对接DeepSeek全攻略：从0到1小白无忧 古龙飞扬 java开发语言ai
    本文将带你从零开始，详细讲解如何在Java中对接DeepSeekAPI，适合小白用户。我们将从环境搭建、API调用、数据处理等方面逐步展开，并提供完整的代码示例。目录准备工作获取DeepSeekAPI密钥创建Java项目添加依赖使用Maven引入HTTP和JSON库编写代码创建请求和响应类发送HTTP请求处理API响应完整代码示例运行与测试常见问题与解决方案1.准备工作1.1获取DeepSeekA
  • Windows安装nvm【超详细图解】 古龙飞扬 windows
    在Windows系统上安装nvm（NodeVersionManager，即Node.js版本管理器）的详细步骤如下：一、下载nvm安装包方式一：官网下载地址：https://nvm.uihtm.com/注意此种方式可能会打不开，看运气，如果打不开还有第二种方式。方式二：GitHub下载1.访问nvm的GitHub页面：前往nvm的GitHub页面下载适用于Windows的安装包。2.选择安装包：通
  • jsp中嵌套java代码，js中嵌套java代码 loveking6 嵌套jspjsjava代码
    首先根据三目运算中，来判断如果等于add，就是新增，否则就是编辑。在js中想要判断是true还是false，所以需要把java代码拿过来，在js中写java代码，得加上，在里面写java代码根据jsp中的java代码，取到user，在js中调用user
  • js隐藏td loveking6 js隐藏
    通过if条件判断td的显示情况window.οnlοad=function(){//获取td的唯一标识，经过判断使其不显示（不占位隐藏）document.getElementById("admin2").style.display="none";$("#admin2").hide();$("#admin2").attr("style","display:none");//获取td的唯一标识，使其显
  • 使用Node.js对接StockTV全球金融市场数据API 数据分析爬虫
    使用Node.js对接StockTV全球金融市场数据API摘要：本文详细介绍了如何通过Node.js客户端库快速接入StockTV全球金融市场数据API，涵盖股票、外汇、期货和加密货币的实时行情获取与历史数据查询。通过本文，开发者可掌握RESTAPI调用、WebSocket实时订阅等核心功能。一、项目概述StockTVAPINode.js客户端是一个轻量级SDK，提供对全球四大金融市场的标准化访问
  • webpack-bundle-analyzer分析打包文件 闰土月下追猹 前端webpack-bundlebundle-analyzerwebpackvue.js前端
    安装：npminstall--save-devwebpack-bundle-analyzer在vue.config.js中配置：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports={chainWebpack:config=>{//打包分析if(process
  • angular中下载接口返回文件 lhhbk angular.js前端javascriptangular
    目录一、URL.createObjectURL()一、URL.createObjectURL()createObjectURL属于js的原生方法，位于window.URL上，用于将Blob或者File文件转换为可以临时的URL地址进行显示**注意**：Angular的HttpClient默认将响应解析为JSON对象‌16。若实际返回的是二进制数据（如Excel文件、图片等），解析过程会因格式不匹配
  • nodejs 010:Webpack 可视化分析插件 webpack-bundle-analyzer的使用 FakeOccupational 服务化&架构webpack前端node.js
    安装yarnadd--devwebpack-bundle-analyzer原始webpack.config.jswebpack.config.js代码定义了Webpack的配置，主要任务是将JavaScript和CSS文件打包，并将CSS提取到单独的文件中，配置了对Electron应用的支持，同时还将React相关的模块映射到Preact，以减小打包体积。//引入Node.js的path模块，用于
  • 【SpringMVC】常用注解：@PathVariable 字节源流 javaservlet开发语言
    1.作用用于绑定url中的占位符，例如请求中的/delete/{id}，这个{id}就是url中的占位符。url支持占位符是Spring3.0之后加入的。是SpringMVC支持rest风格URL的重要标志。2.属性value：用于指定url中占位符的名称。required：是否必须提供占位符。3.示例准备jsp代码pathVariable注解准备控制器代码@RequestMapping("use
  • SpringBoot2.0实战 | 第二十八章：整合SpringSecurity之前后端分离使用JWT实现登录鉴权 死牛胖子 #SpringBootspringBootspringSecurityjwttokenmybatis
    在前面的文章中，我们已经使用token实现前后端分离的系统登录及访问鉴权。第二十四章：整合SpringSecurity之最简登录及方法鉴权第二十五章：整合SpringSecurity之基于数据库实现登录鉴权第二十六章：整合SpringSecurity之前后端分离使用JSON格式交互第二十七章：整合SpringSecurity之前后端分离使用Token实现登录鉴权登录成功后，服务端会生成一个toke
  • Prompt工程全解析：从入门到精通的终极指南 二川bro 智能AI人工智能prompt
    Prompt工程全解析：从入门到精通的终极指南发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，可以分享一下给大家。点击跳转到网站。https://www.captainbed.cn/ccc一、Prompt设计核心法则1.1角色定位法则[角色设定]你是一位资深全栈工程师，拥有10年React和Node.js开发经验[任务要求]为电商系统设计购物车模块，要求：1.支持商品增删改查2.实时计算总价
  • 如何使用Jsoup提取商品信息：实战指南 数据小爬虫@ python爬虫java
    在使用Java进行Web爬虫开发时，Jsoup是一个非常强大的HTML解析库，可以帮助你轻松地提取网页中的数据。本文将详细介绍如何使用Jsoup提取商品信息，包括商品标题、价格、描述和图片链接等。一、环境准备（一）Java开发环境确保你的系统中已安装Java开发环境，推荐使用JDK11或更高版本。（二）安装所需库使用Maven管理项目依赖，主要包括以下库：Jsoup：用于解析HTML内容。在pom
  • 利用Java爬虫根据关键词获取商品列表：实战指南 数据小爬虫@ java爬虫开发语言
    在电商领域，通过关键词搜索商品并获取商品列表是常见的需求。本文将详细介绍如何使用Java编写爬虫程序，根据关键词获取商品列表，并确保爬虫行为符合平台规范。为了确保代码的准确性和实用性，我们将提供详细的代码示例和解释。一、环境准备（一）Java开发环境确保你的系统中已安装Java开发环境，推荐使用JDK11或更高版本。（二）安装所需库使用Maven管理项目依赖，主要包括以下库：Jsoup：用于解析H
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_10空状态的固定表头表格 宝码香车 #DeepSeekjavascript前端vue.jsecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_10空状态的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口s
  • Javascript基础语法详解 Warren98 javascript开发语言ecmascript
    面向对象的语言.脚本语言,不需要编译,浏览器解释即可运行.用于控制网页的行为.浏览器的source可以打断点调试,console输入代码可以执行usestrict指令:在“严格模式”下运行js代码,防止意外创建全局变量等,提高代码安全性和执行效率.使用:全局严格模式：在脚本的开头添加"usestrict".函数级严格模式:在函数的开头添加"usestrict"：functionmyFunction
  • Next.js项目MindAI教程 - 第一章：环境准备与项目初始化 琑95 Next.js实战项目node.jstypescriptgitmysql人工智能阿里云c5全栈
    1.开发环境准备1.1Node.js安装#检查是否已安装Node.jsnode-vnpm-v#如果未安装，访问https://nodejs.org下载安装包#建议安装LTS版本（当前为18.x或20.x）1.2配置npm镜像（国内用户推荐）#设置淘宝镜像npmconfigsetregistryhttps://registry.npmmirror.com#或安装cnpmnpminstall-gcnp
  • cursor全栈网页开发最合适的技术架构和开发语言 getapi 架构开发语言
    在使用Cursor（一个基于AI的代码编辑器）进行前后端全栈网页开发时，选择合适的技术架构和开发语言非常重要。以下是一个推荐的技术架构和语言组合，能够帮助你高效开发并充分利用Cursor的功能。1.技术架构推荐对于全栈开发，建议采用MERN/MEAN技术栈或现代化的微前端架构，具体如下：(1)MERN技术栈MERN是MongoDB、Express.js、React和Node.js的缩写，是目前非常
  • 使用pdfjs加载多页pdf并实现打印 MandiGao vue文件处理pdfvue
    版本：vue:2.7.10pdfjs-dist:2.14.305worker-loader:3.0.1安装pdfjs-dist、worker-loadernpminstallpdfjs-dist@[email protected]在vue.config.js中配置//webpack配置chainWebpack(config){
  • es常用命令 qq_35640866 elasticsearch
    查看索引1、查看所有的索引GET/_cat/indices?vjson格式化显示GET/_cat/indices?format=json&pretty"health":"green",健康状态"status":"open","index":"xxxx_202304_0010",索引名字"uuid":"xxxx5j0SYiydLnuo9Txxx","pri":"16",主分片数量"rep":"1",
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_07带分页的固定表头表格 宝码香车 #DeepSeekjavascript前端vue.jsecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_07带分页的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口s
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_04带选择框的固定表头表格 宝码香车 #DeepSeekjavascript前端vue.jsecmascriptDeepSeekdeepSeekdeepseek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_04带选择框的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_01基础固定表头示例 宝码香车 #DeepSeekjavascript前端vue.jsecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_01基础固定表头示例页面效果组件代码测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口src\App
  • 让你秒懂 Vue .env 文件 _虾仁不眨眼_ Vue2vue.js前端javascript
    在Vue.js项目中，.env文件用于配置环境变量，这些变量可以在开发、测试和生产环境中使用。VueCLI提供了一种机制，允许你为不同的环境定义不同的环境变量。以下是.env、.env.development和.env.production文件的用途和区别，以及如何使用它们。1..env文件.env文件是项目的默认环境变量文件，适用于所有环境。它包含通用的环境变量，这些变量在开发、测试和生产环境中
  • 基于html5QrCode实现的H5扫码功能（uni-app v2版本） _虾仁不眨眼_ 移动端H5uni-apphtml5
    1.安装（选择一种方式）使用npmHtml5Qrcodenpm链接npmihtml5-qrcode直接引入html5-qrcode.min.js文件（本例使用此方法）2.扫码组件代码（先引入Html5Qrcode资源）exportdefault{name:'Scan',model:{props:'value',event:'close'},props:{value:{type:Boolean,de
  • input限制只能输入正整数 _虾仁不眨眼_ javascripthtml5
    要限制input元素只能输入正整数，可以使用以下几种方法：1.使用HTML5的type="number"属性这种方式可以限制输入框只接受数字输入，并且可以通过min和step属性设置最小值和步长。2.使用正则表达式进行输入验证使用@input事件监听输入框的输入事件，并在validateInput方法中使用正则表达式过滤掉非数字和非正整数的字符。//html//jsmethods:{validat
  • d3中文案例_D3js初探及数据可视化案例设计实战 -web开发 萌萌爱恋 d3中文案例
    编辑推荐:本文来自cnblogs，本文主要介绍了D3js一个可视化工具，并且以实际案例讲解了数据可视化的设计、方法、过程和结果等相关内容。摘要：本文以本人目前所做项目为基础，从设计的角度探讨数据可视化的设计的方法、过程和结果，起抛砖引玉之效。在技术方案上，我们采用通用web架构和d3js作为主要技术手段；考虑到项目需求，这里所做的可视化案例都是数据演示工具，不是数据探索工具。其中所用截图，并非最终
  • uni-app App 端分段导出 JSON 数据为文件 _虾仁不眨眼_ uni-app
    在开发过程中，我们经常需要将大量数据导出为JSON文件，尤其是在处理长列表或大数据集时。然而，直接将所有数据写入一个文件可能会导致性能问题，尤其是在移动设备上。为了优化性能并提高用户体验，我们可以将数据分段导出到多个文件中。实现思路分段处理数据：将长JSON数据分段，每段包含固定数量的数据。使用plus.io写入文件：利用uni-app的plus.ioAPI，将每段数据写入单独的文件。提示用户导出
  • 前端大屏触摸签名实现 风无雨 前端前端
    参考：JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存_js手写签名-CSDN博客https://www.cnblogs.com/smileZAZ/p/17219400.html1.新建一个canvas元素获取canvas上下文，绘制初始矩形，设置高度宽度，初始绘制位置0,0//创建上下文constctx=canvas.getContext('2d')2.监听touchst
  • 小程序 实现手写签名功能 小星落 小程序javascriptjscanvas小程序
    小程序利用canvas实现手写签名设置小程序横屏在page.json或对应页面.json文件中设置landscape代表固定横屏"pageOrientation":"landscape"手写签名创建canvas画布设置监听触摸开始移动结束等时间此处为uniapp示例原生小程序的也可参考进行修改(只需将@touchmove等事件换为bindtouchmove等微信事件即可)重签完成签名page{ba
  • web前段跨域nginx代理配置 刘正强 nginxcmsWeb
    nginx代理配置可参考server部分 server {         listen       80;         server_name  localhost;
  • spring学习笔记 caoyong spring
    一、概述     a>、核心技术 : IOC与AOP b>、开发为什么需要面向接口而不是实现     接口降低一个组件与整个系统的藕合程度，当该组件不满足系统需求时，可以很容易的将该组件从系统中替换掉，而不会对整个系统产生大的影响 c>、面向接口编口编程的难点在于如何对接口进行初始化,(使用工厂设计模式)
  • Eclipse打开workspace提示工作空间不可用 0624chenhong eclipse
    做项目的时候，难免会用到整个团队的代码，或者上一任同事创建的workspace， 1.电脑切换账号后，Eclipse打开时，会提示Eclipse对应的目录锁定，无法访问，根据提示，找到对应目录，G:\eclipse\configuration\org.eclipse.osgi\.manager，其中文件.fileTableLock提示被锁定。 解决办法，删掉.fileTableLock文件，重
  • Javascript 面向对面写法的必要性？ 一炮送你回车库 JavaScript
    现在Javascript面向对象的方式来写页面很流行，什么纯javascript的mvc框架都出来了：ember 这是javascript层的mvc框架哦,不是j2ee的mvc框架   我想说的是，javascript本来就不是一门面向对象的语言，用它写出来的面向对象的程序，本身就有些别扭，很多人提到js的面向对象首先提的是：复用性。那么我请问你写的js里有多少是可以复用的，用fu
  • js array对象的迭代方法 换个号韩国红果果 array
    1.forEach 该方法接受一个函数作为参数， 对数组中的每个元素 使用该函数  return 语句失效 function square(num) { print(num, num * num); } var nums = [1,2,3,4,5,6,7,8,9,10]; nums.forEach(square); 2.every 该方法接受一个返回值为布尔类型
  • 对Hibernate缓存机制的理解 归来朝歌 session一级缓存对象持久化
    在hibernate中session一级缓存机制中，有这么一种情况： 问题描述：我需要new一个对象，对它的几个字段赋值，但是有一些属性并没有进行赋值，然后调用 session.save()方法，在提交事务后，会出现这样的情况： 1：在数据库中有默认属性的字段的值为空 2：既然是持久化对象，为什么在最后对象拿不到默认属性的值？ 通过调试后解决方案如下： 对于问题一，如你在数据库里设置了
  • WebService调用错误合集 darkranger webservice
     Java.Lang.NoClassDefFoundError: Org/Apache/Commons/Discovery/Tools/DiscoverSingleton 调用接口出错， 一个简单的WebService import org.apache.axis.client.Call;import org.apache.axis.client.Service; 首先必不可
  • JSP和Servlet的中文乱码处理 aijuans Java Web
    JSP和Servlet的中文乱码处理 前几天学习了JSP和Servlet中有关中文乱码的一些问题，写成了博客，今天进行更新一下。应该是可以解决日常的乱码问题了。现在作以下总结希望对需要的人有所帮助。我也是刚学，所以有不足之处希望谅解。 一、表单提交时出现乱码： 在进行表单提交的时候，经常提交一些中文，自然就避免不了出现中文乱码的情况，对于表单来说有两种提交方式：get和post提交方式。所以
  • 面试经典六问 atongyeye 工作面试
    题记：因为我不善沟通，所以在面试中经常碰壁，看了网上太多面试宝典，基本上不太靠谱。只好自己总结，并试着根据最近工作情况完成个人答案。以备不时之需。 以下是人事了解应聘者情况的最典型的六个问题： 1 简单自我介绍 关于这个问题，主要为了弄清两件事，一是了解应聘者的背景，二是应聘者将这些背景信息组织成合适语言的能力。 我的回答：(针对技术面试回答，如果是人事面试，可以就掌
  • contentResolver.query()参数详解 百合不是茶 androidquery()详解
    收藏csdn的博客,介绍的比较详细,新手值得一看 1.获取联系人姓名 一个简单的例子，这个函数获取设备上所有的联系人ID和联系人NAME。 [java]  view plain copy   public void fetchAllContacts() {      
  • ora-00054:resource busy and acquire with nowait specified解决方法 bijian1013 oracle数据库killnowait
            当某个数据库用户在数据库中插入、更新、删除一个表的数据，或者增加一个表的主键时或者表的索引时，常常会出现ora-00054:resource busy and acquire with nowait specified这样的错误。主要是因为有事务正在执行（或者事务已经被锁），所有导致执行不成功。 1.下面的语句
  • web 开发乱码 征客丶 springWeb
    以下前端都是 utf-8 字符集编码 一、后台接收 1.1、 get 请求乱码 get 请求中，请求参数在请求头中； 乱码解决方法： a、通过在web 服务器中配置编码格式：tomcat 中，在 Connector 中添加URIEncoding="UTF-8"； 1.2、post 请求乱码 post 请求中，请求参数分两部份， 1.2.1、url？参数，
  • 【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式 bit1129 spark
    Spark SQL数据源和表的Schema case class apply schema parquet json JSON数据源 准备源数据 {"name":"Jack", "age": 12, "addr":{"city":"beijing&
  • JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss BlueSkator -Xss-Xmn-Xms-Xmx
      堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java -Xmx355
  • jqGrid 各种参数 详解(转帖) BreakingBad jqGrid
      jqGrid 各种参数 详解 分类：  源代码分享  个人随笔请勿参考  解决开发问题 2012-05-09 20:29   84282人阅读   评论(22)   收藏   举报 jquery 服务器 parameters function ajax string  
  • 读《研磨设计模式》-代码笔记-代理模式-Proxy bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; /* * 下面
  • 应用升级iOS8中遇到的一些问题 chenhbc ios8升级iOS8
    1、很奇怪的问题，登录界面，有一个判断，如果不存在某个值，则跳转到设置界面，ios8之前的系统都可以正常跳转，iOS8中代码已经执行到下一个界面了，但界面并没有跳转过去，而且这个值如果设置过的话，也是可以正常跳转过去的，这个问题纠结了两天多，之前的判断我是在 -(void)viewWillAppear:(BOOL)animated  中写的，最终的解决办法是把判断写在 -(void
  • 工作流与自组织的关系？ comsci 设计模式工作
      目前的工作流系统中的节点及其相互之间的连接是事先根据管理的实际需要而绘制好的，这种固定的模式在实际的运用中会受到很多限制，特别是节点之间的依存关系是固定的，节点的处理不考虑到流程整体的运行情况，细节和整体间的关系是脱节的，那么我们提出一个新的观点，一个流程是否可以通过节点的自组织运动来自动生成呢？这种流程有什么实际意义呢？   这里有篇论文，摘要是：“针对网格中的服务
  • Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX daizj oracle
    insert提示IGNORE_ROW_ON_DUPKEY_INDEX 转自：http://space.itpub.net/18922393/viewspace-752123 在 insert into tablea ...select * from tableb中，如果存在唯一约束，会导致整个insert操作失败。使用IGNORE_ROW_ON_DUPKEY_INDEX提示，会忽略唯一
  • 二叉树:堆 dieslrae 二叉树
        这里说的堆其实是一个完全二叉树,每个节点都不小于自己的子节点,不要跟jvm的堆搞混了.由于是完全二叉树,可以用数组来构建.用数组构建树的规则很简单:     一个节点的父节点下标为: (当前下标 - 1)/2     一个节点的左节点下标为: 当前下标 * 2 + 1   &
  • C语言学习八结构体 dcj3sjt126com c
    为什么需要结构体，看代码 # include <stdio.h> struct Student //定义一个学生类型，里面有age, score, sex, 然后可以定义这个类型的变量 { int age; float score; char sex; } int main(void) { struct Student st = {80, 66.6,
  • centos安装golang dcj3sjt126com centos
    #在国内镜像下载二进制包 wget -c  http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local -xzf go1.4.1.linux-amd64.tar.gz   #把golang的bin目录加入全局环境变量 cat >>/etc/profile<
  • 10.性能优化-监控-MySQL慢查询 frank1234 性能优化MySQL慢查询
    1.记录慢查询配置 show variables where variable_name like 'slow%' ; --查看默认日志路径 查询结果：--不用的机器可能不同 slow_query_log_file=/var/lib/mysql/centos-slow.log 修改mysqld配置文件：/usr /my.cnf[一般在/etc/my.cnf，本机在/user/my.cn
  • Java父类取得子类类名 happyqing javathis父类子类类名
      在继承关系中，不管父类还是子类，这些类里面的this都代表了最终new出来的那个类的实例对象，所以在父类中你可以用this获取到子类的信息！   package com.urthinker.module.test; import org.junit.Test; abstract class BaseDao<T> { public void
  • Spring3.2新注解@ControllerAdvice jinnianshilongnian @Controller
    @ControllerAdvice，是spring3.2提供的新注解，从名字上可以看出大体意思是控制器增强。让我们先看看@ControllerAdvice的实现：   @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Component public @interface Co
  • Java spring mvc多数据源配置 liuxihope spring
    转自：http://www.itpub.net/thread-1906608-1-1.html 1、首先配置两个数据库 <bean id="dataSourceA" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close&quo
  • 第12章 Ajax（下） onestopweb Ajax
    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/
  • BW / Universe Mappings blueoxygen BO
      BW Element OLAP Universe Element Cube  Dimension Class Charateristic A class with dimension and detail objects (Detail objects for key and desription) Hi
  • Java开发熟手该当心的11个错误 tomcat_oracle java多线程工作单元测试
    #1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为
  • 推行国产操作系统的优劣 yananay windowslinux国产操作系统
    最近刮起了一股风，就是去“国外货”。从应用程序开始，到基础的系统，数据库，现在已经刮到操作系统了。原因就是“棱镜计划”，使我们终于认识到了国外货的危害，开始重视起了信息安全。操作系统是计算机的灵魂。既然是灵魂，为了信息安全，那我们就自然要使用和推行国货。可是，一味地推行，是否就一定正确呢？ 先说说信息安全。其实从很早以来大家就在讨论信息安全。很多年以前，就据传某世界级的网络设备制造商生产的交
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他