一款创意不错的jQuery+CSS3页面滚动图片展示动画特效,使用GSAP和ScrollMagic来制作页面向下或向上滚动时出现的动画效果。
承接上一篇《jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)》,本文将对前一篇的代码进行优化。还是转载自andyliu: 先给出个演示Demo:演示地址 今天我们主要做的是将上一篇的代码进行面向对象改进 我直接上代码了注释写的比较清楚: <!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <style> .one {width:100%;height:
前面分享了两篇有关《 jQuery 仿极客公园火箭发射“返回顶部”效果》的文章,如果你是Word-Press 老手,肯定知道如何移植到WordPress主题中;本文针对的是新手,如果你想在你的WordPress主题中实现这个效果,那就往下看吧! 建议先看一下下面的文章——如果你还没有看过的话: 《 jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)》 《 jQuery仿极客公园火箭发射“返回顶部”效果(优化篇)》 教程如下(代码来源于andyliu,感谢原作者。): 先提前下载好所需要的上面的图片
window.innerHeight/window.innerWidth: 返回表示窗口的内部高度/宽度的数字。不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分
我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理。
原理: 图片的加载是由src引起的,当对src赋值时浏览器会请求图片资源,基于这个,可以利用html5的属性data-xxx来保存图片的路径,当我们需要加载图片的时候才将data-xxx的值赋予src。就能实现图片的按需加载了,也就是懒加载了 方法: 1.使用lazyload插件,引用jquery.js和jquery.lazyload.js 2.将img标签中的src属性赋值为加载图片,即一张临时的loading.gif图,将真正的图片路径放在data-original属性中 3.当JS监听到该图片元
如果你要制作一个全屏的网页,使用这个插件在合适不过,如QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> 2.引入jq 和 fullpage.js文件 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar。
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
首先绑定触发元素(input)框,scrollIntoView(alignWithTop) 属性滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。
除了接受正负偏移量,window.scrollBy还能接受ScrollToOptions作为配置。
上面几种方式实现起来比较简单,但是效果生硬,直接从底部切换到顶部,没有一个过渡的动画。此方法能使页面动态滚动,同时将按钮换成一个箭头标志,判断页面滚动的距离,当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。
前段时间刚给大家推荐了一个强大易用的跨平台 CSS3 动画库 Animate.css,内置了很多常用的 CSS 动画,可以一行代码让页面动起来。
html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的 Top 值, 实现滚动效果.
这是一款支持移动手机mobile设备的 jQuery全屏水平横向翻页效果插件。
在本教程中,我们将创建一个导航栏,当您向下滚动时,它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。 1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站,github地址。 主要功能有: 支持鼠标滚动。 支持前后退和键盘控制。 多个回调函数。
演示效果 自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page">
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例
图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页)。
最近做的项目中用到了EasyUI的Tree,树的结构是这样的,有22个车站,每一个车站相当于一个逻辑域(虚拟域),每一个域下有许多的设备类型,拿我现在做的门禁系统来说,设备类型有门禁主控制器和门禁就地控制器等设备类型,每一种设备类型下面会有多个设备,每一个车站可能会有好几十个设备,22个车站就可能会有上百个或者上千个设备,这样在加载成Tree后,比如说想要查看文锦站的A站口的门禁就地控制器的信息,要是让你一个节点一个节点的打开去找,肯定会烦死的,所以我们就做了一个(联想+模糊)查询。
这种方式非常简单,给待跳转元素添加 id,之后修改 window.location 即可,用法如
通常我们在做网页布局的时候,客户为要求在某个地方实现图片滚动或文字滚动的展示,这就是所谓的跑马灯效果,在以前蓝叶用html标签marquee来做跑马灯效果,marquee不是很完美,如果一个层的宽度或高度过长,那么中间会用空隙显得很不美观;现在蓝叶用jquery无缝隙连续滚动代码来实现跑马灯效果,这段jquery无缝隙连续滚动代码可以自由设置,向左、向右、向上、向下的滚动效果,如果你需要就把以下代码复制到你需要的地方,稍微进行修改即可使用了,这是一段jquery代码,需要jquery库的支持才行。
具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮,并且具有Canvas绘制进度环的效果。
具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮,并且具有Canvas绘制进度环的效果。 大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布,百分比数字是用data储存并使用css的 content属性实现。 Canvas进度环返回按钮实现方法: 确保引入了jquery,下面的代码加入到你的js文件中: var bigfa_scroll = { drawCircle: function(id, percentage, color) { var
1、ios弹窗输入框,关闭后,页面顶上去不恢复的问题 解决方法: function temporaryRepair() { const that = this; const windowFocusHeight = window.innerHeight; if (that.windowHeight === windowFocusHeight) { return; } let currentPosition; const s
1.鼠标滚动事件。 说明:返回值 大于0向上滚动,小于0向下滚动。 兼容型:所有浏览器。 代码: /*********************** * 函数:鼠标滚动方向 * 参数:event * 返回:滚轮方向[向上(大于0)、向下(小于0)] *************************/ var scrollFunc = function(e) { var direct = 0; e = e || window.event; if (e.wheelDelta) {//
前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回顾失败的面试经历呢? 因为在互联网+时代,成功的案例可以借鉴,但是不可复制;失败的案例可以引以为戒,但是不可重蹈覆辙。你按照成功者的步骤一步一步走,最后不一定会成功;但如果你按照失败者的步骤一步一步走,结局注定会失败。 我在这里写出当年我失败的经历,算是对自己做一个总结,也是为了提醒后来者,一入前端深似海,坑多坑少自己
有序列表 List 1 List 2 List 3 只读列
现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计。为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node.js 扩展等等。有了这些工具,开发者们就能专注于创意设计了,而不用为某个功能而花费太多精力。这里我们介绍的是 12 个开发者们必备的 JavaScript 库,都是一些很基础功能很强大的库。有了这些库,开发者们可以节省很多时间,大大提高开发的效率,所以大家赶紧收藏起来吧:) 1) Headroom.js H
不是给每个子节点单独设置事件监听器,而是将事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点 (一定要记住!)
###手机H5页面 ###文字滚动 使用li标签,通过改变margin-top实现向上滚动。 代码: js: carousel: function() { var items = $('.roll').find('li'); console.log(items); var $itemOne = items.eq(0); var margin_top = 0; var margin_top_height = $itemOne.height(); var
jquery中没有鼠标滚轮事件,那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。
许多购物、外卖小程序,都会做「分栏」设计,即在左侧展示商品分类、右侧展示分类下的具体商品。
在前端的世界里,事件是不可或缺的一部分。用户的点击、输入、滚动等行为都触发着各种事件,而如何在代码中捕捉并处理这些事件是每位前端开发者必须掌握的技能之一。本文将带你深入浅出,探索 JQuery 中的事件绑定,为你揭开这个奇妙世界的面纱。
原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns
基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。
保险起见可以把 html 和 body 的高度都设置 100% ,如下,用添加 class 的方法实现:
还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区的显示,使用过的朋友会发现,如果对篇幅较长的内容来说,不停的拖动滚动条来查看内容,还是比较麻烦的,于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。 本文内容 1、原理结构图 2、滚轮事件及兼容问题概要 3、具体实现步骤 4、小结 原理结构图 为了方便大家熟悉理解,希望大家能够回顾下上篇“随心所欲滚动条,远离产品汪(一)”,本文继续使用
1: jQuery $(document).ready()与window.onload的区别? Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕 . 2.编写个数不同 window.onload不能同时编
Vue(读音/vju/,类似view),是中国的大神尤雨溪开发的,为数不多的国人开发的世界顶级开源软件。是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。MVVM响应式编程模型,避免直接操作DOM,降低DOM操作的复杂性。
序 现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋。 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨。再久远一些,小的时候,我也经常和小伙伴们组团去书店看白书,也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书,在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。 而在当今这个信息化的时代,看书变得空前的便利,可是儿时那种期待和兴奋的感受却消失在了时间的长河。 岁月在流逝,时代在进步。 愿放下所有的浮躁,在新的时代愉快地生活,无所谓明天怎
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position。
今天在做页面UI改版的时候发现,我之前使用的是dom.scrollIntoView(); 使得点击右侧题目编号的时候,让左侧题目滚动到页面可视区域。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KjBCHdmN-1596903264915)(assets/image-20200806102732122.png)]
有些动画是页面一加载就要的,还有一些动画是需要页面滚动到那个元素才要展示的。
现在的网页设计中,浮动导航菜单被广泛应用了,通过它,可以可以快速移动到菜单,Smint 就是这样一个简单的 jQuery 插件,可以将导航菜单浮动在页面的顶部,点击菜单快速滚动到达页面的位置,并且能够设置滚动的速度。
前几年,很多人看到IT行业越来越火,就想转行成为程序员。那时候转行还是很简单的,不一定要掌握很多技术知识,如果你是前端人员,甚至会写个静态页面就可以去应聘了。但现在,这样的“好事”越来越不好找了,很多毕业生面临着一毕业就失业的情况。然而,市面上饱和的大多数是初级的职位,对于中高级开发工程师,企业还是很欢迎的。
jquery的安装和语法,jquery的多种选择器,dom操作和jquery事件。
领取专属 10元无门槛券
手把手带您无忧上云