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. 基于React-Native0.55.4的语音识别项目全栈方案

    移动端的API能力验证方案与PC端不一样!不一样!!不一样!!! 即使需要使用的API都存在,也不一定能用,这一点和PC端是有很大区别的,国内的手机系统虽然都是基于Android,但几乎都会经过各大厂 ...

  2. php-fpm 的优化

    pid = /usr/local/php/var/run/php-fpm.pid error_log = /usr/local/php/var/log/php-fpm.log log_level = ...

  3. Could not load file or assembly 'System.ValueTuple'

    项目目标框架:.Net Framework 4.6.2 报错:Could not load file or assembly 'System.ValueTuple' 在4.6.2项目中,想要使用C#7 ...

  4. Oracle day01 select where关键字

    select关键字 作用:检索“列” 注意:1.select后面的列可以起别名(查询的显示结果) 1) 列名后面一个空格后添加别名(别名中不许有“空格”) 2) 列名后面一个空格后使用双引号添加别名 ...

  5. Java开发笔记（三十）大小数BigDecimal

    前面介绍的BigInteger只能表达任意整数,但不能表达小数,要想表达任意小数,还需专门的大小数类型BigDecimal.如果说设计BigInteger的目的是替代int和long类型,那么设计Bi ...

  6. 记Android开发中的一些另类使用

    1.使用recyclerview,直接添加下列依赖就可以使用recyclerview,版本号与appcompat-v7版本号相同 compile 'com.android.support:design ...

  7. asp.net引用System.Speech实现语音提示

    using System; using System.Speech.Synthesis; namespace testvoice { class Program { static void Main( ...

  8. PHP代码片段

    将数组拼接为 table 标签字符串 <?php //判断是否是图片 function isImage($string){ $isImage = false; $pics = ['.png', ...

  9. response.write

    response.write(chunk[, encoding][, callback])# 查看英文版 chunk <string> | <Buffer> encoding  ...

  10. c/c++ 继承与多态 友元与继承

    问题1:类B是类A的友元类,类C是类B的友元类,那么类C是类A的友元类吗?函数fun是类B的友元函数,那么fun是类A的友元函数吗? 都不是,友元关系不能传递. 问题2:类B是类A的友元类,类C是类B ...