javascript - 网站页面的滑动面板-6ren

javascript - 网站页面的滑动面板

转载作者：行者123 更新时间：2023-11-28 09:38:37

25

4

感谢您查看我的问题，我会尽力解释我需要什么。

这是我的网站 http://hoveralls.design-way.ro/ - 我想让所有页面都像这里一样向下滑动 http://example.design-way.ro/ - 为了完成这项工作，我使用了 Hoveralls Jquery 插件，您可以在 Code canyon 上找到该插件。

嗯...我有两个问题:

首先也是最重要的是，我用于中间动画的 Parallax 插件可与 jQuery 1.2.6 配合使用，而 Hoveralls 则可与 1.7.1 配合使用。如果我更改 jQuery 版本，动画将停止工作并且悬停在 1.2.6 上不起作用
在我之前给出的示例中，您可以看到页面向下滑动，但我需要它们在另一个页面打开时关闭。

在我发帖之前，我搜索了答案，发现了这个 jsfiddle.net/fE8ks/26/ 。我认为如果我可以在单击 HOME 按钮时以某种方式关闭所有 div 并且默认状态将被隐藏，那么这将起作用。

问题:

有没有办法用普通的旧 JavaScript(没有 jQuery)来做到这一点？我需要控制高度，文字速度效果会很好。
由于这基本上是一个页面，我的网站加载速度会很慢吗？页面大多很简单，我只会在某些选项卡和图库中使用 JS。

我给hoveralls的开发者发了电子邮件寻求帮助，他给了我这个代码:

// 1. HTML
   a div with id "portfolio_slider"

// GIVE YOUR PORTFOLIO BUTTON AN ID
<a id="porfolio_button">Slide Open Portfolio</a>

// 2. CSS
#portfolio_slider {
     display:none;
     position:absolute;
     width:100%;
     height:auto; // may need to play with this 
     border-bottom:3px solid #CCC;
     top:0px;
     left:0px;
     z-index:99999;
}


// 3. JAVASCRIPT :) 
A. Make sure you load jQuery library
B. Place this after the jQuery library (at the end of the head tag on your index.html)

<script type="text/javascript">
     // WAIT UNTIL ALL IMAGES ARE LOADED (BETTER THAN DOCUMENT.READY)
    $(window).load({   


         // BINDS THE CLICK EVENT TO YOUR PORTFOLIO BUTTON
        $('#portfolio_button').bind('click',function(e){   

                 // GET THE CURRENT CSS TOP POSITION OF THE PANEL AS AN NUMBER
                 var SliderPos=parseInt( $('#portfolio_slider').css('top'),10);      

                // IF THE PANEL IS OPEN (DOWN)
               if ( SliderPos > 0 ){

                       // ANIMATE THE PORTFOLIO SLIDER PANEL DOWN USING THE CSS TOP PROPERTY
                       // NOTE: IF YOU HAVE JQUERY UI OR THE EASING PLUGIN, YOU CAN CHANGE SWING 
                       $('#portfolio_slider').animate({'top' : '0px'},{duration:500,queue:false,specialeasing:{ 'top' :  'swing' }});


              // IF THE PANEL IS CLOSED (UP)
               }else{

                       // ANIMATE THE PORTFOLIO SLIDER PANEL DOWN USING THE CSS TOP PROPERTY
                       // NOTE: THE TOP POSITION WILL BE EQUAL TO THE HEIGHT OF #PORTFOLIO SLIDER
                       $('#portfolio_slider').animate({'top' : '500px'},{duration:500,queue:false,specialeasing:{ 'top' :  'swing' }});
               };         


       // PREVENTS DEFAULT BEHAVIOR OF BROWSER NAVIGATING TO THE LINK
        e.preventDefault();  
        return false;
    });
});
</script>


// ALTERNATIVELY
jQuery makes this stuff easy. Instead of the JS section above, you can alternatively use the following (less control over the animation)
<script type="text/javascript">

     // WAIT UNTIL ALL IMAGES ARE LOADED (BETTER THAN DOCUMENT.READY)
    $(window).load({   
         // BINDS THE CLICK EVENT TO YOUR PORTFOLIO BUTTON
        $('#portfolio_button').bind('click',function(e){   
            // SLIDE TOGGLE THE DIV
             $('#portfolio_slider').slideToggle(500);           
       // PREVENTS DEFAULT BEHAVIOR OF BROWSER NAVIGATING TO THE LINK
        e.preventDefault();  
        return false;
    });
});
</script>

但它似乎不起作用。

感谢您的阅读!

最佳答案

试试这个，但一定要更改对 jquery.js 文件的引用以满足您的需求...也许使用 Google cdn:

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<style type="text/css">
    #portfolio_slider {
         display:none;
         position:absolute;
         width:100%;
         height:auto; // may need to play with this 
         border-bottom:3px solid #CCC;
         top:0px;
         left:0px;
         z-index:99999;
    }
</style>
</head>
<body>
<div id="portfolio_slider"></div>
<a id="portfolio_button">Slide Open Portfolio</a>
<script type="text/javascript">
    // WAIT UNTIL ALL IMAGES ARE LOADED (BETTER THAN DOCUMENT.READY)
    $(function(){   
        // BINDS THE CLICK EVENT TO YOUR PORTFOLIO BUTTON
        $('#portfolio_button').bind('click',function(e){   
            // SLIDE TOGGLE THE DIV
             $('#portfolio_slider').toggle('slideUp');           
            // PREVENTS DEFAULT BEHAVIOR OF BROWSER NAVIGATING TO THE LINK
            e.preventDefault();  
            return false;
        });
    });
</script>
</body>
</html>

关于javascript - 网站页面的滑动面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12671617/

25

4

0

文章推荐： string - 在 Swift 中转换字符串的瑞典语章程

文章推荐：向后打印字典结果

文章推荐： jquery - 显示和隐藏内容

android - 即使应用程序关闭(滑动/滑动)也会收到 GCM 通知
这是在我的 MainActivity 中用作 BroadcastReceiver 的代码 mRegistrationBroadcastReceiver = new BroadcastRecei
JQuery - 滑动
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
iphone - 滑动 UISearchBar
我想在大部分时间隐藏 UISearchBar，只在用户需要时调用它来显示。我在 Interface Builder 中放置了一个 UISearchBar 并将其隐藏在 View 后面，当用户单击按钮
cocoa - 滑动 CCMenu
我有一个包含 CCMenuItemImage 的菜单(“myMenu”)。我希望此菜单能够检测手指滑动并相应地滑动。我的问题是 CCMenuItemImage 似乎吸收了触摸事件。当用户触摸 CCM
javascript - 滑动/跟随导航菜单
我正在寻找一个简单的 jQuery 或 Javascript 解决方案，以使导航侧边栏在用户向下滚动页面时顺利跟随用户。像这里一样:http://ucon-acrobatics.com/shop/ 任
ListView 滑动/滑动动画
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
java Tokenizer 滑动
我想将 String 行标记化为标记(存储到 String 表中)，并且我只能使用 java.io.*它是为了实现一个计算器。例如:第一行:1+2+3第二行:1+ 2*3(标记之间有空格) 进入表{
ListView 滑动/滑动动画
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
jquery - 在两个导航栏中切换/滑动
我有一个导航栏，当单击菜单图标时，它将滑入“#secondary-nav”并隐藏“#primary-nav”。然而 jquery 似乎没有显示“#secondary-menu”。下面提供的是 HTMl
iOS 滑动 UITableView
这个问题已经有答案了: how to make a sliding up panel like the Google Maps app? (2 个回答) 已关闭 7 年前。我正在寻找类似的实现，如下
android - ViewPager 滑动
我有 ViewPager(Slide) 和 3 张图片。共有三个图像是通过 Internet 下载的。如果我将图片换到服务器上的另一台服务器上，链接保持不变，但应用程序中的图片没有改变，仍然是缓存中的
android - 在不抬起手指的情况下检测触摸的项目改变(滑动)
我在 gridview 中创建了两个按钮。我想达到以下目的，但不知道应该用什么方法？首先我触摸第一个按钮，将显示 toast 1 msg。通过将我的手指滑到第二个按钮而不抬起我的手指，将显示 to
jquery 滑动/计时问题
所以我设置了一个小的 jquery 动画，用户将鼠标悬停在容器上一段时间，这会导致容器 split ，然后显示内部信息。我不希望鼠标一进入容器就开始动画，所以我在动画上放了一个delay()。现在动
javascript - 如何将鼠标选择默认效果转换为在网站中滚动/滑动？
这个问题在这里已经有了答案: Simulate swipe with mouse in javascript (5 个答案) 关闭 7 年前。
python - 滑动 Sprite
我希望我的 Sprite 像在冰上一样滑动。因此，如果他在地面上，那么他可以正常行走，但当他接触冰时，他会滑动，直到有东西阻止他。有谁知道如何才能做到这一点？谢谢最佳答案像“Sprite Move
JavaScript 滑动、文本消失和居中修复
我的代码有几个问题:HTML: Bellevue
Android - 滑动 fragment
我正在尝试实现从 fragment1 过渡到 fragment2 的滑动动画。我正在使用 setCustomAnimations 方法。而且我知道我需要使用框架方法来替换 fragment 。我的代
Android 滑动 View ？
我不知道你们是否听说过 app chomp，但应用程序中有一个布局，如下图所示。我想知道他们是如何设置的，我将如何使用它来为我自己的应用程序制作类似的东西。有趣的是，当你滑动时，没有像水平 Scrol
ios - UICollectionView 滑动
我想检测用户何时在一个单元格占据整个屏幕宽度的 collectionView 中向左或向右滑动。是否可以不添加手势识别器。我试过添加手势识别器，但只有当我们将 collectionView 的 scr
mongodb - 滑动/匹配的后端如何在基于滑动的应用程序中工作？
我正在尝试开发一个应用程序来复制类似 tinder 的基于滑动的提要。该应用程序的想法与火种非常相似，也具有向右滑动和向左滑动匹配功能。到目前为止我做了什么-我在 MongoDB 中创建了一个刷卡集

首页

博学

6Ren·AI

商城

javascript - 网站页面的滑动面板