自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需要注意的时候设置要局部放大的图片以及外部容器的宽度必须一致,否则效果不正确
(function($){
var wlfimgzooms=[];
$.fn.wlfimgzoom=function(options){
if ($(this).length > 1) {
var instances = [];
$(this).each(function (i) {
instances[i] = new wlfimgzoom($(this), options);
wlfimgzooms.push(instances[i]);
});
return instances;
} else {
var instance = new wlfimgzoom($(this), options);
wlfimgzooms.push(instance);
return instance;
}
} var wlfimgzoom = function (select, options) {
this.op = {width:"300px",height:"300px",zooms:"90"};
$.extend(this.op, options);
this.obj = select;
this.zoom_m = this.obj.width();
this.zoom_w = this.obj.children("img").width();
this.zooms=this.op.zooms/2;
this.fd=$("<div class='fd'><div class='fd1'><img src='' /></div></div>");
this.xt=$("<div class='xt'><div class='xt1'><img src='' /></div></div>")
this.init();
};
wlfimgzoom.prototype = {
init: function () {
this.build();
this.bindEvents();
},
build: function () {
this.obj.css("position","relative");
var src=this.obj.children("img").attr("src");
this.fd.appendTo(this.obj).children().children("img").attr("src",src);
this.fd.css({"position":"absolute","top":"0","left":this.obj.width()+20,"width":this.op.width,"height":this.op.height,"overflow":"hidden","display":"none",});
this.xt.appendTo(this.obj).children().children("img").attr({"src":src,"width":this.obj.children("img").width(),"height":this.obj.children("img").height()});
this.xt.css({width:this.op.zooms+"px",height:this.op.zooms+"px","position":"absolute","overflow":"hidden","display":"none","border":"1px #444 solid","left":"0","top":"0"});
},
bindEvents: function () {
var self=this;
this.obj.hover(function(){self.xt.show();self.fd.show();
self.zoom_b=self.fd.children().children("img").width();},function(){self.xt.hide();self.fd.hide()})
this.obj.mousemove(function(e) {
var x = e.offsetX;//||e.originalEvent.x || e.originalEvent.layerX || 0;
var y = e.offsetY;//||e.originalEvent.y || e.originalEvent.layerY || 0;
movebigpic(x,y);
movediv(x,y);
});
function movebigpic(x, y)
{
var xx = 0;
var yy = 0;
if (x < self.zooms)
{
xx = 0;
}
else if (x > (self.zoom_m - self.zooms))
{
xx = self.zoom_w - self.zoom_b;
}
else
{
xx = (self.zooms - x) * (self.zoom_b - self.zoom_w) / (self.zoom_m - self.op.zooms);
} if (y < self.zooms)
{
yy = 0;
}
else if (y > (self.zoom_m - self.zooms))
{
yy = self.zoom_w - self.zoom_b;
}
else
{
console.clear();
console.log("self.zoom_w",self.zoom_w)
console.log("self.zoom_b",self.zoom_b)
yy = (self.zooms - y) * (self.zoom_b - self.zoom_w) / (self.zoom_m - self.op.zooms);
}
self.fd.children().css({"left":xx + "px","top":yy + "px","position":"absolute"}) } function movediv(x, y)
{
var xx = 0;
var yy = 0;
if (x < self.zooms)
{
xx = 0;
}
else if (x > (self.zoom_m - self.zooms))
{
xx = self.zoom_m - self.op.zooms;
}
else
{
xx = x - self.zooms;
}
if (y < self.zooms)
{
yy = 0;
}
else if (y > (self.zoom_m - self.zooms))
{
yy = self.zoom_m - self.op.zooms;
}
else
{
yy = y - self.zooms;
}
self.xt.css({"left":xx + "px","top":yy + "px","position":"absolute"})
movesmallpic(xx, yy);
} function movesmallpic(x, y)
{
var xx = 0 - x;
var yy = 0 - y; self.xt.children().css({"left":xx + "px","top":yy + "px","position":"absolute"}) }
}
}
})(jQuery)
上面是核心的插件代码
调用方法是
其中参数width,height表示局部放大的容器宽高,zooms表示鼠标放到图片上时小方块的宽高
$(function(){
$(".imgzoom").wlfimgzoom({width:"300px",height:"300px",zooms:"90"}); })
html代码
<div id="one" class="imgzoom">
<img class="small" src="data:images/1_b.jpg" />
</div>
<div id="two" class="imgzoom">
<img class="small" src="http://img.sootuu.com/vector/200801/097/655.jpg" />
</div>
主要样式表
.imgzoom{width:150px;}
.imgzoom img.small{width:150px;height:150px;}
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个的更多相关文章
- javascript - 简单实现一个图片延迟加载的jQuery插件
最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- 图片上传jQuery插件(兼容IE8)
图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg html <!DOCTYPE html> <ht ...
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- jQuery file upload里面的_create的调用和_initEventHandlers的调用
首先是jquery.ui.widget.js中_createWidget方法内部调用 this._create(); this._trigger( "create", null, ...
- SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...
- 一个很简单的jQuery插件实例教程(菜鸟级)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...
- Vue实现一个图片懒加载插件(转载)
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
随机推荐
- UESTC_邱老师玩游戏 2015 UESTC Training for Dynamic Programming<Problem G>
G - 邱老师玩游戏 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submi ...
- Unique Paths 解答
Question A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram be ...
- SVN trunk、branch、tag的用法
Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/,那么标准的svn布局是svn://proj/|+-trunk+-branches+-tag ...
- 中国三种3G网络频段
首先看中国三家运营商所发布的频率标准: 中国移动TD-SCDMA(TDD): • 核心频段:1880~1920MHz,2010~2025MHz • 补充频率:2300~2400MHz 中国联通WCDM ...
- php php打乱数组二维数组、多维数组
php中的shuffle函数只能打乱一维数组,有什么办法快速便捷的打乱多维数组?手册上提供了 <?php function shuffle_assoc($list) { if (!is ...
- sun.misc.BASE64Encoder找不到包,解决方法
右键项目->属性->java bulid path->jre System Library->access rules->resolution选择accessible,以 ...
- tomcat使用说明
tomcat使用说明 1.tomcat的目录结构及说明: 2.发布WEB应用 1).将应用目录达成war包.(将html.jsp.images.WEB-INF目录和当前目录下的所有后缀名为jsp. ...
- Sublime Text 添加到右键菜单 带菜单图标
1.打开 regedit 2.找到节点 HKEY_CLASSSES_ROOT -> * -> Shell 3.右键选择新建“ 项 ” 这个项的名字将作为右键菜单的菜单名称,我用的“ Sub ...
- Hadoop 安装(1) CENTOS 安装与配置
配置虚拟机,名字 Hadoop_Slave4,内存为1024MB,15GB. 进入安装centos. 配置Hostname: Slave4.Hadoop 配置网络,设置静态IP:192.168.1.2 ...
- oracle取分组的前N条数据
select * from(select animal,age,id, row_number()over(partition by animal order by age desc) row_num ...