0

我有一个隐藏的 div，直到单击链接然后它切换到视图中。我的代码运行良好，直到我实现了一段较大的 javascript 来实现一个滑块，该滑块可以在隐藏的 div 内通过鼠标移动来回轻松。我的问题是如何有效地结合这两个代码（旧的和新的）。现在，如果没有隐藏 div，我只能让一切正常工作。

$("#media").click(function () {
     $("#mediadetails").toggle(2000, function() {
});
$("#mediaclose").click(function() {
     $("#mediadetails").toggle(2000);
})

用于滑块的 javascript

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$mediadetails = $("#mediadetails");
$thumbScroller = $("#thumbScroller");
$thumbScroller_container = $("#thumbScroller .container");
$thumbScroller_content = $("#thumbScroller .content");
$thumbScroller_thumb = $("#thumbScroller .thumb");

$(window).load(function() {

    sliderLeft = $thumbScroller_container.position().left;
    padding = $mediadetails.css("paddingRight").replace("px", "");
    sliderWidth = $(window).width() - padding;
    $thumbScroller.css("width", sliderWidth);
    var totalContent = 0;

    //get content width
    $thumbScroller_content.each(function() {
        var $this = $(this);
        totalContent += $this.innerWidth();
        $thumbScroller_container.css("width", totalContent);
    });

    //content scrolling
    $thumbScroller.mousemove(function(e) {
        if ($thumbScroller_container.width() > sliderWidth) {
            var mouseCoords = (e.pageX - this.offsetLeft);
            var mousePercentX = mouseCoords / sliderWidth;
            var destX = -(((totalContent - (sliderWidth)) - sliderWidth) * (mousePercentX));
            var thePosA = mouseCoords - destX;
            var thePosB = destX - mouseCoords;
            var animSpeed = 900; //ease amount
            var easeType = "easeOutCirc";
            if (mouseCoords > destX) {
                //$thumbScroller_container.css("left",-thePosA);
                //without easing
                $thumbScroller_container.stop().animate({
                    left: -thePosA
                }, animSpeed, easeType);

                //with easing
            } else if (mouseCoords < destX) {
                //$thumbScroller_container.css("left",thePosB); //without easing
                $thumbScroller_container.stop().animate({
                    left: thePosB
                }, animSpeed, easeType);

                //with easing
            } else {
                $thumbScroller_container.stop();
            }
        }
    });

    //thumbnails mouse over/out & initial state
    var fadeSpeed = 200;

    $thumbScroller_thumb.each(function() {
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 0.4);
    });

    $thumbScroller_thumb.hover(

    function() { //mouse over
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 1);
    }, function() { //mouse out
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 0.4);
    });
});

//browser resize
$(window).resize(function() {
    //$thumbScroller_container.css("left",sliderLeft); //without easing
    $thumbScroller_container.stop().animate({
        left: sliderLeft
    }, 400, "easeOutCirc"); //with easing
    var newWidth = $(window).width() - padding;
    $thumbScroller.css("width", newWidth);
    sliderWidth = newWidth;
});
    </script>
4

1 回答 1

0

据我所知，JavaScript 不适用于隐藏内容。这就是它适用于未隐藏内容的原因。所以我们需要在你的大脚本发生之前取消隐藏 div。

好的，试试这个，例如将较大的脚本更改$(window).load(function() {//your script});为任何函数function my_slider(){//your script}（这将在文档加载时禁用执行滑块）并在切换脚本中调用该函数，例如

$("#media").click(function () {
     $("#mediadetails").toggle(2000, function() {
my_slider();
});
$("#mediaclose").click(function() {
     $("#mediadetails").toggle(2000);
})

我们所做的只是调用您的滑块onload，一旦您单击隐藏的 div 以取消隐藏，我们就会执行它。

如果它对你有意义，试试这个

于 2012-09-19T03:02:33.607 回答