communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery

WBOY
Libérer： 2016-05-16 17:42:24
original
1002 Les gens l'ont consulté

这个插件的名字elevatezoom，网址为http://www.elevateweb.co.uk/image-zoom，在github上的项目首页为https://github.com/elevateweb/elevatezoom，建议去github下载，这个网速比较快。

实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性，其值为大图的地址，最后在javascript中选择该图片调用elevateZoom()就可以了。

下面给出一个例子(在github下载的代码中有这个例子)：

复制代码 代码如下:





jQuery elevateZoom Demo




Basic Zoom Example


jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery



see more examples online http://www.elevateweb.co.uk/image-zoom/examples
<script> <BR>$('#zoom_01').elevateZoom(); <BR></script>



实现的效果如下：
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery 
具体代码没有研究，只是知道怎么使用了，特在此分享一下。
Étiquettes associées：
鼠标经过
source：php.cn
Article précédent：js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)_javascript技巧 Article suivant：表单元素的submit()方法和onsubmit事件应用概述_基础知识
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Générez des valeurs par défaut et des variables CSS à l'aide de SCSS J'implémente le style du site Web. Pour des raisons de support hérité, je dois prendre en ...
Depuis 2024-04-06 17:46:54
0
1
355
Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...
Depuis 2024-04-06 17:12:23
0
1
336
Possibilité de stocker le code ASP Classic sous forme de chaîne dans la base de données MYSQL Est-il possible de stocker du code asp classic dans une base de données MySQL et de lui fa...
Depuis 2024-04-06 13:38:43
0
1
358
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal