logo标签列表

如何使用JQuery制作一个弹出窗口，显示动态图片的放大版本？

javascriptjqueryhtml
4

我需要显示一个气泡框，其中包含通过文件输入 #insert-image 添加的动态图像的放大版本，但我不确定如何实现这一点，因为图像是动态的，并且图像的url根据使用文件输入所选内容而改变。下面的代码基本上只是将所选图像添加到表格单元格中。

var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, 'images/');
$('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image' class='image'>");
2个回答
2
我通过添加一些属性data-toggle='popover'" + "data-img=" + imagePrep + ">"并使用我的变量imagePrep，成功地让它工作了。我还必须在我的图像中添加mouseover函数，并在该函数中使用popover函数来添加弹出框（提示：如果出现弹出框函数不存在的错误，请确保在您的HTML文件中有Bootstrap脚本，您可以在Bootstrap网站上找到这些脚本）。以下是解决我的问题的解决方案：
$('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image' class='image' data-toggle='popover'" + "data-img=" + imagePrep + ">").on('mouseover', function() {
      $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        html: true,
        content: function() {
          return '<img class="img-fluid" src="' + $(this).data('img') + '" />';
        },
        title: 'Enlarged Image'
      });
    });

希望这能有所帮助。
1

只需复制带注释的网址并粘贴到文本框中，即可创建动态图像。您还可以使用jQuery和Javascript属性。以下是示例：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head><!--from   ww  w  . ja  v  a2  s.c o  m-->
<body>
 <div>
 <input type="text" id="insert-image" />
 <input type="button" id="insert" value = "insert" /> 
 </div>

  <div id="imgwrapper"></div>

  <script>
$(document).ready(function()
{
$("#insert").on("click",function(){
 
    img = document.createElement("img"); 
    
   // img.src = "http://www.java2s.com/style/download.png"; 
    img.src = $('#insert-image').val();
    img.mouseover = function(e){alert(e);}  
    $('#imgwrapper').append(img); 
      $("#imgwrapper").on("mouseover",function(){
 alert("TEST");
 }); 
    });
});
    </script>
</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接