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. Chrome F12调试工具常用技巧

    原文地址:http://www.cnblogs.com/MuYunyun/p/5678405.html#3471461 阅读目录 Chrome调试工具介绍: 快速切换文件 在源代码中搜索 在源代码中快 ...

  2. Asp.NetCore程序发布到CentOs(含安装部署netcore)--最佳实践(二）

    Asp.NetCore程序发布到CentOs(含安装部署netcore)--最佳实践(一) 接上一篇 3. Nginx配置反向代理 3.1 cnetos 安装nginx 首先,我们需要在服务器上安装N ...

  3. winform中获取指定文件夹下的所有图片

    方法一: C#的IO自带了一个方法DirectoryInfo dir = new DirectoryInfo("文件夹名称");dir.getFiles();//这个方法返回值就是 ...

  4. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  5. Tomcat 参数配置相关

    Tomcat参数配置相关 by:授客 QQ:1033553122 目的: 对Tomcat配置的点滴学习总结,主要目的在于分析Tomcat与性能相关的一些参数设置,以便性能调优时选择最优配置   环境: ...

  6. 章节九、2-使用firefoxdriver浏览器进行自动化测试

    一.演示如何使用火狐浏览器打开“百度” package basicweb; import org.openqa.selenium.WebDriver; import org.openqa.seleni ...

  7. Django 事务操作

    如何在Django中进行事务操作 案例: 客户A要给客户B转一笔钱,这个在数据库中需要进行两步: 1.客户A减钱 2.客户B加钱 如果在第一步结束后,服务器出现异常,停下了,第二步没有进行,如果数据库 ...

  8. Dubbo开发，利用项目模拟提供者和消费者之间的调用--初学

    开发工具:IDEA,虚拟机 VMware Workstation 预备工作:安装好zookeeper的虚拟机,电脑jdk更换为1.7,本地tomcat启动,能够访问以下页面即可进行开发 2.建立以下s ...

  9. Java 图片爬虫，java打包jar文件

    目录 1. Java 图片爬虫,制作 .jar 文件 spider.java 制作 jar 文件 添加执行权限 1. Java 图片爬虫,制作 .jar 文件 spider.java spider.j ...

  10. c/c++ 多线程 层级锁

    多线程 层级锁 当要同时操作2个对象时,就需要同时锁定这2个对象,而不是先锁定一个,然后再锁定另一个.同时锁定多个对象的方法:std::lock(对象1.锁,对象2.锁...) 但是,有的时候,并不能 ...