index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="box">
<div class="smallBox">
<span class="mark"></span> <!--遮罩层-->
<span class="floa"></span>
<img src="img/small.jpg" />
</div>
<div class="bigBox">
<img src="img/big.jpg" />
</div>
</div>

//先导入jq库
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fdj.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

//调用方法
new fdj();
</script>
</body>
</html>

style.css

*{
margin: 0;
padding: 0;
}
.box {
width: 171px;
height: 256px;
padding: 5px;
border: 1px solid #ccc;
position: relative;
}

.box .smallBox {
width: 171px;
height: 256px;
background: #eee;
position: relative;
}

.box .floa {
width: 50px;
height: 50px;
border: 1px solid #000;
background: #fff;
filter: alpha(opacity: 30);
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
display: none;
}

.box .mark {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
left: 0px;
top: 0px;
background: red;
filter: alpha(opacity: 0);
opacity: 0;
cursor: pointer;
}

.box .bigBox {
position: absolute;
top: -1px;
left: 215px;
width: 171px;
height: 256px;
overflow: hidden;
border: 2px solid #CCC;
display: none;
}

.box .bigBox img {
position: absolute;
top: -30px;
left: -80px;
}

fdj.js

//面向对象的方式写的。

function fdj(){
this.box=$(".box");
this.smallBox=$(".box .smallBox");
this.mark=$(".box .smallBox .mark");
this.floa=$(".box .smallBox .floa")
this.bigBox=$(".box .bigBox");
this.bigPic=$(".bigBox img");
this.init();
}

//每个函数都有一个prototype属性

fdj.prototype={
init:function(){
this.overMark();
this.outerMark();
this.moveMark();
},
overMark:function(){
this.mark.mouseover($.proxy(this.handleover,this));
},
handleover:function(){
this.floa.show();
this.bigBox.show();
},
outerMark:function(){
this.mark.mouseout($.proxy(this.handleouter,this));
},
handleouter:function(){
this.floa.hide();
this.bigBox.hide();
},
moveMark:function(){
this.mark.on("mousemove",$.proxy(this.handlemove,this));
},
handlemove:function(evt){
var left=evt.pageX-this.box.offset().left-this.mark.offset().left-this.floa.outerWidth()/2;
var top=evt.pageY-this.box.offset().top-this.mark.offset().top-this.floa.outerHeight()/2;

if(left<0){
left=0;
}
else if(left>this.mark.outerWidth()-this.floa.outerWidth()){
left=this.mark.outerWidth()-this.floa.outerWidth();
}
if(top<0){
top=0;
}else if(top>this.mark.outerHeight()-this.floa.outerHeight()){
top=this.mark.outerHeight()-this.floa.outerHeight();
}
this.floa.css({left:left,top:top});
var pX=left/(this.mark.outerWidth()-this.floa.outerWidth());
var pY=top/(this.mark.outerHeight()-this.floa.outerHeight());
this.bigPic.css({
left:-pX*(this.bigPic.outerWidth()-this.bigBox.outerWidth()),
top:-pY*(this.bigPic.outerHeight()-this.bigBox.outerHeight())
});

}
}

JQ面向对象的放大镜的更多相关文章

  1. jq + 面向对象实现拼图游戏

    jq + 面向对象实现拼图游戏 知识点 拖拽事件 es6面向对象 jquery事件 效果图 html: <div class="wraper"> <div cla ...

  2. js版面向对象图片放大镜

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>放 ...

  3. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  4. jq的图片放大镜效果

    <div class="imgbox"> <div class="probox"> <img src="" a ...

  5. JQ面向对象

    静态方法:某种类型才有的方法,这个方法干的事情只有类型本身有关,不受具体实例对象的影响,在C#语言中,它用static表示,VB中用share表示,而在jq中我们一般用$或者JQuery表示JQ类型, ...

  6. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...

  7. JQ也要面向对象~在JQ中扩展静态方法和实例方法(jq扩展方法)

    JQ也要面向对象,事实上,无论哪种开发语言,在开发功能时,都要把面向对象拿出来,用它的思想去干事,去理解事,面向对象会使问题简单化,清晰化,今天说两个概念“静态方法”与“实现方法”,这个在面向对象的语 ...

  8. jq仿淘宝放大镜插件

    html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...

  9. JQ实战天猫淘宝放大镜

    这个特效平时生活中很常见,话不多说先上效果图. 首先布局,遮罩层是这个效果中的重点精华,也就是下面代码中的shade. <style> * { margin:0px; padding:0p ...

随机推荐

  1. 跨站脚本攻击xss学习

    0.认识跨站脚本 举一个跨站脚本的简单例子. 假设一个页面将用户输入的参数直接显示到页面之中.(比如有如下代码) 在实际的浏览器中,在param中提交的参数正常会展示到页面之中.比如输入下面的URL: ...

  2. sql字符串包含单引号

    ad'min select  * from user where name ='ad''min'

  3. Django学习之一：Install Djongo 安装Djongo

    Install Djongo 安装Djongo Djongo是基于python的web框架,自然安装最关心的是python解释器版本了. Prerequisites 安装条件 Python版本与Djo ...

  4. JavaScript是如何工作的: Web推送通知的机制

    摘要: 如何在Web端推送消息? 这是专门探索 JavaScript 及其所构建的组件的系列文章的第9篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript是如何工作的:引擎,运行时 ...

  5. vue webpack build时关闭debug和console

    1.找到 webpack.prod.conf.js ,搜索 UglifyJsPlugin,添加配置 uglifyOptions: { compress: { warnings: false, drop ...

  6. 轨迹系列5——验证轨迹GPS坐标转换为本地坐标的四/七参数是否准确的一种方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 目前对多个项目轨迹不准确的情况做了排查,发现导致轨迹偏移百分 ...

  7. AndroidStudio开发Java工程（解决java控制台中文打印乱码+导入jar包运行工程）

    这篇分享一点个人AS开发java工程经验,虽然有时候还是得打开eclipse来运行java项目,但能用AS的时候还是尽量用AS,毕竟一个字,爽~ 废话不多说,进入正题. 一.开发Java工程 你有两种 ...

  8. matlab练习程序（对应点集配准的四元数法）

    这个算是ICP算法中的一个关键步骤,单独拿出来看一下. 算法流程如下: 1.首先得到同名点集P和X. 2.计算P和X的均值up和ux. 3.由P和X构造协方差矩阵sigma. 4.由协方差矩阵sigm ...

  9. Python开发【第三篇】基本数据类型

    整型 int __author__ = 'Tang' # 将字符串转换为数字 a = " b = int(a) # 前面是0的数转换,默认base按照十进制 a = " b = i ...

  10. ZooKeeper Dynamic Reconfiguration （dynamicConfigFile） ZooKeeper动态配置

    有人翻译的地址:https://www.cnblogs.com/dupang/p/5649843.html ZooKeeper Dynamic Reconfiguration Overview Cha ...