jquery鼠标悬停滚动div

时间:2015-06-13 17:32:33

标签: jquery html css

我正在尝试制作一个插件。 我的客户将有两个标志,两端有两个按钮,如果用户将鼠标悬停在左侧按钮上,则徽标将从右向左移动,如果悬停在右侧按钮上,徽标将从左向右移动(直到最后一个徽标)停止动画) 我可以通过下面的代码来做到这一点,但问题是,如果我再次悬停在按钮上,它会显示空白区域。 如果我们将鼠标悬停在显示空白区域的按钮上,则与之前的按钮相同的问题。

var kiu = $('#cont1').width();
    var screenwidth = $(window).width();
    var realwid = kiu - screenwidth;


        $(".Nextb").hover(function () {
            $('#contS').stop().animate({ 'margin-left': '-=' + realwid }, 4500); 
        }, function () {
            $('#contS').stop().animate();
        });



        $(".Prevb").hover(function () {
            $('#contS').stop().animate({ 'margin-left': '+=' + realwid }, 4500);
        }, function () {
            $('#contS').stop().animate();
        })

HTML

<div class="cont">

                    <div id="cont1" class=" wow fadeInUp" data-wow-delay="0.5s">
                    <div class="NPrev">

                <span class="Prevb"><i class="fa fa-angle-left"></i></span>
                <span class="Nextb"><i class="fa fa-angle-right"></i></span>
                </div>
                        <div class="kk">
                            <div class="ki kk1">
                            </div>
                            <div class="ki kk2">
                            </div>
                        </div>
                        <div id="contS" class="Img_cl1">
                            <div class="col-md-12 fdfll  scroll-left">
                                <a target="_blank" href="http://www.meraevents.com/">
                                    <div class=" cl1 hde ">
                                        <img alt="client" src="img/clients/1.png" />
                                    </div>
                                </a><a target="_blank" href="http://www.appvirality.com/">
                                    <div class=" cl2 hde">
                                        <img alt="client" src="img/clients/2.png" />
                                    </div>
                                </a>
                                <style>

                                </style>
                                <a target="_blank" href="http://www.customfurnish.com/">
                                    <div class=" cl3 hde ">
                                        <img style="max-width: 120px !important; margin-top: 20px;" alt="client" src="img/clients/3.png" />
                                    </div>
                                </a><a target="_blank" href="http://www.medplusmart.com/home.mart">
                                    <div class="  cl4 hde ">
                                        <img alt="client" src="img/clients/4.png" />
                                    </div>
                                </a><a target="_blank" href="http://www.ishyd.org/">
                                    <div class=" cl5 hde ">
                                        <img alt="client" src="img/clients/5.png" />
                                    </div>
                                </a><a target="_blank" href="http://www.stileeye.com/">
                                    <div class=" cl6 hde ">
                                        <img alt="client" src="img/clients/6.png" />
                                    </div>
                                </a><a target="_blank" href="http://vuego.tv/index.html">
                                    <div class=" cl7 hde ">
                                        <img alt="client" src="img/clients/7.png" />
                                    </div>
                                </a><a target="_blank" href="http://www.veooz.com/">
                                    <div class=" cl8 hde ">
                                        <img alt="client" src="img/clients/8.png" />
                                    </div>
                                </a><a target="_blank" href="http://www.zapevent.com/">
                                    <div class=" cl9 hde ">
                                        <img alt="client" src="img/clients/9.png" />
                                    </div>
                                </a><a target="_blank" href="https://www.doctrz.com/">
                                    <div class=" cl10 hde ">
                                        <img alt="client" src="img/clients/10.png" />
                                    </div>
                                </a><a target="_blank" href="http://reveye.in/">
                                    <div class=" cl11 hde ">
                                        <img style="margin-top: 0px !important;" alt="client" src="img/clients/11.png" />
                                    </div>
                                </a><a target="_blank" href="http://www.leonia.in/">
                                    <div class=" hde cl12 ">
                                        <img style="margin-top: 0px !important;" alt="client" src="img/clients/12.png" />
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

我附有输出图片请帮帮我。 enter image description here

0 个答案:

没有答案