Skip to content

Commit d278a19

Browse files
author
郑浩乐
committed
updated 添加图片聚焦Demo
1 parent 38a9447 commit d278a19

File tree

15 files changed

+224
-105
lines changed

15 files changed

+224
-105
lines changed

‎code/jquery.imagezoom.js‎

Lines changed: 93 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -2,104 +2,102 @@
22
图片缩放居中 v1.3
33
BY:le
44
*/
5-
define(function(require, exports, moudles) {
6-
(function($){
7-
$.fn.imagezoom = function(parameter,getApi) {
8-
parameter = parameter || {};
9-
var defaults = {
10-
width: null, //图片外层宽度
11-
height: null, //图片外层宽度
12-
resizeable: true, //窗口大小改变时是否重新调整图片位置
13-
effect:'out', //图片处理
14-
condition: 'img', //默认筛选条件
15-
hoverEvent:false, //鼠标悬浮时是否放大
16-
hoverRatio:1.2, //鼠标悬浮时放大比例
17-
duration:300 //鼠标悬浮时放大动画时长
18-
};
19-
var options = $.extend({}, defaults, parameter);
20-
var $window = $(window);
21-
return this.each(function(index) {
22-
var $this = $(this).css("overflow", "hidden");
23-
var _api = {};
24-
var _duration = options.duration;
25-
var _hoverRatio = options.hoverRatio;
26-
var _outer_width = parameter.width||$this.width();
27-
var _outer_height = parameter.height||$this.height();
28-
$this.find(options.condition).each(function() {
29-
var $img = $(this);
30-
$img.css('display','block').removeAttr('width').removeAttr('height');
31-
var _width = this.width;
32-
var _height =this.height;
33-
var _ratio = 1;
34-
if(this.complete&&_width){ //防止图片未加载时就开始计算
5+
(function($){
6+
$.fn.imagezoom = function(parameter,getApi) {
7+
parameter = parameter || {};
8+
var defaults = {
9+
width: null, //图片外层宽度
10+
height: null, //图片外层宽度
11+
resizeable: true, //窗口大小改变时是否重新调整图片位置
12+
effect:'out', //图片处理
13+
condition: 'img', //默认筛选条件
14+
hoverEvent:false, //鼠标悬浮时是否放大
15+
hoverRatio:1.2, //鼠标悬浮时放大比例
16+
duration:300 //鼠标悬浮时放大动画时长
17+
};
18+
var options = $.extend({}, defaults, parameter);
19+
var $window = $(window);
20+
return this.each(function(index) {
21+
var $this = $(this).css("overflow", "hidden");
22+
var _api = {};
23+
var _duration = options.duration;
24+
var _hoverRatio = options.hoverRatio;
25+
var _outer_width = parameter.width||$this.width();
26+
var _outer_height = parameter.height||$this.height();
27+
$this.find(options.condition).each(function() {
28+
var $img = $(this);
29+
$img.css('display','block').removeAttr('width').removeAttr('height');
30+
var _width = this.width;
31+
var _height =this.height;
32+
var _ratio = 1;
33+
if(this.complete&&_width){ //防止图片未加载时就开始计算
34+
getRatio();
35+
}else{
36+
this.onload = function(){
37+
_width = this.width;
38+
_height = this.height;
3539
getRatio();
36-
}else{
37-
this.onload = function(){
38-
_width = this.width;
39-
_height = this.height;
40-
getRatio();
41-
}
42-
}
43-
//私有方法
44-
function getRatio(){
45-
//数值计算
46-
if(options.effect=='out'){ //在不放大图片失真的情况下，最大面积地展示图片
47-
if(_width>_height){
48-
if(_height>_outer_height){
49-
_ratio = Math.max(_outer_width/_width,_outer_height/_height);
50-
}
51-
}else{
52-
if(_width>_outer_width){
53-
_ratio = Math.max(_outer_width/_width,_outer_height/_height);
54-
}
55-
}
56-
}else if(options.effect=='in'){ //在不放大图片失真的情况下，最大清晰度地展示完整图片
57-
if(_width>_height){
58-
if(_width>_outer_width){
59-
_ratio = Math.max(_outer_width/_width);
60-
}
61-
}else{
62-
if(_height>_outer_height){
63-
_ratio = Math.max(_outer_height/_height);
64-
}
65-
}
66-
}
67-
zoom(_ratio);
68-
};
69-
//缩放动画
70-
function zoom(ratio,isAnimate){ //ratio：放大比例，isAnamate：是否动画（默认不动画）
71-
var obj = {
72-
'width':Math.ceil(_width*ratio),
73-
'height':Math.ceil(_height*ratio),
74-
'margin-left':Math.ceil((_outer_width-_width*ratio)/2),
75-
'margin-top':Math.ceil((_outer_height-_height*ratio)/2)
76-
};
77-
if(isAnimate){
78-
$img.stop().animate(obj,_duration);
40+
}
41+
}
42+
//私有方法
43+
function getRatio(){
44+
//数值计算
45+
if(options.effect=='out'){ //在不放大图片失真的情况下，最大面积地展示图片
46+
if(_width>_height){
47+
if(_height>_outer_height){
48+
_ratio = Math.max(_outer_width/_width,_outer_height/_height);
49+
}
7950
}else{
80-
$img.css(obj);
81-
}
82-
};
83-
//事件绑定
84-
if(options.hoverEvent){
85-
$this.on({
86-
'mouseenter':function(){
87-
zoom(_ratio*_hoverRatio,true);
88-
},
89-
'mouseleave':function(){
90-
zoom(_ratio,true);
51+
if(_width>_outer_width){
52+
_ratio = Math.max(_outer_width/_width,_outer_height/_height);
9153
}
92-
});
54+
}
55+
}else if(options.effect=='in'){ //在不放大图片失真的情况下，最大清晰度地展示完整图片
56+
if(_width>_height){
57+
if(_width>_outer_width){
58+
_ratio = Math.max(_outer_width/_width);
59+
}
60+
}else{
61+
if(_height>_outer_height){
62+
_ratio = Math.max(_outer_height/_height);
63+
}
64+
}
9365
}
94-
if(options.resizeable){
95-
$window.resize(function(){
96-
_outer_width = parameter.width||$this.width();
97-
_outer_height = parameter.height||$this.height();
98-
getRatio();
99-
});
66+
zoom(_ratio);
67+
};
68+
//缩放动画
69+
function zoom(ratio,isAnimate){ //ratio：放大比例，isAnamate：是否动画（默认不动画）
70+
var obj = {
71+
'width':Math.ceil(_width*ratio),
72+
'height':Math.ceil(_height*ratio),
73+
'margin-left':Math.ceil((_outer_width-_width*ratio)/2),
74+
'margin-top':Math.ceil((_outer_height-_height*ratio)/2)
75+
};
76+
if(isAnimate){
77+
$img.stop().animate(obj,_duration);
78+
}else{
79+
$img.css(obj);
10080
}
101-
});
81+
};
82+
//事件绑定
83+
if(options.hoverEvent){
84+
$this.on({
85+
'mouseenter':function(){
86+
zoom(_ratio*_hoverRatio,true);
87+
},
88+
'mouseleave':function(){
89+
zoom(_ratio,true);
90+
}
91+
});
92+
}
93+
if(options.resizeable){
94+
$window.resize(function(){
95+
_outer_width = parameter.width||$this.width();
96+
_outer_height = parameter.height||$this.height();
97+
getRatio();
98+
});
99+
}
102100
});
103-
};
104-
})(jQuery);
105-
});
101+
});
102+
};
103+
})(jQuery);

‎jquery-accordion/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>accordion</title>
5+
<title>手风琴-accordion</title>
66
<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
77
<link rel="stylesheet" type="text/css" href="../public/common.css">
88
<style type="text/css">

‎jquery-countdown/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8"/>
5-
<title>countdown</title>
5+
<title>倒计时-countdown</title>
66
<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
77
<link rel="stylesheet" type="text/css" href="../public/common.css">
88
<style type="text/css">

‎jquery-dialog/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>dialog</title>
5+
<title>对话框-dialog</title>
66
<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
77
<link rel="stylesheet" type="text/css" href="../public/common.css">
88
<style type="text/css">

‎jquery-imagezoom/image/pic1.jpg‎

72.2 KB
Loading

‎jquery-imagezoom/image/pic2.jpg‎

67.3 KB
Loading

‎jquery-imagezoom/index.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>图片聚焦-imagezoom</title>
6+
<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
7+
<link rel="stylesheet" type="text/css" href="../public/common.css">
8+
<style type="text/css">
9+
.panel{
10+
margin-bottom: 20px;
11+
}
12+
.zoom{
13+
overflow: hidden;
14+
}
15+
.zoom li{
16+
float: left;
17+
width:300px;
18+
height: 300px;
19+
border:1px solid #ebebeb;
20+
margin-left: 20px;
21+
overflow: hidden;
22+
}
23+
</style>
24+
<script type="text/javascript" src="../public/jquery.min.js"></script>
25+
<script type="text/javascript" src="../code/jquery.imagezoom.js"></script>
26+
</head>
27+
<body>
28+
<div class="main">
29+
<div class="panel">
30+
<div class="zoom" id="zoom">
31+
<ul>
32+
<li>
33+
<img src="image/pic1.jpg">
34+
</li>
35+
<li>
36+
<img src="image/pic2.jpg">
37+
</li>
38+
</ul>
39+
</div>
40+
</div>
41+
<div class="code">
42+
<p>
43+
<pre>$('#zoom li').imagezoom({
44+
'hoverEvent':true
45+
});</pre>
46+
</p>
47+
</div>
48+
<script type="text/javascript">
49+
$('#zoom li').imagezoom({
50+
'hoverEvent':true
51+
});
52+
</script>
53+
<div class="example">
54+
<div class="call">
55+
<h1>调用方法：</h1>
56+
<p>$(selector).slider(options,callback(api));</p>
57+
</div>
58+
<h2> options参数</h2>
59+
<table>
60+
<thead>
61+
<tr>
62+
<th style="width:150">参数</th>
63+
<th style="width:80">默认值</th>
64+
<th>说明</th>
65+
</tr>
66+
</thead>
67+
<tbody>
68+
<tr>
69+
<td>width</td>
70+
<td>[计算]</td>
71+
<td>图片外层宽度</td>
72+
</tr>
73+
<tr>
74+
<td>height</td>
75+
<td>[计算]</td>
76+
<td>图片外层高度</td>
77+
</tr>
78+
<tr>
79+
<td>resizeable</td>
80+
<td>true</td>
81+
<td>窗口大小改变时是否重新调整图片位置</td>
82+
</tr>
83+
<tr>
84+
<td>effect</td>
85+
<td>'out'</td>
86+
<td>图片居中方式处理</td>
87+
</tr>
88+
<tr>
89+
<td>condition</td>
90+
<td>'img'</td>
91+
<td>默认筛选条件</td>
92+
</tr>
93+
<tr>
94+
<td>hoverEvent</td>
95+
<td>false</td>
96+
<td>鼠标悬浮时是否放大</td>
97+
</tr>
98+
<tr>
99+
<td>hoverRatio</td>
100+
<td>1.2</td>
101+
<td>鼠标悬浮时放大比例</td>
102+
</tr>
103+
<tr>
104+
<td>duration</td>
105+
<td>300</td>
106+
<td>鼠标悬浮时放大动画时长</td>
107+
</tr>
108+
</tbody>
109+
</table>
110+
</div>
111+
</div>
112+
</body>
113+
</html>

‎jquery-range/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>range</title>
5+
<title>滑动条-range</title>
66
<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
77
<link rel="stylesheet" type="text/css" href="../public/common.css">
88
<style type="text/css">

‎jquery-scrollbar/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>scrollbar</title>
5+
<title>滚动条-scrollbar</title>
66
<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
77
<link rel="stylesheet" type="text/css" href="../public/common.css">
88
<style type="text/css">

‎jquery-select/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>select</title>
5+
<title>下拉框-select</title>
66
<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
77
<link rel="stylesheet" type="text/css" href="../public/common.css">
88
<style type="text/css">

0 commit comments

Comments
 (0)