通常我们在做网页布局的时候，客户为要求在某个地方实现图片滚动或文字滚动的展示，这就是所谓的跑马灯效果，在以前蓝叶用html标签marquee来做跑马灯效果，marquee不是很完美，如果一个层的宽度或高度过长，那么中间会用空隙显得很不美观；现在蓝叶用jquery无缝隙连续滚动代码来实现跑马灯效果，这段jquery无缝隙连续滚动代码可以自由设置，向左、向右、向上、向下的滚动效果，如果你需要就把以下代码复制到你需要的地方，稍微进行修改即可使用了，这是一段jquery代码，需要jquery库的支持才行。
一款创意不错的jQuery+CSS3页面滚动图片展示动画特效，使用GSAP和ScrollMagic来制作页面向下或向上滚动时出现的动画效果。
1.鼠标滚动事件。 说明：返回值 大于0向上滚动，小于0向下滚动。 兼容型：所有浏览器。 代码： /*********************** * 函数：鼠标滚动方向 * 参数：event * 返回：滚轮方向[向上（大于0）、向下（小于0）] *************************/ var scrollFunc = function(e) { var direct = 0; e = e || window.event; if (e.wheelDelta) {//
jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。
原理： 图片的加载是由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
原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns
我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。
还记得上周咱们说的“随心所欲滚动条，远离产品汪”一文吗？当中介绍了自定义滚动条的基本原理与实现方法，在自定义滚动条实现后，可以通过对滚动条的上下拖动来控制内容区的显示，使用过的朋友会发现，如果对篇幅较长的内容来说，不停的拖动滚动条来查看内容，还是比较麻烦的，于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。 本文内容 1、原理结构图 2、滚轮事件及兼容问题概要 3、具体实现步骤 4、小结 原理结构图 为了方便大家熟悉理解，希望大家能够回顾下上篇“随心所欲滚动条，远离产品汪（一）”，本文继续使用
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
分享一款jQuery全屏滚动页面特性案例。 我们在来往官网，或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。它们就像是竖着的图片轮转一样。 这样的页面有很多，如：iPhone 5C页面：http://www.dowebok.com/demo/2014/77/index8.html 网易邮箱6.0：http://www.dowebok.com/demo/2014/97/ 来往官网：http://www.laiwang.com 百度百科史记2013：http://www.dowebok.com/demo/2014/78/ 搜狐快站：http://www.dowebok.com/demo/2014/80/ 证券时报网移动产品：http://www.dowebok.com/demo/2014/77/index9.html 邮箱大师：http://www.dowebok.com/demo/126/ 360安全路由：http://www.dowebok.com/demo/2014/77/index10.html 等等一些例子。看看实际代码：
前面分享了两篇有关《 jQuery 仿极客公园火箭发射“返回顶部”效果》的文章，如果你是Word-Press 老手，肯定知道如何移植到WordPress主题中；本文针对的是新手，如果你想在你的WordPress主题中实现这个效果，那就往下看吧！ 建议先看一下下面的文章——如果你还没有看过的话： 《 jQuery仿极客公园火箭发射“返回顶部”效果（初始篇）》 《 jQuery仿极客公园火箭发射“返回顶部”效果（优化篇）》 教程如下（代码来源于andyliu，感谢原作者。）： 先提前下载好所需要的上面的图片
承接上一篇《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:
在本教程中，我们将创建一个导航栏，当您向下滚动时，它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。
首先绑定触发元素（input）框，scrollIntoView(alignWithTop) 属性滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。
上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。
前段时间刚给大家推荐了一个强大易用的跨平台 CSS3 动画库 Animate.css，内置了很多常用的 CSS 动画，可以一行代码让页面动起来。
这是一款支持移动手机mobile设备的 jQuery全屏水平横向翻页效果插件。
如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane 和 mCustomScrollbar。
CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。 1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。 主要功能有： 支持鼠标滚动。 支持前后退和键盘控制。 多个回调函数。
CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例
window.innerHeight/window.innerWidth: 返回表示窗口的内部高度/宽度的数字。不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分
演示效果 自带引用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">
现在 web 设计是最有趣的了，做好 web 设计不仅要熟练使用 Javascript，css 和 html 等，还要有自己的创意设计。为了方便大家发挥自己的创意，就产生了很多 JS 框架，Node.js 扩展等等。有了这些工具，开发者们就能专注于创意设计了，而不用为某个功能而花费太多精力。这里我们介绍的是 12 个开发者们必备的 JavaScript 库，都是一些很基础功能很强大的库。有了这些库，开发者们可以节省很多时间，大大提高开发的效率，所以大家赶紧收藏起来吧：） 1) Headroom.js H
图片的懒加载就是在页面打开的时候，不要一次性全部显示页面所有的图片，而是只显示当前视口内的图片，一般在移动端使用（PC端主要是前端分页或者后端分页）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>
基于Jquery开发的Autocomplete插件。具有易于使用，配置简单，既可以利用Ajax读取数据也可以直接从本地获取数据。
效果： 需求： 1.记录循环滚动； 2.每组记录之间不能有留白； 3.每条记录上移到容器的顶部时要停顿一下； 4.鼠标移入容器时停止滚动，移出时继续滚动。 曾想用的实现方法： 1.使用Marquee：
.container{width:480px;height:300px;overflow:hidden;position:relative;}
作为一个程序员，一个标标准准的理工男，肯定会有一个问题，英语虐我千百遍，我却待它如初恋。相信我，为英语头疼的你并不孤单。除了那些天赋异禀的神人，我们都一样。
序 现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。 我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。再久远一些，小的时候，我也经常和小伙伴们组团去书店看白书，也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书，在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。 而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。 岁月在流逝，时代在进步。 愿放下所有的浮躁，在新的时代愉快地生活，无所谓明天怎
最近做的项目中用到了EasyUI的Tree，树的结构是这样的，有22个车站，每一个车站相当于一个逻辑域（虚拟域），每一个域下有许多的设备类型，拿我现在做的门禁系统来说，设备类型有门禁主控制器和门禁就地控制器等设备类型，每一种设备类型下面会有多个设备，每一个车站可能会有好几十个设备，22个车站就可能会有上百个或者上千个设备，这样在加载成Tree后，比如说想要查看文锦站的A站口的门禁就地控制器的信息，要是让你一个节点一个节点的打开去找，肯定会烦死的，所以我们就做了一个（联想+模糊）查询。
浏览器对象模型BOM（Browser，Object，Model）是以window对象为基础的，这个对象代表了浏览器窗口，页面可视区域，它还被复用为Es的全局对象Global，所有的原生类型的构造函数和函数都从一开始就存在于这个对象之上。
写在前面： 首先感谢本文内涉及到的所有代码编写的作者，感谢你们的开源！同时感谢我的技术群友(群号：511860085)的优秀代码推荐！在本文中我将以标签的形式来方便读者的查找，大部分代码我都会放上GIF图来提供参考。下面我将列出本文涉及到的代码标签分类，你可以直接复制标签，然后全局搜索(command+f)后使用Enter键来滚动到你需要的代码推荐，以此来跳过你不感兴趣的部分。 我为什么这样搞，因为简书烂编辑器不支持跳转到指定目录！ 文字出现动画 按钮圆角 球形滚动标签 扇形向上滚动标签 转场动
要做出这个效果，其实不用说，首先要把这五个div的基本HTML+CSS给写出来先。
###手机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
不是给每个子节点单独设置事件监听器,而是将事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点 (一定要记住!)
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
有序列表 List 1 List 2 List 3 只读列
移动端数据量比较大时，一般都是通过列表来进行展示的，比如商品数据、聊天列表、通信录、朋友圈等。
为了让提升用户体验，微软在IE5中引入了XMLHttpRequest， 简称XHR，XMLHttpRequest的出现，可以让网页无需刷新，即可从服务器获取最新的内容，这项技术也就是所谓的Ajax
分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下：
许多购物、外卖小程序，都会做「分栏」设计，即在左侧展示商品分类、右侧展示分类下的具体商品。
1： jQuery $(document).ready()与window.onload的区别？ Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕 . 2.编写个数不同 window.onload不能同时编
在前端的世界里，事件是不可或缺的一部分。用户的点击、输入、滚动等行为都触发着各种事件，而如何在代码中捕捉并处理这些事件是每位前端开发者必须掌握的技能之一。本文将带你深入浅出，探索 JQuery 中的事件绑定，为你揭开这个奇妙世界的面纱。
liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 marquee 标签，但比 marquee 更强大。它可以应用于任何 Web 元素，包括文字、图像、表格、表单等元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。
最近项目中 老板需要 将聊天界面 的滚动条美化一下，所以主编海百了一波，发现一个样式和兼容性不错的滚动条插件 jQuery自定义滚动条样式插件mCustomScrollbar，基本可以满足大家的开发，官方也给出了相应的demo;大家可以看看
无限滚动（Infinite scrolling），有时候被称为无尽滚动（endless scrolling），这种技术允许用户在大量内容上滚动，眼中看不到结束的地方。这种技术很简单，就是页面往下滚动的时候保持刷新。
jquery的安装和语法，jquery的多种选择器，dom操作和jquery事件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
