如果不使用jquery，如何在用户滚动100px后显示div？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

、导航、元素等时使用 // paddingBottom: "100px", // //固定的元素，为jquery选择器；可用于顶部导航等 // fixedElements...如果设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容和，不要同时设置 menu: '...、导航、元素等时使用 // paddingBottom: "100px", // //固定的元素，为jquery选择器；可用于顶部导航等 // fixedElements...如果设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容和，不要同时设置 menu: '...；如果使用all，则样式和html等全部被销毁 // destroy(type); // //重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果 // reBuild()

13.5K3 0

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。...中间：滚动条距离页面顶部 960 ～ 1920px（包含 960，不包含 1920）的范围。底部：滚动条距离页面顶部大于等于 1920px 的范围。...#lift：设置侧边栏的样式，包括宽度、高度、背景颜色、固定位置、居中显示和使用 Flexbox 布局。 #lift a：设置侧边栏链接的样式，包括宽度、高度、居中显示和去除下划线。...页面显示顶部、中间和底部区域，以及右侧的侧边栏。 2. 点击链接：用户点击侧边栏上的链接，触发 onclick 事件，调用 toFunction 函数。...toFunction 函数将页面滚动到指定的高度。 3. 页面滚动：当用户滚动页面时，触发 $(window).scroll 事件。

1.5K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

学习jQuery这一篇就够了

目前超过 90% 的网站都使用了 jQuery 库，jQuery 的宗旨：写的更少，做得更多！.../libs/jquery/1.9.1/jquery.min.js"> # 1.5 jQuery 快速使用 jQuery 对象的任何方法后返回的还是当前 jQuery 对象。...注意：如果存在（不存在）就删除（添加）一个样式类需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...: none; } div class="box">div> $('.box').show(); # 3. toggle() 方法描述：如果隐藏就设置为显示，如果显示就设置为隐藏。

3.5K5 0

jQuery基础

jQuery冲突问题使用jQuery时， $ 是访问jQuery的标志，但是如果有其他方法与jQuery中的 $冲突时，可以释放$的使用权，还可以自定义一个符号来代替 $使用。...，释放之后就不能再使用$,改为使用jQuery jQuery.noConfict(); 2.自定义一个访问符号*/... jQuery的scrollTop方法 1.获取滚动定位 2.设置滚动定位示例如果使用trigger方法,会触发事件冒泡,也会触发默认行为 2.triggerHandler():如果使用triggerHandle方法,不会触发事件冒泡,也不会触发默认行为示例如果通过核心函数找到的元素不知一个，那么在添加事件的时候，jQuery 会遍历所有找到的元素，给所有找到的元素添加事件 */

2.2K2 0

前端面试实录CSS篇（最近一周）

加载差异：link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性：link 是 html 标签，没有兼容问题。...如何设置小于 12px 的字体？ • 使用 webkit 内核的: -webkit-text-size-adjust: none;。chrome 27 版本后不可用了。...不要使用 @import 前缀引用样式，会影响 css 加载速度 6. 避免选择器嵌套过深 7. 不滥用 web 字体 • 可维护性，健壮性 1. 抽离公共样式 2. 样式与内容分离 16....在 CSS2.1 中，伪元素都是使用单冒号来表示伪元素的，但在 CSS3 规范中，伪元素的语法被修改为使用双冒号 17. CSS 预处理器/后处理器是什么？为什么要使用他们？...• inherit: 规定从父元素继承 position 属性的 • sticky: 基于用户的滚动位置来定位 • 前面三者的定位方式如下： • relative：元素的定位永远是相对于元素自身位置的，

5991 0

三、jQuery属性操作

在浏览器中找到span这个DOM元素之后，展开看到的都是属性。在attributes属性中保持的所有内容都是属性节点。...如果设置的节点不存在，那么会新增该属性。使用 prop(), 其他的使用 attr() Javascript console.log...$('div').html('我是一个段落我是一个span') } image.png 如果不传入参数，则代表获取当前元素的 HTML 代码。...').css('width', '100px') $('div').css('height', '100px') $('div').css('background', 'red') 链式设置如果大于

4.3K2 0

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

，同时增加一些自己在使用中的一些技巧。...如果当你在使用类似 Google 或者 Sina 的常用 Javascript 库的加速服务的话，更推荐采用下面的这种 fallback 的写法，如果 CDN 的 JavaScript 代码没有加载成功...例： width:100px;height:100px;overflow:auto; 完成上述的操作之后，带有滚动条的内容块的滚动条，就变成这个插件的默认样式了。...官方的默认样式相对于白色的对比度不高，所以为了显示的明显一点，我加了一个深色的背景色。当然还有很多参数开扩展插件的功能，这些参数的使用方法过后再讲。...如果想使其重新可用，调用 update方法。disable 方法使用一个可选参数（默认 false）你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。

16.6K3 0

jQuery文档对象模型DOM的实际应用

在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性，对于之前的DOM是一颗岑天大树枝繁叶茂让我们遥不可及，那么jQuery的DOM树，就是一个简笔画的小树...() nextUntil() prev() prevAll() prevUntil() 过滤 eq() 养成一个习惯，如果该jQuery方法可以设置元素值，那么该方法一定可以获取元素值。...； scrollTop(value)设置垂直滚动条的值; scrollLeft()获取水平滚动条的值； scrollLeft(value)设置水平滚动条的值; 案例：楼梯。...> jQuery 节点操作一．创建节点为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是： 1.创建节点...DOM 不推荐使用，会崩溃 $('div').wrap(document.createElement('strong')); //临时的原生 DOM $('div').unwrap(); //移除一层包裹内容

2520 0

JavaWeb——JQuery之高级案例实战（打开网页自动弹出广告效果、抽奖效果实现）

1 打开网页自动弹出广告效果【需求】： 1）当页面加载完，3秒后自动显示广告； 2）广告显示5秒后，自动消失；【分析】： 1）使用定时器setTimeout (执行一次定时器) ； 2）其实JQuery...的显示和隐藏动画效果就是控制display； 3）使用 show/hide方法来完成广告的显示；【代码实现】： jquery-3.3.1.min.js"> //入口函数，在页面加载完成之后，定义定时器，调用这两个方法 $(function...2 抽奖效果实现【需求】： 1）点击开始按钮，小相框中滚动图片； 2）点击停止按钮，小相框停止滚动，大相框中显示选中的图片；【分析】： 1）给开始按钮绑定单击事件：定义循环定时器、切换小相框的.../img/man00.jpg" style="width:160px;height:100px"/> div> <!

3K4 0

jQuery文档对象模型DOM的实际应用

在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性，对于之前的DOM是一颗岑天大树枝繁叶茂让我们遥不可及，那么jQuery的DOM树，就是一个简笔画的小树...() nextUntil() prev() prevAll() prevUntil() 过滤 eq() 养成一个习惯，如果该jQuery方法可以设置元素值，那么该方法一定可以获取元素值。...； scrollTop(value)设置垂直滚动条的值; scrollLeft()获取水平滚动条的值； scrollLeft(value)设置水平滚动条的值; 案例：楼梯。...> jQuery 节点操作一．创建节点为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是： 1.创建节点...DOM 不推荐使用，会崩溃 $('div').wrap(document.createElement('strong')); //临时的原生 DOM $('div').unwrap(); //移除一层包裹内容

1.5K3 0

前端之JQuery

AJAX(不刷新页面同时修改页面内容) # 8. Utilities # 除此之外，JQuery还提供了大量的插件为什么使用JQuery?...如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。...值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持* JQuery对象 jQuery对象就是通过jQuery包装DOM...如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。...包含了许多维持状态的小部件(Widget),因此，他与典型的JQuery插件使用模式略有不同，所有的JQuery UI小部件(Widget)使用相同的模式，所有，只要你学会其中一个,你就知道如何使用其他的小部件

4.2K5 0

看不完的那种！前端170面试题+答案学习整理（良心制作）

渲染动画 4.如何使用@keyframes使div元素移动200像素 div { widht:100px; height:100px; background: red; animation: move...27.如何用原生JavaScript实现jquery的ready方法 $(document).ready()在dom绘制完毕后就执行，而不必等到页面加载完毕。...>元素，如何使用jquery来选择它们可以使用标签选择器来选择所有的div元素，$("div")会返回一个包含5个div标签的jQuery对象。...如果盲人使用语音阅读功能，则会大声朗读图像的alt属性中的文本。当由于链接断开而无法显示图像时，将显示它。 Google和Yahoo!等机器人抓取图片的提示。...123.如何实现自适应布局可以使用媒体查询做响应式页面用Bootstrap的栅格系统使用弹性盒模型 124.在移动端如何做好用户体验清晰的视觉纵线信息的分组极致的减法利用选择代替输入标签以及文字的排布方式

13.1K5 0

JS实现无限分页加载——原理图解

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。...传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。有很多网站使用无限分页的模式，即网页视窗到达内容底部就自动加载下一部分的内容......（即滚动到了底部）代码样例代码部分没有太多的内容，需要注意的是： 1 使用fixed定位加载框 2 使用setTimeout定时触发判断方法，频率可以自定义 3 通过真实内容高度 - 视窗高度 -...; padding-right: 100px; border-radius: 15px; } div...当向下滚动了一下后，视窗的高度不变；上面隐藏的高度增加到100，即滚动条上面代表的部分。 ? 当触发加载后，视窗的高度保持变；上面隐藏的高度保持不变；文本的内容增加到1816； ?

7K10 0

五、jQuery动效

显示隐藏动画显示show()动画，隐藏动画hide()，切换动画toggle() 这三个方法都可以传入参数：一个参数代表动画完成的时间两个参数第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数...li> 二级菜单下拉菜单案例在jQuery...中，如果需要执行动画，建议在执行动画之前先调用stop方法，然后在执行动画。...当使用stop时： ? 不适用stop时： ? <!...累加属性累加属性就是在原来基础上再次增加。在第一个参数值得位置填写字符传表达式即可。

2.6K3 0

jQuery

使用jquery的对象需要用$(this) // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式 $...鼠标移入移除事件回到顶部 13.事件冒泡什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回...> View Code 回到顶部 16.滚轮事件与函数节流 jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容...在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。...学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。

5K2 0

jQuery Cheat—Sheet（jQuery学习笔记）

jQuery能满足以下需求：取得文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、不刷新加载、简化常见的JavaScript任务。 ---- jQuery版本？...}); 常用的 jQuery 事件方法文档DOM加载完成 $(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。...---- #jQuery 效果隐藏和显示 jQuery hide() 和 show() jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示...可选的 callback 参数是隐藏或显示完成后所执行的函数名称。...，高度减少到100px，透明度40% div.animate({width:’100px’,opacity:’0.8’},”slow”); //最后执行，宽度减少到100px，透明度80% /

18.3K3 0

easyui布局——【入门】

目录第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可...所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在学习如何按照EasyUI的文档来使用其组件并且其常用组件有哪些。...③ 菜单与按钮组件:很重要，每个网页都会使用，在网页中完成菜单和按钮的效果 ④ 表单组件:很重要，搜集用户数据，封装了常用的数据校验，并支持自定义校验 ⑤ 窗口组件:在当前页面中显示子窗口效果，对页面中的功能进行完善...作用: 使用该组件可以快速完成网页的布局效果使用:使用HTML完成页面组件，具体参照API 方式: ① 在div中进行布局 ② 在整个页面中 ③ 嵌套布局布局区域:...;">div> div data-options="region:'south',split:false" style="height:100px;">div> div data-options

1.9K2 0

零基础学网页开发入门（制作博客案例）适应手机端div+css+js的综合介绍

不损害他人利益的，符合国家规定的网页服务。 2.文件扩展名提问：如何使得文件的扩展名显示出来？...如果只使用了width，那么高度会进行等比例缩放。如果只使用了height，那么宽度会进行等比例缩放。...5.个别特殊符号举例 ©用来表示版权符号用来表示空格符号 6.关于滚动使用marquee标签标签的behavior表示滚动方式 direction表示滚动方向 7.其它标签...px（像素）来表示，但如果想要适应设备窗体大小变化，就要使用比例：例如调整宽度为100%在css中的写法如下 width:100% 五、网站代码结构基础代码结构的分割：头部toper 主体main...}); 在js中定位html元素与css定位html元素的方法是一样。 jquery是js中的一种整合框架。如何使用jquery来获取html元素呢？

1.7K3 0

【Web前端】CSS溢出

溢出的内容会显示在容器之外，不进行裁剪。 hidden：溢出的内容会被裁剪，不会显示在容器之外。 scroll：溢出的内容会显示滚动条，允许用户滚动查看超出部分的内容。 ...auto：根据需要自动添加滚动条。如果内容超出容器，则显示滚动条；否则，不显示滚动条。示例 1: visible 使用 overflow 属性可以帮助你控制在屏幕尺寸变化时的内容显示。 <!...场景 3: 表单和交互式元素在表单和交互式元素中，处理溢出可以提高用户体验。例如，在长列表或表单字段中使用滚动条，可以避免页面变得过于冗长。在表单内容超出容器时显示垂直滚动条。

8630 0

06-移动端开发教程-fullpage框架

比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...">第三屏div> div class="section">第四屏div> div> 如果需要从非第一屏开始显示，则需要给对应的section添加active样式类即可。...loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式...，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条 css3 布尔值 false 是否使用 CSS3 transforms...不兼容 animateAnchor 布尔值 true 事件名称说明 afterLoad 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称

6.4K5 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭