点击放大图片

在本文中,我们将点击鼠标选项放大。

如果我认为这是网站所有者最受欢迎的选项之一,我并没有错,并且有很多方法可以实现它。

对于那些完全不熟悉编程语言和网站结构的人来说,有十几个插件,但这不是我们的方式。

插件越少越好。

因此,我们拥有CMS图像下载程序上传的所有WordPress用户都熟悉的html图像代码。


<img src="https://starper55plys.ru/wp-content/uploads/2013/03/10.png"
title="" alt="" width="122" height="246" class="alignleft" />

在此标记中,我们将光标添加到带有加号的放大镜和onClik事件处理程序,其中包含将放大和缩小图像的函数的名称。


<img src="https://starper55plys.ru/wp-content/uploads/2013/03/10.png"
title="" alt="" width="122" height="246" class="alignleft"
style="cursor: zoom-in;" onclick="example(this)" />

HTML准备就绪,现在我们将编写一个脚本。


<script>
var t, a;
function example(e){
clearTimeout(t);
var w = e.width;
if (a) {
t = setInterval(function () {
if (w <= 450) clearTimeout(t); // Стили на уменьшение
e.style.cursor = 'zoom-in';
e.style.borderRadius = '1px';
e.style.boxShadow = '2px 2px 5px #fff'
e.width = w--;
}, 5);
}
else {
t = setInterval(function () {
if (w >= 650) clearTimeout(t);
// Стили на увеличение
e.style.cursor = 'zoom-out';
e.style.borderRadius = '5px';
e.style.boxShadow = '2px 2px 5px #888'
e.width = w++;
}, 5);
}
a = !a;
}
</script>

这是一个如此小的,朴实无华但非常有用的程序。

现在让我们看看如何在WordPress上实现它。

将async属性添加到脚本标记以进行异步加载,并在关闭&lt; / head&gt;之前将脚本粘贴到head.php文件中。

46

然后,如上所述,将光标和onclick事件添加到加载图像的代码中。

47

检查它是如何工作的。

166

此脚本的唯一缺点是它与图像的宽度相关联。

因此,它将适用于具有相同宽度的图像,即 变量w中的设置只能绑定到特定大小+ – 20px。

例如,对于宽度为200px的所有图片,您可以将设置绑定为增加到400px。

对于宽度不超过20-30px的图像,您必须更改设置或添加具有不同功能名称的其他脚本。

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在免费网站脚本分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注