图片放大-jQuery脚本使用异常：仅闪现图片外框_jquery 图片放大蓝屏异常-优快云博客

本文链接：https://blog.youkuaiyun.com/badyflf/article/details/8118244

本文详细介绍了使用JavaScript实现图片预览功能的技术细节，包括鼠标悬停触发图片加载、预览窗口自动定位及大小调整，并讨论了在不同浏览器下可能遇到的问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

脚本如下：
$(function(){
        $(".tooltip").mouseover(function(e){  
            var imagePath=$(this).attr("src"); 
            var $div=$("<div id='temp'><img src='imagePath' style='width:240px;height:320'></div>");
            $("#book_list").append($div);
            $div.css("position","absolute")
            $div.css("left",e.pageX)
            $div.css("top",e.pageY)
            $div.show();
        }).mouseout(function(){
            $("#temp").remove();
        });
    });

异常原因：

使用脚本拼串有问题，不应该将imagePath直接放在scr的单引号里，但火狐浏览器并没有错误异常，让我误解了在js中不能使用style样式，后来想想又不可能而矛盾。

var $div=$("<div id='temp'><img src='imagePath' style='width:240px;height:320'></div>");

解决：
方式一：
通过软件将图片放大，再将img链接指向放大的图片名

var $div=$("<div id='temp'><img src='"+imagePath.substring(0,imagePath.lastIndexOf("\."))+"_big.jpg"+"'/></div>");

方式二：
通过样式将图片放大，但注意拼串脚本的书写，变量imagePath不能直接放在src的引号里，要通过"+"符号来拼串，关于拼串在SQL使用过程也经常使用。
var $div=$("<div id='temp'><img src='"+imagePath+"' style='width:240px;height:320'></div>");