如果您编写web应用程序，您几乎肯定会使用jQuery。要构建一个响应式网站或应用程序，jQuery会有很大的帮助。事实上，它可以将整个用户体验提升到一个新的水平。在这篇文章中，我写了我最喜欢的jQuery技巧和窍门来创建和增强响应式网站。
滚动到一个元素。
没完没了的滚动不是一件有趣的事情。这就是为什么要设置卷轴的作用，因为你的访客不需要10分钟就可以到达他们要找的信息。
让我们从自动滚动开始:下面的代码滚动到页面上的特定元素:
现在，让我们设置一个滚动，用户将通过单击一个链接来激活它:
检查窗口大小
CSS query允许您检测窗口大小，并根据视窗宽度对元素应用不同的CSS样式。
这也可以在jQuery中实现，如果不能达到单独使用CSS的效果，这是非常有用的。下面的示例演示如何检测视区宽度，然后将元素添加到列表中。
将导航菜单更改为下拉菜单。
当你的网站有很多菜单项时，在一个小屏幕上显示它们会非常棘手。因此，解决这个问题的一个简单方法是将导航转换为下拉菜单。
下面的代码:从nav获取项目，并将其附加到选择下拉列表中:
将高度/宽度动画设置为“自动”
如果你尝试过使用thing . ani***te({ " height ":" auto " })；在一个元素上，你已经注意到它不起作用。令人高兴的是，这个问题有一个快速有效的解决方案。
代码如下:
以及如何使用它:
延迟加载图像
延迟加载是一种强制页面只加载客户端屏幕上可见的图像的技术。事实证明它对提高你的网站加载速度非常有效，这对用户体验和搜索引擎优化非常重要。有许多jQuery插件致力于在您的网站上实现延迟加载。如果你用WordPress，我绝对推荐这个。
至于jQuery的lazyload插件，我在好几个网站上都用过这个，简单的叫Lazy Load。它的使用非常简单。第一步是将插件导入HTML页面:
现在HTML代码:默认情况下，Lazy Load假设可以在data-src属性中找到原始高分辨率图像的URL。您还可以在src属性中包含一个可选的低分辨率占位符。
现在是激活延迟加载的时候了。使用HTML通过工厂方法初始化插件。如果你不传递任何设置或图像元素，它将延迟加载lazyload类的所有图像。
确实有更多的选项可用，所以你只需要看看插件文档。
本文来自长街旧人投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/654316.html
微信扫一扫 
