Question

我有一个网页，用户可以按如下方式浏览页面：

<nav>
    <ul class="navigation">
        <li class="link bottom move" style="left:24em;"><a href="#iot"><span lang="tr">IOT NEDİR</span></a></li>
        <li class="link bottom move" style="left:12em;"><a href="#about"><span lang="tr">HAKKIMIZDA</span></a></li>
        <li class="link bottom move"><a href="#contact"><span lang="tr">İLETİŞİM</span></a></li>
        <li class="link bottom move" style="right:12em;"><a href="#solutions"><span lang="tr">ÇÖZÜMLERİMİZ</span></a></li>
        <li class="link bottom move" style="right:24em;"><a href="#products"><span lang="tr">ÜRÜNLERİMİZ</span></a></li>
    </ul>
</nav>

有一个用户可以放大IOTNEDİR页面的图像。问题是我想在用户导航到页面时初始化缩放功能。

以下是相关的HTML：

<section class="active" style="left: 0px; z-index: 2;" id="iot" data-direction="from-right">
        <div class="content">
            <a href="#" class="close"></a>
            <h1>
                <span lang="tr">IOT NEDİR</span>
            </h1>

            <div class="row text-center">
                <div class="col-md-8 col-md-offset-2">

                    <p class="iot-font" lang="tr">Nesnelerin İnternet'i (Internet of Things, kısaca IoT), fiziksel nesnelerin birbirleriyle veya daha büyük sistemlerle bağlantılı olduğu iletişim ağıdır. Nesnelerin tekil anahtar (unique identifier) ile işaretlenerek İnternet altyapısı üzerinden birlikte çalışabilmesi ve bu sayede küçük parçaların toplamından daha büyük değerler oluşturulması öngörülmüştür. Nesnelerin İnternet'i açısından, nesne kavramı oldukça geniş bir anlama sahiptir. Her türlü izleme cihazları, sensörler, biochipler veya erişim düzenekleri nesne olarak nitelendirilmektedir. Bir cihazın "akıllı" sayılabilmesi ve nesne olarak nitelendirilebilmesi için gerekli şartlar: Tekil bir isme sahip olması (unique id), bağlanılabilir olması ve bir sensörü olmasıdır. Bu sayede, akıllı nesne dünyanın herhangi bir yerinden erişilebilir ve kontrol edilebilir hale gelmektedir. Nesnelerin İnterneti uygulamaları, sensörlerin tek tek erişilebilir olmasından başka, pek çok sensörün verisinin birleştirilerek değer üretilmesi amacıyla da kullanılmaktadır. Fiziksel ortamlardan akarak gelen yüksek miktardaki sensör verilerinin (data), yapılan değerlendirmelerin ardından bilgi (information) olarak operatörlere veya ilgili kişilere iletilmesi ya da verinin sistemler yardımıyla işlenerek bir faaliyet icra edilmesi sağlanmaktadır. Bu açıdan bakıldığında Nesnelerin İnternetinin Büyük Veri kavramları ve uygulamaları ile iç içe olduğu görülmektedir. </p>
                    <img id="zoom" src="images/sw.png" data-zoom-image="images/sw_.jpg" height="253" width="450">


                </div>
            </div>

        </div>
    </section>

这是Jquery：

$(document).ready(function () {
            if ($("#iot").hasClass("active")) {
                alert('test');
                $('#zoom').ezPlus({
                    zoomType: 'inner',
                    cursor: 'crosshair'
                });
                $("#eng").click(function () {
                    $('#zoom').attr('src', 'images/libelium_smart_world.png');
                    $("#zoom").data('zoom-image', 'images/libelium_smart_world.jpg').ezPlus({
                        zoomType: "inner",
                        cursor: "crosshair",
                        responsive: "true"

                    });
                });
                $("#tr").click(function () {
                    $('#zoom').attr('src', 'images/sw.png');
                    $("#zoom").data('zoom-image', 'images/sw_.jpg').ezPlus({
                        zoomType: "inner",
                        cursor: "crosshair",
                        responsive: "true"

                    });
                });
            }
    });

但缩放功能不起作用！

这是缩放的js：

<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/src/jquery.ez-plus.js"></script>

我该如何解决这种情况？如果我没有检查活动类，则此缩放功能将开始显示在主页面上，这是无用的。

EdiT 1：网站主页的屏幕截图：

main page

应该进行缩放的导航页面的屏幕截图

navigated page

EdiT 2：添加img hover使缩放功能适用于Chrome和IE 11，但遗憾的是不适用于FF。单击语言选择按钮后，在FF上缩放工作！

 $(document).ready(function () {
        $("#iot").hover(function () {

            if ($("#iot").hasClass("active")) {

                $('#zoom').ezPlus({
                    zoomType: 'inner',
                    cursor: 'crosshair'
                });
                $("#eng").click(function () {
                    $('#zoom').attr('src', 'images/libelium_smart_world.png');
                    $("#zoom").data('zoom-image', 'images/libelium_smart_world.jpg').ezPlus({
                        zoomType: "inner",
                        cursor: "crosshair",
                        responsive: "true"

                    });
                });
                $("#tr").click(function () {
                    $('#zoom').attr('src', 'images/sw.png');
                    $("#zoom").data('zoom-image', 'images/sw_.jpg').ezPlus({
                        zoomType: "inner",
                        cursor: "crosshair",
                        responsive: "true"

                    });
                });
            }

        });
    });

这是语言选择标记：

 <div class="lang">
        <a href="#turkish" onclick="window.lang.change('tr'); return false;"><img src="images/turkey-icon.png" alt="Türkçe" id="tr"></a>
        <a href="#english" onclick="window.lang.change('en'); return false;"><img src="images/uk-icon.png" alt="English" id="eng"></a>

    </div>

编辑3：删除以下行可使缩放适用于所有浏览器！

if ($("#iot").hasClass("active"))

Answer 1

文档准备好后，您正在运行代码。

$(document).ready(function () {
    if ($("#iot").hasClass("active")) {
        ...
    }
});

点击其中一个链接不会导致页面导航事件，因此$(document).ready()中的代码不会再次运行。（您的链接实际上是锚点。）

尝试将其挂钩到li点击事件。

$(document).ready(function () {
    $('ul.navigation li.link').click(function(){
        if ($("#iot").hasClass("active")) {
            alert('test');
            $('#zoom').ezPlus({
                zoomType: 'inner',
                cursor: 'crosshair'
            });
        }
    });
});

这可能有效，也可能无效，具体取决于将active类添加到li的代码。如果它不起作用，请尝试：

    $(document).ready(function () {
    $('ul.navigation li.link').click(function(){
        setTimeout(function(){
            if ($("#iot").hasClass("active")) {
                alert('test');
                $('#zoom').ezPlus({
                    zoomType: 'inner',
                    cursor: 'crosshair'
                });
            }
        }, 100);
    });
});

Answer 2

这个jquery对我有用。

$(document).ready(function () {
        $("#iot").hover(function () {

            $('#zoom').ezPlus({
                    zoomType: 'inner',
                    cursor: 'crosshair'
                });
                $("#eng").click(function () {
                    $('#zoom').attr('src', 'images/libelium_smart_world.png');
                    $("#zoom").data('zoom-image', 'images/libelium_smart_world.jpg').ezPlus({
                        zoomType: "inner",
                        cursor: "crosshair",
                        responsive: "true"

                    });
                });
                $("#tr").click(function () {
                    $('#zoom').attr('src', 'images/sw.png');
                    $("#zoom").data('zoom-image', 'images/sw_.jpg').ezPlus({
                        zoomType: "inner",
                        cursor: "crosshair",
                        responsive: "true"

                    });
                });

        });
    });

Jquery hasClass不起作用？

2 个答案: