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. Captcha服务（后续2）— 改造Captcha服务之Asp.Net Core项目中如何集成TypeScript

    环境准备 .Net Core 版本:下载安装.Net Core SDK,安装完成之后查看sdk版本 ,查看命令dotnet --version,我的版本是2.2.101 IDE: Visual Stu ...

  2. [T-SQL] NCL INDEX 欄位選擇效能影響-解析

    因為這篇文章寫的比較長一些,我就將總結先列出來 總結 1. 除了WHERE條件外,JOINColumn除了記得建立索引,也要注意到選擇性的高低,如果真的找不到可用的Column,可以考慮在兩邊關聯的表 ...

  3. C# Quartz定时任务corn时间设置详解

    http://cron.qqe2.com/  如果不会 或者想检验自己是否写的对就  通过这个网站 检测 或自动生成 *    *         *     *      *      *      ...

  4. .NET LINQ 实现跨数据库数据的整合

    如果要在不同的数据库之间,要把数据整合到一起,或者对数据进行统计分析的话,实现起来比较麻烦. 一般情况下我们第一时间想到的方法是通过前置机实现,在前置机上安装一个数据库和同步数据程序,定时的把数据同步 ...

  5. Java开发笔记（三十二）字符型与整型相互转化

    前面提到字符类型是一种新的变量类型,然而编码实践的过程中却发现,某个具体的字符值居然可以赋值给整型变量!就像下面的例子代码那样,把字符值赋给整型变量,编译器不但没报错,而且还能正常运行! // 字符允 ...

  6. 利用efi功能更改bios主板被隐藏的设置（如超频）

    整理自(来源): http://tieba.baidu.com/p/4934345324 ([新手教程]利用EFI启动盘修改 隐藏bios设置) http://tieba.baidu.com/p/49 ...

  7. Jquery 使用和Jquery选择器

    jQuery中的顶级对象($) jQuery 中最常用的对象即 $ 对象,要想使用 jQuery 的方法必须通过 $ 对象.只有将普通的 Dom 对象封装成 jQuery 对象,然后才能调用 jQue ...

  8. ArrayAdapter、SimpleAdapter简单用法

    1. 使用流程 2. ArrayAdapter new ArrayAdapter<?>(context, textViewResourceId, objects)   context:上下 ...

  9. C++ 11 Lambda表达式

    C++11的一大亮点就是引入了Lambda表达式.利用Lambda表达式,可以方便的定义和创建匿名函数.对于C++这门语言来说来说,“Lambda表达式”或“匿名函数”这些概念听起来好像很深奥,但很多 ...

  10. iOS开发之OC与swift开发混编教程，代理的相互调用,block的实现。OC调用Swift中的代理， OC调用Swift中的Block 闭包

    本文章将从两个方向分别介绍 OC 与 swift 混编 1. 第一个方向从 swift工程 中引入 oc类 1. 1 如何在swift的类中使用oc类    1.2  如何在swift中实现oc的代理 ...