jquery缩放图片_jQuery CSS缩放图像教程

最新推荐文章于 2023-04-16 00:03:12 发布

cuketao5066

最新推荐文章于 2023-04-16 00:03:12 发布

阅读量426

点赞数

文章标签：列表 jquery javascript html css ViewUI

原文链接：https://www.script-tutorials.com/jquery-css-tutorial-zooming-image/

版权

jquery缩放图片

Today I will tell you about another one useful tool of JQuery – Zoomimage plugin. It allow to reach different design ideas with images resizing. Features

今天，我将向您介绍JQuery的另一个有用工具-Zoomimage插件。通过调整图像大小，可以达到不同的设计思路。特征

Preloads images
预载图片
The images can by grouped in galleries
图像可以按画廊分组
Scales the image to fit the viewport
缩放图像以适合视口
Keyboard gallery navigation
键盘库导航

As example, we want to animate list of your members or your image gallery.

例如，我们要为您的成员列表或图库设置动画。

现场演示

HTML (The HTML)

Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.

这是所有5个样本的来源。如您所见-我们有简单的无序列表，它们都非常相同，只是具有不同的'id'属性。

<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example1"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example1"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example1"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example1"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example1"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>
<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example2"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example2"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example2"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example2"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example2"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>
<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example3"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example3"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example3"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example3"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example3"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>

<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example1"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example1"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example1"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example1"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example1"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>
<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example2"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example2"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example2"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example2"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example2"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>
<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example3"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example3"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example3"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example3"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example3"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>

附加CSS (Attaching CSS)

I attached 2 external CSS files

我附加了2个外部CSS文件

<link rel="stylesheet" media="screen" type="text/css" href="zoomimage.css" />
<link rel="stylesheet" media="screen" type="text/css" href="custom.css" />

<link rel="stylesheet" media="screen" type="text/css" href="zoomimage.css" />
<link rel="stylesheet" media="screen" type="text/css" href="custom.css" />

zoomimage.css, custom.css

zoomimage.css ， custom.css

添加jQuery (Adding JQuery)

I attached 3 external JS files

我附加了3个外部JS文件

<script type="text/javascript" src="eye.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="zoomimage.js"></script>

<script type="text/javascript" src="eye.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="zoomimage.js"></script>

And here are additional initialization code

这是其他初始化代码

<script type="text/javascript">
(function($){
	var initLayout = function() {
		// example 1
		$('a.example1').zoomimage();
		// example 2
		$('a.example2').zoomimage({
			border: 20,
			centered: true,
			hideSource: true
		});
		// example 3
		$('a.example3').zoomimage({
			controlsTrigger: 'mouseover',
			className: 'custom',
			shadow: 40,
			controls: false,
			opacity: 1,
			beforeZoomIn: function(boxID) {
				$('#' + boxID)
					.find('img')
					.css('opacity', 0)
					.animate(
						{'opacity':1},
						{ duration: 600, queue: false }
					);
			},
			beforeZoomOut: function(boxID) {
				$('#' + boxID)
					.find('img')
					.css('opacity', 1)
					.animate(
						{'opacity':0},
						{ duration: 600, queue: false }
					);
			}
		});
	};
	EYE.register(initLayout, 'init');
})(jQuery)
</script>

<script type="text/javascript">
(function($){
	var initLayout = function() {
		// example 1
		$('a.example1').zoomimage();
		// example 2
		$('a.example2').zoomimage({
			border: 20,
			centered: true,
			hideSource: true
		});
		// example 3
		$('a.example3').zoomimage({
			controlsTrigger: 'mouseover',
			className: 'custom',
			shadow: 40,
			controls: false,
			opacity: 1,
			beforeZoomIn: function(boxID) {
				$('#' + boxID)
					.find('img')
					.css('opacity', 0)
					.animate(
						{'opacity':1},
						{ duration: 600, queue: false }
					);
			},
			beforeZoomOut: function(boxID) {
				$('#' + boxID)
					.find('img')
					.css('opacity', 1)
					.animate(
						{'opacity':0},
						{ duration: 600, queue: false }
					);
			}
		});
	};
	EYE.register(initLayout, 'init');
})(jQuery)
</script>

步骤4.图像和光标 (Step 4. Images and cursors)

Also we need several images and cursors for these demos:

此外，这些演示还需要一些图像和光标：

zoomin.cur, zoomout.cur

zoomin.cur ， zoomout.cur

对于开发人员。定制化。 (For developers. Customization.)

Sure that it will useful too

确保它也会有用

调用代码 (Invocation code)

All you have to do is to select the elements in a jQuery way and call the plugin.

您要做的就是以jQuery方式选择元素并调用插件。

$('a.myLinks').zoomimage(options);

$('a.myLinks')。zoomimage(options);

选件 (Options)

A hash of parameters. All parameters are optional.

参数的哈希。所有参数都是可选的。

Opacity	float	The opacity for the caption and controls. Default: 0.3
border	integer	Image’s border. Default: 0
duration	integer	Animation duration. Default 300
easing	string	Animation easing. Default: linear
prevent	integer	Pixes to move the mouse before the images is dragged (prevents accidental dragging). Default: 14
controls	boolean	Whatever if the controls are displayed (if the image is not part of an library then the controls are not displayed). Default: true
caption	boolean	Whatever if the caption is displayed (the caption text is the text from ‘title’ atribute. Default: true
centered	boolean	Whatever if the image should be centered in the viewport or relative to the trigger. Default: false
hideSource	boolean	Whatever to hide source when the image is opened. Default: false
className	string	CSS class to apply to the image’s box. Default: false
controlsTrigger	string	‘focus’ to show caption and controls when the box is focused or ‘mouseover’ to show controls and caption on mouse over. Default: ‘focus’
preload	string	‘click’ to preload the image when the trigger is clicked or ‘load’ to preload the image on document load. Default: ‘click’
onLoad	function	Callback function triggered when the image was loaded
beforeZoomIn	function	Callback function triggered before the image is zoomed in
onZoomIn	function	Callback function triggered when the image is zooms in
beforeZoomOut	function	Callback function triggered before the image is zoomed out
onZoomOut	function	Callback function triggered when the image is zooms out
onFocus	function	Callback function triggered when the image is focused

不透明度	浮动	标题和控件的不透明度。默认值：0.3
边境	整数	图片的边框。默认值：0
持续时间	整数	动画持续时间。默认值300
缓和	串	动画轻松。默认值：线性
防止	整数	在拖动图像之前移动鼠标的像素(防止意外拖动)。默认值：14
控制项	布尔值	无论显示控件是什么(如果图像不是库的一部分，则控件都不会显示)。默认值：true
标题	布尔值	无论是否显示标题(标题文本是来自“标题”属性的文本。默认值：true
居中	布尔值	无论图像应居于视口中还是相对于触发器居中。默认值：false
hideSource	布尔值	打开图像时隐藏源的任何内容。默认值：false
班级名称	串	应用于图像框CSS类。默认值：false
ControlsTrigger	串	“焦点”显示标题和控件在框上的焦点，“鼠标悬停”显示控件和标题在鼠标悬停时。默认值：“焦点”
预载	串	单击触发器时，单击“单击”以预加载图像；在文档加载时，单击“加载”以预加载图像。默认值：“点击”
负载	功能	加载图像时触发回调函数
beforeZoomIn	功能	在放大图像之前触发回调函数
onZoomIn	功能	放大图像时触发回调函数
beforeZoomOut	功能	在缩小图像之前触发了回调功能
onZoomOut	功能	缩小图像时触发回调函数
焦点	功能	聚焦图像时触发回调函数

关闭所有图像并清除孤儿 (Close all images and clear orphans)

If you want to close all openend images or clear images without triggers (remvoed from DOM) then you can use ‘zoomimageClear’. The selection for this plugin should always be ‘div.zoomimage’.

如果要关闭所有开放式图像或清除图像而不使用触发器(从DOM删除)，则可以使用“ zoomimageClear”。该插件的选择应始终为“ div.zoomimage”。

$('div.zooimage').zoomimageClear();

$('div.zooimage')。zoomimageClear();

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

翻译自: https://www.script-tutorials.com/jquery-css-tutorial-zooming-image/

jquery缩放图片

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery缩放图片_jQuery CSS缩放图像教程

jquery缩放图片Today I will tell you about another one useful tool of JQuery – Zoomimage plugin. It allow to reach different design ideas with images resizing. Features 今天，我将向您介绍JQuery的另一个有用工具-Zoomimage插件...
复制链接

扫一扫