封装jQuery插件的步骤
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;} #min{ height:350px; width:350px; border:1px solid #ccc; position:relative; top:20px; left:20px; cursor:move;}
#kuai{ height:175px; width:175px; background:#FC3; position:absolute; left:0; top:0; opacity:0.5; display:none;} #max{ width:400px; height:400px; border:1px solid #ccc; position:absolute; left:400px; top:20px; overflow:hidden; display:none}
#max img{ position:absolute;}
</style>
<script src="jquery1.9.1.js"></script>
<script>
$(function (){ $("#min").hover(function (){ $("#kuai").show();
$("#max").show(); },function (){
$("#kuai").hide();
$("#max").hide();
});
$("#min").mousemove(function (event){ var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;
var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2; var maxWidth=$("#min").width()-$("#kuai").width(); var maxHeight=$("#min").height()-$("#kuai").height();
if (disX<=0){
disX=0;
}
else if (disX>maxWidth){
disX=maxWidth;
}
if (disY<=0){
disY=0;
}
else if(disY>maxHeight){ disY=maxHeight;
} $("#kuai").css({
left:disX,
top:disY
});
var scaleL=disX/maxWidth;
var scaleT=disY/maxHeight;
$("#max img").css({
left:-scaleL*($("#max img").width()-$("#max").width()),
top:-scaleT*($("#max img").height()-$("#max").height())
});
});
});
</script>
</head>
<body>
<div id="min">
<img src="min.jpg"/>
<div id="kuai"></div>
</div>
<div id="max">
<img src="max.jpg"/>
</div>
</body>
</html>
var $fang=$('<div id="min">
<img src="max.jpg"/>
<div id="kuai"></div>
</div>
<div id="max">
<img src="max.jpg"/>
</div>');
var $fang=$('<div id="min">'+
'<img src="'+$(".oImg").attr("src")+'"/>'+
'<div id="kuai"></div>'+
'</div>'+
'<div id="max">'+
'<img src="'+$(".oImg").attr("src")+'"/>'+
'</div>');
$(".oImg").before($fang);
<script>
function fang(obj){
var $fang=$('<div id="min">'+
'<img src="'+obj.attr("src")+'"/>'+
'<div id="kuai"></div>'+
'</div>'+
'<div id="max">'+
'<img src="'+obj.attr("src")+'"/>'+
'</div>');
obj.before($fang);
obj.remove();
$("#min").hover(function (){
$("#kuai").show();
$("#max").show(); },function (){
$("#kuai").hide();
$("#max").hide();
});
$("#min").mousemove(function (event){ var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;
var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2; var maxWidth=$("#min").width()-$("#kuai").width(); var maxHeight=$("#min").height()-$("#kuai").height();
if (disX<=0){
disX=0;
}
else if (disX>maxWidth){
disX=maxWidth;
}
if (disY<=0){
disY=0;
}
else if(disY>maxHeight){ disY=maxHeight;
} $("#kuai").css({
left:disX,
top:disY
}); // 10/100
var scaleL=disX/maxWidth;
var scaleT=disY/maxHeight; $("#max img").css({
left:-scaleL*($("#max img").width()-$("#max").width()),
top:-scaleT*($("#max img").height()-$("#max").height())
});
});
}
$(function (){
fang($(".oImg"));
});
</script>
$.fn.extend({
fang:function(){
var $fang=$('<div id="min">'+
'<img src="'+obj.attr("src")+'"/>'+
'<div id="kuai"></div>'+
'</div>'+
'<div id="max">'+
'<img src="'+obj.attr("src")+'"/>'+
'</div>');
obj.before($fang);
obj.remove();
$("#min").hover(function (){ $("#kuai").show();
$("#max").show(); },function (){
$("#kuai").hide();
$("#max").hide();
});
$("#min").mousemove(function (event){ var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;
var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2; var maxWidth=$("#min").width()-$("#kuai").width(); var maxHeight=$("#min").height()-$("#kuai").height();
if (disX<=0){
disX=0;
}
else if (disX>maxWidth){
disX=maxWidth;
}
if (disY<=0){
disY=0;
}
else if(disY>maxHeight){ disY=maxHeight;
} $("#kuai").css({
left:disX,
top:disY
}); // 10/100
var scaleL=disX/maxWidth;
var scaleT=disY/maxHeight; $("#max img").css({
left:-scaleL*($("#max img").width()-$("#max").width()),
top:-scaleT*($("#max img").height()-$("#max").height())
});
});
}
})
*{ margin:; padding:;} #min{ height:350px; width:350px; border:1px solid #ccc; position:relative; top:20px; left:20px; cursor:move;}
#min img{
width: 350px;
height: 350px;
}
#kuai{ height:175px; width:175px; background:#FC3; position:absolute; left:; top:; opacity:0.5; display:none;} #max{ width:400px; height:400px; border:1px solid #ccc; position:absolute; left:400px; top:20px; overflow:hidden; display:none}
#max img{ position:absolute;}
$.fn.extend({
fang:function(){
var oSrc=$('<link rel="stylesheet" type="text/css" href="fang.css">')
$("head").eq(0).append(oSrc);
var $fang=$('<div id="min">'+
'<img src="'+$(this).attr("src")+'"/>'+
'<div id="kuai"></div>'+
'</div>'+
'<div id="max">'+
'<img src="'+$(this).attr("src")+'"/>'+
'</div>');
$(this).before($fang);
$(this).remove();
$("#min").hover(function (){ $("#kuai").show();
$("#max").show(); },function (){
$("#kuai").hide();
$("#max").hide();
});
$("#min").mousemove(function (event){ var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;
var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2; var maxWidth=$("#min").width()-$("#kuai").width(); var maxHeight=$("#min").height()-$("#kuai").height();
if (disX<=0){
disX=0;
}
else if (disX>maxWidth){
disX=maxWidth;
}
if (disY<=0){
disY=0;
}
else if(disY>maxHeight){ disY=maxHeight;
} $("#kuai").css({
left:disX,
top:disY
}); // 10/100
var scaleL=disX/maxWidth;
var scaleT=disY/maxHeight; $("#max img").css({
left:-scaleL*($("#max img").width()-$("#max").width()),
top:-scaleT*($("#max img").height()-$("#max").height())
});
});
}
})
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery1.9.1.js"></script>
<script type="text/javascript" src="fang.js"></script>
<script>
$(function (){
$(".oImg").fang();
});
</script>
</head>
<body>
<img src="max.jpg" class="oImg"/>
</body>
</html>
封装jQuery插件的步骤的更多相关文章
- jQuery插件编写步骤详解
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- 封装jquery插件
最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装, 明白了如何封装插件,才能更好修改插件:如何封装插件? 1.插件封装类型 ...
- 封装jQuery插件实现TAB切换
先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...
- angular封装jquery插件(组件)
http://www.phloxblog.in/jquery-plugin-angular-js-directive-clean-html-approach/#.VaCWL9yUemJ
- jquery插件封装
HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...
- 简易jQuery插件
之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...
- 什么?你还不会写JQuery 插件
前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...
- 写JQuery 插件 什么?你还不会写JQuery 插件
http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...
- 写jQuery插件
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
随机推荐
- PHP学习笔记七【函数】
<?php $a=13; function abc3($a) { unset($a);//[释放给定变量]表示不在abc3函数范围内,不在使用$a,后面需要全新定义 $a=45; } abc(3 ...
- Oracle 10G 使用UTL_SMTP发送中文电子邮件[Z]
CREATE OR REPLACE PROCEDURE SCOTT.HTML_EMAIL( P_TO IN VARCHAR2, --收件人地址 P_SUBJECT IN VARCHAR2, --邮件主 ...
- ios 文字图标
如何使用自定义字体 在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的.这里以KaushanScript-Regular为例: Step 1: 导入字体文件 ...
- NSArray 数组操作
/*---------------------------创建数组------------------------------*/ //NSArray *array = [[NSArray alloc ...
- C语言中命名空间的实现
foobar.h // inclusion guard #ifndef FOOBAR_H_ #define FOOBAR_H_ //// long names //int foobar_some_fu ...
- Citrix 服务器虚拟化之十一 Xenserver管理vApps
Citrix 服务器虚拟化之十一 Xenserver管理vApps vApps是把几个业务相关的虚拟机作为一个单一实体管理,把vApps中的虚拟机的称为Application.启动vApps时其中包 ...
- Azure上如何在Linux下挂载数据磁盘
[原文首次发表于51cto http://cloudapps.blog.51cto.com/3136598/1653672] 在Azure上创建了虚拟机之后,我们在一些情况下会需要添加更多的数据磁盘来 ...
- Oracle EBS-SQL (CST-3):检查零成本交易.sql
SELECT '零成本交易' 交易异常类型 ,msi.segment1 ...
- 从setTimeout到浏览器线程机制
看高性能javascipt 这本书时,看到这么一句话: Putting scripts at the top of the page in this way typically leads to a ...
- 【Leetcode】查找二叉树中任意结点的最近公共祖先(LCA问题)
寻找最近公共祖先,示例如下: 1 / \ 2 3 / \ / \ 4 5 6 7 / \ ...