首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jQuery滚动页面指定位置

    文章作者:Tyan 博客:noahsnail.com         在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面内部跳转到指定位置,通常是在有滚动条的情况下,网上介绍的方法很多,本文主要是介绍...jQuery函数中的一个小trick,.focus()函数。         ...先来看一下jQuery的官方文档:         上面的文档扯了一堆,半点没看到页面跳转的影子,但是在实际应用中你会发现,如果一个控件调用了.focus()方法,页面会自动跳转到控件所在位置。         ...举例说明:         如图,这是一个pop up,modal,如果你选中了某一条数据,你想再打开这个pop up时页面直接跳转到选中的这条数据的位置,用.focus()可以这么写: $('input...[name=test]:checked').focus(); test是一堆radio的name,:checked代表查找被选中的那个radio,focus()方法会直接将页面跳转到被选中的这条数据的位置

    6.9K20

    页面滚动效果库,有点儿皮

    今天再推荐它的堂弟,WOW.js,一个有点儿皮的页面滚动效果库。 进入它的官网,就知道这个类库非常有趣了,屏幕上长满了各种各样的狗头。...[image-20210423133600820.png] 官网即这个库的介绍和演示页面,当你向下滚动页面时,一个个狗头会以各种不同的动画进行展现。...在狗头中间,可以看到这个库的优秀特性,比如简单易用、纯 JS 实现、不依赖 jQuery、动画丰富、只有 3 kb 大小、即时展现等。...如何使用 滚动效果的应用场景有很多,比如你要给朋友做一个生日祝福网站,可以先打上老长一段话,当朋友看完这段话,滚动页面到底部的时候,弹出一个生日蛋糕 ,会增加不少惊喜感。...-- 想添加滚动效果的元素 --> 最后,从 Animate.css 的动画库中选择一个效果,并且给选中的元素添加对应的类名即可。

    2.4K21

    分享一款jQuery全屏滚动页面特性案例

    分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。...这样的页面有很多,如:iPhone 5C页面:http://www.dowebok.com/demo/2014/77/index8.html  网易邮箱6.0:http://www.dowebok.com...实现滚屏翻页效果 <script type="text/javascript" src="http://apps.bdimg.com/libs/<em>jquery</em>/1.10.2/<em>jquery</em>.min.js...overflow-y:hidden; _background-image:url(about:blank); _background-attachment:fixed; }/* html加上这段代码用于取消ie6<em>滚动</em>时候元素震动...= function(){ goTo.each(function(){ $(this).height( $(window).height() ) }); } resetFun(); //屏幕<em>滚动</em>

    4K30

    页面滚动,元素跳动;附带jquery.scrollex.js插件

    在现在大多数的网站开发中,都有很多动画效果。 有些动画是页面一加载就要的,还有一些动画是需要页面滚动到那个元素才要展示的。...页面加载时的动画效果: 1) 页面加载完成后,给body元素添加class: on-loading, 需要实现动画的元素在body.on-loading 状态下显示为:opacity:0(需要显示出来的元素...当滚动到该元素时,去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件 二、使用方法 要使用这个...jQuery插件,需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。..." src="js/jquery.scrollex.js"> 调用插件 在页面DOM元素加载完毕之后,你可以通过scrollex()方法来初始化插件。

    5.7K10

    信息滚动效果

    关于滚动的那些事,相信不少的小伙伴都知道,在做网页动态效果时,时常有需求是关于滚动效果的实现的。在360或搜狐等门户网站的首页中,我们也时常见到这种效果。...以上是从360导航中截取的,都是信息滚动效果。今天我们要来实现下面这个小例子。效果可以有两种,分别是无缝滚动和间歇性无缝滚动。 首先是无缝滚动效果。 以下是我简单的介绍这个例子的主要思路。...就是先把1的内容复制出一个2的内容出来,这样就可以在滚动1内容要结束时,连上2内容的滚动,达到无缝滚动效果;然后当1内容刚好被滚动完时,马上把1内容跳到最开始的位置。...这样就实现了可以一直滚动下去的效果了。 在开始前,我们要知道几个js的属性(很重要,要牢记!)...接着就设置一个setInterval函数了,来个50毫秒执行一次吧 这样,就实现了文字在box区域中的滚动效果了: 现在内容是在无缝滚动了,我们可以加个鼠标滑过时停止滚动,鼠标移出时继续滚动效果

    3.1K20

    JQuery效果

    今天向大家来分享一下JQuery的一些效果,这些都相对比较简单 1.显示和隐藏效果           hide()           隐藏元素          show()         显示元素...fadeIn()             淡入效果           fadeOut()            淡出效果          fadeToggle()          淡入、淡出效果...$(selector).fadeTo(speed,opacity,callback);    必需的 speed 参数规定效果的时长。...fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)      speed 为速度,opacity为透明度  callback为函数名称 3...可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。  可选的 callback 参数是动画完成后所执行的函数名称。

    4K40

    滚动视差网页效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。...通常而言,滚动视差在前端需要辅助 Javascript 才能实现。当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力。...下面就让我们来见识一二: background-attachment: fixed 话不多说,上效果 链接在这里 这种方法是将背景固定在了网页后边 ---- transform: translate3d...话不多说,上效果 链接在这里 原理: 1.给父元素给上perspective属性,3px效果最好 2.给父元素里面的子盒子加上浮动属性 3.给不同的元素设置不同的transform: translateZ...()属性,在设置完之后元素大小会发生变化,使用scale()属性将其变回来 4.给子元素设置了不同的translateZ(),子元素离摄像机的距离就越远,在滚动时候移动的上下距离相就越小,这就达到了滚动视差的效果

    1.7K20

    如何防止Vue页面局部元素滚动时,页面整体滚动

    我最近遇到了一个问题,就是Vue页面我引入了一个列表组件,这个列表是可以单独滚动的。当我把鼠标移入,开始滚动操作时候,浏览器最右边的滚动条也会开始滚动。...而浏览器的默认行为是,当一个滚动事件发生且子元素滚动到边界时(比如已经滚动到底部或顶部),事件会继续传递给父容器,最终传递到 body,导致页面的整体滚动。...解决方法 为了防止整个页面滚动(即 body 的滚动),你需要使用 e.preventDefault() 来阻止浏览器的默认行为。...script> export default { methods: { handleScroll(e) { e.preventDefault(); // 阻止浏览器默认行为(即防止页面滚动...总结 浏览器的滚动事件需要用preventDefault() 来阻止,这个事件写在某个页面元素上不会影响该元素的正常滚动。这是个小问题,记录一下,方便下次遇到又忘记了。

    50000
    领券