当前位置: 代码迷 >> JavaScript >> BSCarousel错误上的elevateZoom
  详细解决方案

BSCarousel错误上的elevateZoom

热度:47   发布时间:2023-06-05 11:44:55.0

我已经开发了一个带有elev??ateZoom镜头的自举旋转木马。 问题在于,当鼠标离开图像时,镜头也不会消失,直到鼠标也离开镜头为止。 在的这不会发生(鼠标离开图像后镜头即消失)。

这是我的代码:

<div id="planos" class="carousel slide" style="border-top:1px solid #FCF3E8; top:-1px" data-interval="false">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox" ng-app="planos-module" ng-controller="planos-controller">
        <div ng-repeat="i in getNumber(number) track by $index" class="item" id="plano{{$index+1}}">
            <img ng-src="img/planos/{{$index+1}}.jpg" alt="Plano {{$index+1}}" data-zoom-image="img/planos/{{$index+1}}.jpg" />
        </div>
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control carousel-control-2" href="#planos" role="button" data-slide="prev">
        <span class="fa fa-angle-left fa-3x" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control carousel-control-2" href="#planos" role="button" data-slide="next">
        <span class="fa fa-angle-right fa-3x" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

和相关的javascript:

$(document).ready(function(){
    //some code
    $('#plano1').addClass('active');
    $('#planos .item img').each(function(){
        $(this).elevateZoom({
            zoomType   : "lens",
            lensShape : "round",
            lensSize    : 350
        });
    });
    //some more code
});

我究竟做错了什么?

非常感谢你

编辑: 。 我无法完全按照自己的网络进行复制,但是同样的问题仍在继续。 另外,我无法导入elevateZoom js文件,因此我只是将其内容复制粘贴到js小提琴中(如果您在JS部分中向下滚动,则可以看到我的代码)

编辑2:解决! 答案如下。

解决了!

如果其他任何人遇到相同的问题,这就是答案。

我只需要在我的elevateZoom初始化中添加containLensZoom: true选项。

$(document).ready(function(){
    //some code
    $('#plano1').addClass('active');
    $('#planos .item img').each(function(){
        $(this).elevateZoom({
            zoomType   : "lens",
            lensShape : "round",
            lensSize    : 350,
            containLensZoom : true
        });
    });
    //some more code
});
  相关解决方案