jQuery réalise l'effet de prévisualisation de la grande image lorsque la souris glisse dessus

Cet article présente principalement la méthode de jQuery pour obtenir l'effet de prévisualisation à grande échelle de la souris sur l'image, impliquant la réponse aux événements de la souris jQuery et le fonctionnement dynamique des attributs des éléments de page. Les amis qui en ont besoin peuvent s'y référer. j'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit la méthode jQuery pour obtenir l'effet d'un aperçu à grande échelle des images lorsque la souris est survolée. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Les exigences sont les suivantes : Sur l'image où la souris est déplacée, l'aperçu de la grande image sera affiché en même temps, et lorsque la souris est éloignée, elle sera masquée.

Le principe est en fait très simple. Tout d'abord, vous avez besoin d'un p, puis ajoutez dynamiquement la balise a1f02c36ba31691bcfe87b2722de723b via la méthode jQuery, changez le style (largeur, hauteur) du a1f02c36ba31691bcfe87b2722de723b, et le chemin de l'image qui doit être affichée.

Code js :

$(function(){
  var ei = $("#large");
  ei.hide();
  $("#img1, img").mousemove(function(e){
    ei.css({top:e.pageY,left:e.pageX}).html(&#39;<img style="border:1px solid gray;" src="&#39; + this.src + &#39;" />&#39;).show();
  }).mouseout( function(){
    ei.hide();
  })
  $("#f1").change(function(){
    $("#img1").attr("src","file:///"+$("#f1").val());
  })
});

Partie HTML :

上传预览图片:<br>
<input id="f1" name="f1" type="file" /><br>
<img id="img1" width="120" height="60" src="logo-jq.gif">
<p id="large"></p>
鼠标滑过预览图片:<br>
<img width="120" height="60" src="logo-jq.gif"><br>

Recommandations associées :

La fonction d'image d'aperçu JavaScript permet un téléchargement sans actualisation

Un moyen simple en PHP d'obtenir une image d'aperçu vidéo

JS permet le commerce électronique Effet d'agrandissement tactile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!