指jQuery的animate()方法。有关通用图形动画,请参阅动画标记。
我在这个论坛的其他地方找到了这段代码,想知道如何使用导航栏获得相同的效果。 所以我会有 7 个文本链接,当你将鼠标悬停在其中一个上时,图像...
我已经接手维护一个网站的任务。不幸的是,之前的维护者安装了很多 WordPress 插件,所以我很难弄清楚哪个插件实际用于...
我试图在向下滚动时慢慢隐藏横幅(在固定元素内),然后当用户滚动回页面顶部时,将横幅带回来。我正在使用 jQuery。 我试过使用: 一个...
为此 JQuery animate(scrollLeft) 函数获取等效的原生 JavaScript?
我正在为本机(香草)JavaScript 寻找以下 jQuery animate() 函数: $(文档).ready(函数(){ $('#btn-菜单-导航-</desc> <question vote="0"> <p>我正在为本机(香草)JavaScript 寻找以下 jQuery <pre><code>animate()</code></pre> 函数:</p> <pre><code><script type="text/javascript"> $(document).ready( function() { $('#btn-menu-nav-previous').click(function() { $(".menu-inner-box").animate({scrollLeft: "-=100px"}); }); $('#btn-menu-nav-next').click(function() { $(".menu-inner-box").animate({scrollLeft: "+=100px"}); }); }); </script> </code></pre> <p>此代码通常允许在单击 <strong>next</strong> 和 <strong>previous</strong> 时对菜单列表进行分页。</p> <p>但是我在不使用 JQuery 的情况下在纯 JS 中搜索它的等价物。</p> <p>这是我所做的:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener("DOMContentLoaded", function() { var menu = document.querySelector(".menu-inner-box"); var prev = document.getElementById("btn-menu-nav-previous"); var next = document.getElementById("btn-menu-nav-next"); prev.addEventListener("click", function() { menu.animate([{ scrollLeft: menu.scrollLeft }, { scrollLeft: menu.scrollLeft - 100 }], { duration: 500, fill: "forwards" }); }); next.addEventListener("click", function() { menu.animate([{ scrollLeft: menu.scrollLeft }, { scrollLeft: menu.scrollLeft + 100 }], { duration: 500, fill: "forwards" }); }); });</code></pre> <pre><code>nav#menu-container { background: #586e75; position: relative; width: 50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding: 0; margin: 0; list-style-type: none; display: block; text-align: center; } .menu-item { height: 100%; padding: 0px 25px; color: #fff; display: inline; margin: 0 auto; line-height: 57px; text-decoration: none; text-align: center; white-space: no-wrap; } .menu-item:hover { text-decoration: underline; } .last-item { margin-right: 50px; }</code></pre> <pre><code><nav id="menu-container" class="arrow"> <div id="btn-menu-nav-previous" style="fill: #FFF"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div id="btn-menu-nav-next"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div class="menu-inner-box"> <div class="menu"> <a class="menu-item" href="#">Menu 1</a> <a class="menu-item" href="#">Menu 2</a> <a class="menu-item" href="#">Menu 3</a> <a class="menu-item" href="#">Menu 4</a> <a class="menu-item" href="#">Menu 5</a> <a class="menu-item" href="#">Menu 6</a> <a class="menu-item" href="#">Menu 7</a> <a class="menu-item" href="#">Menu 8</a> <a class="menu-item" href="#">Menu 9</a> <a class="menu-item" href="#">Menu 10</a> <a class="menu-item last-item" href="#">Menu 11</a> </div> </div> </nav></code></pre> </div> </div> <p></p> <p>但是根本不管用</p> <p>任何人都可以给我任何帮助吗???</p> </question> <answer tick="false" vote="0"> <p>这是我所做的:</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Menu</title> <style> nav#menu-container { background:#586e75; position:relative; width:50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill:#FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill:#FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding:0; margin: 0; list-style-type: none; display:block; text-align: center; } .menu-item { height:100%; padding: 0px 25px; color:#fff; display:inline; margin:0 auto; line-height:57px; text-decoration:none; text-align:center; white-space:no-wrap; } .menu-item:hover { text-decoration:underline; } .last-item{ margin-right: 50px; } </style> </head> <body class="hold-transition sidebar-mini layout-fixed"> <nav id="menu-container" class="arrow"> <div id="btn-menu-nav-previous" style="fill: #FFF"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div id="btn-menu-nav-next"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div class="menu-inner-box"> <div class="menu"> <a class="menu-item" href="#">Menu 1</a> <a class="menu-item" href="#">Menu 2</a> <a class="menu-item" href="#">Menu 3</a> <a class="menu-item" href="#">Menu 4</a> <a class="menu-item" href="#">Menu 5</a> <a class="menu-item" href="#">Menu 6</a> <a class="menu-item" href="#">Menu 7</a> <a class="menu-item" href="#">Menu 8</a> <a class="menu-item" href="#">Menu 9</a> <a class="menu-item" href="#">Menu 10</a> <a class="menu-item last-item" href="#">Menu 11</a> </div> </div> </nav> <!-- EXAMPLE 1: --> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var menu = document.querySelector(".menu-inner-box"); var prev = document.getElementById("btn-menu-nav-previous"); var next = document.getElementById("btn-menu-nav-next"); prev.addEventListener("click", function() { menu.animate([{scrollLeft: menu.scrollLeft}, {scrollLeft: menu.scrollLeft - 100}], {duration: 500, fill: "forwards"}); }); next.addEventListener("click", function() { menu.animate([{scrollLeft: menu.scrollLeft}, {scrollLeft: menu.scrollLeft + 100}], {duration: 500, fill: "forwards"}); }); }); </script> </body> </html> </code></pre> <p>但是根本不管用</p> </answer> <answer tick="false" vote="0"> <p>一个简单的替代方法是使用本机<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy" rel="nofollow noreferrer"><pre><code>scrollBy()</code></pre></a>方法。</p> <p>我支持平滑滚动的<pre><code>behavior</code></pre>参数:</p> <pre><code>el.scrollBy({ top: 100, left: 100, behavior: 'smooth' }); </code></pre> <p>缺点:你不能改变过渡速度。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener("DOMContentLoaded", function() { var menu = document.querySelector(".menu-inner-box"); var prev = document.getElementById("btn-menu-nav-previous"); var next = document.getElementById("btn-menu-nav-next"); prev.addEventListener("click", function() { menu.scrollBy({ left: -100, behavior: 'smooth' }); }); next.addEventListener("click", function() { menu.scrollBy({ left: 100, behavior: 'smooth' }); }); });</code></pre> <pre><code>nav#menu-container { background: #586e75; position: relative; width: 50%; height: 56px; } #btn-menu-nav-previous { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; left: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } #btn-menu-nav-next { text-align: center; color: white; cursor: pointer; font-size: 24px; position: absolute; right: 0px; padding: 9px 12px; background: #8f9a9d; fill: #FFF; } .menu-inner-box { width: 100%; white-space: nowrap; margin: 0 auto; overflow: hidden; padding: 0px 54px; box-sizing: border-box; } .menu { padding: 0; margin: 0; list-style-type: none; display: block; text-align: center; } .menu-item { height: 100%; padding: 0px 25px; color: #fff; display: inline; margin: 0 auto; line-height: 57px; text-decoration: none; text-align: center; white-space: no-wrap; } .menu-item:hover { text-decoration: underline; } .last-item { margin-right: 50px; }</code></pre> <pre><code><nav id="menu-container" class="arrow"> <div id="btn-menu-nav-previous" style="fill: #FFF"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div id="btn-menu-nav-next"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div class="menu-inner-box"> <div class="menu"> <a class="menu-item" href="#">Menu 1</a> <a class="menu-item" href="#">Menu 2</a> <a class="menu-item" href="#">Menu 3</a> <a class="menu-item" href="#">Menu 4</a> <a class="menu-item" href="#">Menu 5</a> <a class="menu-item" href="#">Menu 6</a> <a class="menu-item" href="#">Menu 7</a> <a class="menu-item" href="#">Menu 8</a> <a class="menu-item" href="#">Menu 9</a> <a class="menu-item" href="#">Menu 10</a> <a class="menu-item last-item" href="#">Menu 11</a> </div> </div> </nav></code></pre> </div> </div> <p></p> </answer> </body></html>
我正在尝试学习如何制作这个人在他的网站上使用的效果。 我想从左向右移动图像,反之亦然。 我该怎么做? http://www.adhamdannaway.com/about
我的购物车图标在中间。但我如何重新设置位置。所以当我关闭模式时,我想让它再次处于中间位置。$("#addedToCartModal").on('hide.bs.modal', function () { $(...)
我已经用as3在adobe animate中编写了一个应用程序,并将其发布到我的手机(I Phone 6,操作系统:IOS 12.4.4)进行测试。我得到的黑色边框,在顶部和按钮的 ...
如果这是一个明显的问题,请原谅我。我在一个页面上使用一个我无法删除或更改的脚本。点击一个按钮,通过ajax请求将一些项目加载到页面上,然后......
我正在按照本教程使用SVG 属性为地球自转设置动画。它可以正常工作,但是当我将其应用于我自己的SVG时,我在维护地球地图时遇到了麻烦...
我正在尝试仅使用Java脚本/ Vue js在购物车中创建硬币收集动画。所以我决定用原始的Java脚本来做。所以最初我是在尝试看本教程的w3schools ...
以下是我在shopify主题中拥有的html结构的简化代码段:'''/ * ---搜索容器--- * / / * --- ---------- -...
i创建一个将元素移动1 px并使用setInterval heres在特定时间重复它的函数。代码:var Elementt = document.querySelector('。h'); var left = 0;变速= 100; var ...
在我的html页面中,我大约有五个按钮。这些按钮排列在单个DIV中,并且这些按钮位于页面底部。当我单击这些按钮之一时,页面将向上滚动。我...
我有一个滑块和一个旋转动画。因此,如下所示:speed = 2000 var rotation1 = anime({目标:'#ferris',rotate:'1turn',循环:false,缓动:'...
我的要求是在加载时显示一些英雄图像,然后在滚动时显示完整的图像。参考网站:https://karpov.paris/(类似英雄形象效果),我尝试探索...
如何使用带有jQuery动画的平滑页面滚动并同时更新URL?
我正在使用带有自定义动画的jQuery动画功能来触发网站上的平滑滚动。我在代码的末尾使用event.preventDefault()函数调用,并通过此选项将...
[好吧,我知道如何为div制作动画并循环播放动画和内容,但这确实让我感到不安,我想为div的动画设置为left:0;然后向右:0;并循环播放动画,它将不起作用...
[这段代码应该在单击#topbar时扩展#bottombar,并在#bottombar高度为200px时隐藏它,但是行为很奇怪。这是为什么?先感谢您。 ..
我正在尝试使我的随机报价生成器具有动画效果。我希望动画看起来像另一张卡片,在同一张卡片上翻转相同的样式,类似于一副纸牌。我不...
我正在尝试使我的随机报价生成器具有动画效果。我希望动画看起来像另一张卡片,在同一张卡片上翻转相同的样式,类似于一副纸牌。我不...