javascript - 如何让 div 调整自身大小以在页面加载时显示图像-6ren

javascript - 如何让 div 调整自身大小以在页面加载时显示图像

转载作者：行者123 更新时间：2023-11-30 08:56:56

所以我的目标是制作一个图像幻灯片，底部有 3 个可点击的热点。我现在有了它的基本功能，但是我的内容 div 在它第一次循环遍历图像之前无法正确调整自己的大小。我需要在页面加载时立即正确调整所有内容的大小和位置。

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">     
        $(document).ready(function () {
            $("#image").attr("src", images[0]);         
        });     

        //Click tracking
        var badClicks = 0;
        var skipClicks = 0;
        var goodClicks = 0;

        //Counter to keep track of images
        var iCount = 0;
        var images = [];
        images[0] = "images/document.png";
        images[1] = "images/document2.png";
        images[2] = "images/document3.png";

        function nextImage(){
            iCount++;

            //If there are no more images in the array, go back to the first image
            if (images[iCount]==null) {
                iCount = 0;
            };

            //Change image source to new image
            $("#image").attr("src", images[iCount]);

            //Set content wrapper width & height to current image's width & height
            $("#content").css("width", $("#image").css("width"));
            $("#content").css("height", $("#image").css("height"));

            //Store content wrapper's new width and height into variables
            var h = parseInt($("#content").css("height"));
            var w = parseInt($("#content").css("width"));

            //Move hotspot-wrapper to the bottom of the new image
                //Height of content wrapper - height of hotspot wrapper = new top
            $("#hotspot-wrapper").css("top", h - parseInt($("#hotspot-wrapper").css("height")));


            console.log(images[iCount] + " h " + h + " w " + w);
        }

        //Do something with data for "bad" hotspot
        function bad(){
            badClicks++;
        }

        //Do something with data for "skip" hotspot
        function skip(){
            skipClicks++;
            nextImage();
        }

        //Do something with data for "good" hotspot
        function good(){
            goodClicks++;
        }

        //Show the collected data
        function displayResults(){
            $("#results").append("<br />Bad: " + badClicks 
            + " Skip: " + skipClicks 
            + " Good: " + goodClicks);
        }
    </script>
  </head>
  <body>
    <div id="content">      
        <img id="image" />
        <div id="hotspot-wrapper">
            <div id="hotspot-a" class="hotspot" onclick="bad();"></div>
            <div id="hotspot-b" class="hotspot" onclick="skip();"></div>
            <div id="hotspot-c" class="hotspot" onclick="good();"></div>
        </div>
    </div>
        <br />
        <div id="results" style="clear:both">
            <button onclick="displayResults();" style="text-align: center">Show results</button>
        </div>

如有任何帮助、提示或建议，我们将不胜感激!谢谢!

最佳答案

首先我更喜欢这种方式来初始化图像数组:

var images = [];
var image = new Image();
image.src = '/some/image/url.jpg';
/* while you doing this image already load in background - so its faster way*/
images.push(image);

您可以通过 jQuery 以这种方式显示此图像:

$('#parend_of_image_div').html(images[iCount]);

在您的 nextImage 函数中使用此代码:

var img = images[iCount];
$(img).load(function(){
    var width = $(this).width()
    var height = $(this).height();
    /* do other stuff */
});

关于javascript - 如何让 div 调整自身大小以在页面加载时显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12806340/

文章推荐： python-3.x - 理解成本函数的数学表达式

文章推荐： java - 更改与模式匹配的文件的 Checkstyle 规则的严重性

文章推荐： javascript - 检查字段中的字母和数字字符

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何让 div 调整自身大小以在页面加载时显示图像