jQuery realizes the effect of previewing the large image when the mouse slides over it

This article mainly introduces jQuery's method of realizing the large-scale effect of mouse-over preview images, involving jQuery mouse event response and dynamic operation of page element attributes. Friends who need it can refer to it. I hope it can help everyone.

The example in this article describes how jQuery implements the effect of large-scale preview of pictures when the mouse slides over them. Share it with everyone for your reference, the details are as follows:

The requirements are as follows: When the mouse moves the picture, the preview of the large picture will be displayed at the same time, and when the mouse is moved away, it will be hidden.

The principle is actually very simple. First, you need a p, and then dynamically add the tag through the jQuery method, change the style (width, height) of the , and the path of the image that needs to be displayed.

js code:

$(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());
  })
});

HTML part:

上传预览图片:<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>

Related recommendations:

JavaScript preview image function realizes refresh-free upload

php simple way to obtain video preview image

JS realizes e-commerce touch enlargement effect

The above is the detailed content of jQuery realizes the effect of previewing the large image when the mouse slides over it. For more information, please follow other related articles on the PHP Chinese website!