communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > JS实现鼠标移动到缩略图显示大图的图片放大效果_图象特效

JS实现鼠标移动到缩略图显示大图的图片放大效果_图象特效

WBOY

Libérer： 2016-05-16 17:47:01

original

1021 Les gens l'ont consulté

一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>图片提示效果</title> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script> 
<style type="text/css"> 
body{margin:0 ;padding:40px;line-height:180%;} 
img{border:none;} 
ul,li{margin:0 ;padding:0;} 
li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;} 
/*tooltip*/ 
#tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;} 
</style> 
<script type="text/javascript"> 
$(function(){ 
var x = 10; 
var y = 20; 
$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title; 
this.title = ""; 
var imgTitle = this.myTitle?"
"+ this.myTitle : ""; 
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素 
document.write(tooltip); 
$("body").append(tooltip); //把它追加到文档中 
$("#tooltip").css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}).fadeIn(600); //设置x坐标和y坐标，并且显示 
}).mouseout(function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(); //移除 
}).mousemove(function(e){ 
$("#tooltip").css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}); 
}); 
}) 
</script> 
 
 
<h3>效果</h3> 
<ul> 
<li><a class="tooltip" title="苹果 iPod" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall1.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s1.jpg" alt="苹果 iPod"></a></li> 
<li><a class="tooltip" title="苹果 iPod nano" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall2.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s2.jpg" alt="苹果 iPod nano"></a></li> 
<li><a class="tooltip" title="苹果 iPone" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall3.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s3.jpg" alt="苹果 iPone"></a></li> 
<li><a class="tooltip" title="苹果 Mac" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall4.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s4.jpg" alt="苹果 Mac"></a></li> 
</ul>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Étiquettes associées：

鼠标经过

source：php.cn

Article précédent：解决js正则匹配换行问题实现代码_基础知识 Article suivant：如何用ajax来创建一个XMLHttpRequest对象_基础知识

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

Qu'est-ce qu'une NullPointerException et comment y remédier ?

2024-10-22 09:46:29
De novice à codeur : votre voyage commence par les principes fondamentaux du C

2024-10-13 13:53:41
Débloquer le développement Web avec PHP : guide du débutant

2024-10-12 12:15:51
Démystifier C : un chemin clair et simple pour les nouveaux programmeurs

2024-10-11 22:47:31
Libérez votre potentiel de codage : programmation C pour les débutants absolus

2024-10-11 19:36:51
Libérez votre programmeur intérieur : C pour les débutants absolus

2024-10-11 15:50:41
Automatisez votre vie avec C : scripts et outils pour les débutants

2024-10-11 15:07:41
PHP Made Easy : vos premiers pas dans le développement Web

2024-10-11 14:21:21
Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité

2024-10-11 12:59:11
La clé du codage : libérer la puissance de Python pour les débutants

2024-10-11 12:17:31

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