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. 第35章 秘密(secrets) - Identity Server 4 中文文档(v1.0.0)

    在某些情况下,客户端需要使用身份服务器进行身份验证,例如 在令牌端点请求令牌的机密应用程序(也称为客户端) API在内省端点验证引用令牌 为此,您可以将秘密列表分配给客户端或API资源. 秘密解析和验 ...

  2. Docker搭建MongoDB

    1. Docker搭建Mongodb 1.1 获取docker镜像 docker pull mongo 1.2 创建mongodb容器 docker run --name my-mongo -p 27 ...

  3. Android破解学习之路（八）—— 进化之地内购破解

    最近在TapTap闲逛,看到了进化之地这款游戏,TapTap上有两个进化之地,一个是在TapTap直接购买的,另外一个则是试玩版,玩到中间就会有个购买完整版. 试玩版连接:https://www.ta ...

  4. float浮动-清浮动BFC渲染机制

    float浮动,用于横向布局. 起初的横向布局都用display:inline-block,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格:font-size:0 ...

  5. bitset用法小结

    bitset bitset大概就是类似于bool数组一样的东西 但是它的每个位置只占1bit(特别特别小) bitset的原理大概是将很多数压成一个,从而节省空间和时间(暴力出奇迹) 一般来说bits ...

  6. 通过JavaScript调用SOAP终结点执行实体消息

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复148或者20150813可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 利用OData终结点可以方便的对 ...

  7. cesium 之自定义气泡窗口 infoWindow 后续优化篇（附源码下载）

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 该 ...

  8. HttpWebRequest 改为 HttpClient 踩坑记-请求头设置

    HttpWebRequest 改为 HttpClient 踩坑记-请求头设置 Intro 这两天改了一个项目,原来的项目是.net framework 项目,里面处理 HTTP 请求使用的是 WebR ...

  9. SQLServer\framework启动报异常：Module的类型初始值设定项引发异常

    net framework卸载 重装 https://download.microsoft.com/download/E/4/1/E4173890-A24A-4936-9FC9-AF930FE3FA4 ...

  10. ASP.MVC学习资源总结

    自己动手写一个简单的MVC框架(第一版) 自己动手写一个简单的MVC框架(第二版) ASP.Net请求处理机制初步探索之旅 - Part 1 前奏 ASP.Net请求处理机制初步探索之旅 - Part ...