预览图像淡入

Preview image fadein

本文关键字：淡入 图像      更新时间：2023-09-26

我有一个表单，它使用此处找到的这个小脚本将当前上传的图像输出到访问者的浏览器本身。图像的输出太突兀。如何制作此脚本以将图像fadein到div #blah 中。

<script>
$(document).ready(function() { 
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image-one").change(function(){
        readURL(this);
    });
});
</script>

如果有帮助，这里是 html。提前谢谢。

<fieldset class="images">
    <label for="image" class="label">UPLOAD IMAGE :</label>
    <input type="file" name="image-one" id="image-one" tabindex="25" required=""/>
</fieldset>
<div class="inline-image-preivew">
    <img id="blah" src="#" width="300" align="center"/>
</div>

你应该先隐藏预览类。

.CSS 

.inline-image-preivew
{
  display:none;
}

然后在你的readeronload中，你可以使用.show/.toggle jquery命令。 

 reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                    $('.inline-image-preview')fadeIn( "slow", function() {
    // Animation complete
  });

您还可以决定其他选项：http://api.jquery.com/show/

我认为这就是你要找的。

您可以使用 CSS3 过渡或 jQuery 库使图像淡入淡出。

这是使用jQuery.fadeIn()的小提琴

http://jsfiddle.net/Q5KtC/1/

(在您的情况下，您将基于正在上传的图像而不是按钮点击(

// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#kitten" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

使用您的代码，这应该是这样的：

附加的 CSS

#blah 
{
    display : none;
}

JavaScript 代码

$(document).ready(function() { 
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .fadeIn("slow");
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image-one").change(function(){
        readURL(this);
    });
});

作为替代方案，这里有一篇关于 CSS 过渡不透明度的博客文章的链接：

http://bavotasan.com/2011/a-simple-fade-with-css3/

相关文章：