jQuery万能放大镜插件（普通矩形放大镜）
插件链接：http://files.cnblogs.com/files/whosMeya/magnifier.js
1.在jquery下插入。
2.格式：magnifier("需要插入的位置"，主图宽,主图高,"主图路径",遮罩层宽,遮罩层高,放大框宽)
例如：magnifier(".box",400,400,"1.jpg",200,200,400)
说明：1.需要插入的位置 格式为 jQuery中格式。如".box","#box","#box div"
2.宽高单位为px。（如需其他单位，在源码中修改）。
插件源码
/**
*放大镜
*/
function magnifier(fatherName,MainWidth,MainHeight,img_src,SelectWidth,SelectHeight,BigBoxWidth){
var bei = (BigBoxWidth/SelectWidth);
/**
* 创建主图盒子，添加主图
*/
$(fatherName).html("<div class='magnifierMainBox'></div><div class='magnifierBigBox'></div>")
$(".magnifierMainBox").css({
"position":"relative",
"width":MainWidth + "px",
"height":MainHeight + "px",
"border":"1px solid #eee",
"box-size":"border-box"
}).html("<img class='magnifierMainImg' src='"+img_src +"'/><div class='magnifierSelect'></div>");
$(".magnifierMainImg").css({
"width":"100%",
"height":"100%"
})
/**
* 创建主图遮罩层
*/
$(".magnifierSelect").css({
"display":"none",
"position":"absolute",
"width":SelectWidth + "px",
"height":SelectHeight + "px",
"background":"rgba(252,197,5,0.3)",
"cursor":"move"
});
/**
* 创建放大图盒子，放大图
*/
$(".magnifierBigBox").css({
"display":"none",
"background":"url("+img_src+")",
"width":BigBoxWidth + "px",
"height":BigBoxWidth*SelectHeight/SelectWidth + "px",
"border":"1px solid #eee",
"overflow":"hidden",
"position":"relative",
"left":MainWidth+"px",
"top":-MainHeight-2+"px",
"box-size":"border-box",
"z-index":"99",
"background-size":MainWidth*bei+"px "+MainHeight*bei+"px"
})
/**
* 移动
*/
$(".magnifierMainBox").mouseenter(function(){
$(".magnifierSelect").show();
$(".magnifierBigBox").show();
}).mousemove(function(e){
var e=e || window.event;
var _left = e.clientX + $("body").scrollLeft() - $(".magnifierMainBox").offset().left - SelectWidth/2;
var _top = e.clientY + $("body").scrollTop() - $(".magnifierMainBox").offset().top - SelectHeight/2;
if(_left<0){
_left=0;
}
if(_left>MainWidth-SelectWidth){
_left=MainWidth-SelectWidth;
} if(_top<0){
_top=0;
}
if(_top>MainHeight-SelectHeight){
_top=MainHeight-SelectHeight;
}
$(".magnifierSelect").css({
"left":_left + "px",
"top":_top + "px"
})
$(".magnifierBigBox").css({
"background-position":(-_left*bei)+"px "+(-_top*bei)+"px"
})
}).mouseleave(function(){
$(".magnifierSelect").hide();
$(".magnifierBigBox").hide();
})
}
demo1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
height:400px;
width:400px;
margin-top:50px;
margin-left:100px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="magnifier.js"></script>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
magnifier(".box",400,400,"1.jpg",200,200,400)
</script>
</html>
效果如下：
若需要点击切换，在需要用到的位置直接调用。
如demo2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="magnifier.js"></script>
<style type="text/css">
.box{
margin-left:100px;
margin-top:50px;
width:400px;
height:800px;
border:1px solid #444;
}
.boxtop{
height:400px;
width:100%;
}
.boxbottom img{
height:50px;
width:50px;
margin-left:20px;
}
</style>
<script type="text/javascript">
$(function(){
var kkk ="";
$(".box").html("<div class='boxtop'></div><div class='boxbottom'></div>")
for(var i=0;i<5;i++){
kkk += "<img src='"+(i+1)+".jpg'/>"
}
magnifier(".boxtop",400,400,"1.jpg",200,200,500) //调用
$(".boxbottom").html(kkk);
$(".boxbottom").children().click(function(){
magnifier(".boxtop",400,400,$(this).index()+1+".jpg",200,200,500)//调用
})
})
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果如下：
jQuery万能放大镜插件（普通矩形放大镜）的更多相关文章
- jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
- jquery放大镜插件与样式
这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...
- jQuery放大镜插件
(function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...
- Jquery放大镜插件---imgzoom.js(原创)
Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...
- jquery cloudzoom 3.0,magiczoom 放大镜插件 破解 移除版权信息
jquery Cloud Zoom一款放大镜插件.但是无奈 官方下载的始终有版权信息,因此想到如下方法去掉版权信息,测试可行! 官方网址:http://www.starplugins.com/clou ...
- 非常强大的jQuery万能浮动框插件
支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...
- [vue插件]基于vue2.x的电商图片放大镜插件
最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue ...
- jquery的常用插件
jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件 放大镜: cloud-zoom(这个效果很炫) 图片查看: fancybox(灯箱) t ...
- 20 个具有惊艳效果的 jQuery 图像缩放插件
jQuery相对与Flash的魔力已经贯穿整个网络.尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边 ...
随机推荐
- 详解js面向对象编程
转自:http://segmentfault.com/a/1190000000713346 基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或 ...
- jenkins使用（1）
术语:构建一次job指的是执行一次任务 注:到了公司,如果需要搭建jenkins环境可以找运维 jenkins使用: 创建视图 常用的两个配置: 新建任务: 可以选择构建后的步骤: 然后保存 图标状态 ...
- byte的取值范围是-128~127,那么包含-128和127吗？
本帖最后由 王德升老师 于 2019-12-27 17:56 编辑 byte的取值范围为什么是-128~127?如果面试官问你取值范围包含127吗?1. 首先我们知道Java中byte类型是1个字节占 ...
- 使用 Git 删除本地仓库和远端仓库文件
使用 git bash 来删除 一.将文件(夹)添加到暂存区 这里假设本地和远端都有一个 test.txt 文件先在本地删除,通过 ·git status 查看通过git add test.txt 添 ...
- JavaScript值类型和引用类型有哪些
JavaScript值类型和引用类型有哪些 (1)值类型:数值.布尔值.null.undefined. (2)引用类型:对象.数组.函数.
- The Basic Of K8s
k8s 基础概念 1.一个k8s集群包括 一个Master节点(主节点) 一群Node节点(计算节点) 2.Master节点 包括API Server.Scheduler.Controller man ...
- Oracle中的列转行实现字段拼接用例
文章目录 Oracle中的列转行实现字段拼接 场景 在SQL使用过程中经常有这种需求:将某列字段拼接成in('XX','XX','XX','XX','XX','XX' ...)做为查询条件. 实现 s ...
- nexus7入手
平板一直关注了很久了,关键是不知道平板对我来说,拿它来做什么用.所以,一直也就是关注,也没有决心买了. 终于这次出手了,N7,到货了! 照片是原生的android系统,不习惯,不习惯,直接用刷机精灵, ...
- C++扬帆远航——15（项目二，太乐了）
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:tailezhanshi.cpp * 作者:常轩 * 微信公众号 ...
- Docker 运行容器 CentOS7 使用systemctl 启动报错 Failed to get D-Bus connection: Operation not permitted
原系统:Centos 7 Docker 版本:1.12.6 操作:安装并运行 Tomcat 问题:在创建好容器之后,并且进入系统运行启动tomcat [root@cd11558d3a22 /]# sy ...