2017年04月26日,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧

jQuery实现鼠标在预览图像上的效果的方法。

更新时间：2017年4月26日10:11:42作者：jucrazy

本文主要介绍jQuery实现预览图像上的鼠标效果的方法，涉及jQuery鼠标事件响应和页面元素属性的动态操作。需要它的朋友可以参考以下内容

本文中的示例描述了jQuery如何实现用鼠标滚动预览图像的效果。与所有人共享以供参考，如下所示：

要求如下：将大型预览图像显示在移动鼠标的图片上，而将鼠标移开则隐藏图片。

原理实际上很简单。首先，您需要一个div，然后通过jQuery方法动态添加它

标记，更改此

的样式（宽度，高度）以及要显示的图像的路径。

js代码：

$(function(){
  var ei = $("#large");
  ei.hide();
  $("#img1, img").mousemove(function(e){
    ei.css({top:e.pageY,left:e.pageX}).html('').show();
  }).mouseout( function(){
    ei.hide();
  })
  $("#f1").change(function(){
    $("#img1").attr("src","file:///"+$("#f1").val());
  })
});

HTML部分：

上传预览图片:





鼠标滑过预览图片:

更多对jQuery相关内容感兴趣的读者可以查看此站点的主题：“ jQuery图片操作技巧”，“ jQuery表（表）操作技巧摘要”，“ jQuery切换特殊效果和技巧摘要”，“ jQuery扩展“技能摘要”，“ jQuery通用插件和用法摘要”，“ jQuery通用经典特殊效果摘要”和“ jquery选择器用法摘要”

我希望本文能对jQuery编程有所帮助。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-357620-1.html