一、随着页面滚动，元素到达可视区域，显示特殊样式

　　<!DOCTYPE html>

　　<html lang="en">

　　　　<head>

　　　　　　<meta charset="UTF-8">

　　　　　　　　<title>Title</title>

　　　　　　　　 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

　　　　　　　　<style>

　　　　　　　　　　*{ margin: 0; padding: 0; } li{ list-style: none; }#scroll-item{ margin-top: 20px; } #scroll-item li{ width: 400px; height: 120px; margin-top: 300px; margin-left: 100px; background: aquamarine; font-size: 30px; } .item-border{ border: 10px solid #ff6700; } </style>

　　　　</head>

　　　　<body>

　　　　　　<ul id="scroll-item">

　　　　　　　　<li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li>

　　　　　　</ul>

　　　　</body>

　　　　<script>

　　　　$(document).ready(function(){ $(document).scroll(function() { let liArr = $('#scroll-item > li'); let scrollTop = $(document).scrollTop();//页面滚动的距离 for(let i=0,len=liArr.length;i<len;i++){ let top = liArr[i].offsetTop - scrollTop;//每个元素距离页面顶部距离 if(top >= 300 && top <= 600){//元素距离浏览器窗口 顶部 的距离 if($(liArr).eq(i).prop("className") !== 'item-border'){ $(liArr).eq(i).addClass('item-border'); $(liArr).eq(i).siblings().removeClass('item-border'); } } } }); });

　　　　</script>

　　</html>

js 常见功能总会的更多相关文章

  1. HTML+CSS+js常见知识点

    一.HTML.CSS常见知识点 1.垂直居中盒子 /* 方法一 */ html, body { width: 100%; height: 100%; padding: 0; margin: 0; } ...

  2. Atiit 常见功能 常用功能与模块的最快速解决方案

    Atiit 常见功能 常用功能与模块的最快速解决方案 一.大力使用第三方API接口 一.导出excel jquery.table2excel 二.Form表单验证,使用h5验证属性 验证发生在form ...

  3. B2C电子商务系统研发——产品媒体常见功能点

    产品媒体常见功能点 电商研发系列——产品媒体常见功能点 支持图片.视频和文档等媒体类型 产品图片对清晰度要求比极高,但又不能太大,所以图片一般是jpg格式. 视频一般是flv流媒体格式,如果是嵌入产品 ...

  4. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  5. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  6. Lucene.net常见功能实现知识汇总

    在开发SearchEasy Site SearchEngine(搜易站内搜索引擎)的时候,经常会遇到一些搜索引擎的常见功能如何实现的问题,比如实现相关度百分比显示?如何实现在结果中搜索等等诸如此类常见 ...

  7. js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结

    1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...

  8. touch.js——常见应用操作

    touch.js--常见应用操作 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时 ...

  9. Markdown不常见功能

    推荐几个Markdown不常见功能 1.表情符号 emoji表情使用:EMOJICODE:的格式,详细列表可见 https://www.webpagefx.com/tools/emoji-cheat- ...

随机推荐

  1. python 基本输入输出

  2. 15_TLB中的G属性

    > TLB 是为了增加访问内存的效率 即 如果 是 29 9 12 分页 请求数据 可能需要访问 4次内存:为了解决这个问题:出现了 TLB (虚拟地址到物理地址的转换关系),如果目标地址在TL ...

  3. UVA11427 Expect the Expected 概率dp+全概率公式

    题目传送门 题意:小明每晚都玩游戏,每一盘赢的概率都是p,如果第一盘就赢了,那么就去睡觉,第二天继续玩:否则继续玩,玩到赢的比例大于p才去睡:如果一直玩了n盘还没完成,就再也不玩了:问他玩游戏天数的期 ...

  4. js求三个数的最大值运算

    js代码: <script> // var num1 = 32, // num2 = 43, // num3 = 98; // if (num1 > num2) { // if (n ...

  5. BlockingQueu 阻塞队列

    java.util.concurrent public interface BlockingQueue<E> extends Queue<E> 简介 当阻塞队列插入数据时: 如 ...

  6. 后缀自动机模板——不同子串个数p2408

    后缀自动机的入门博客 https://www.luogu.org/blog/Kesdiael3/hou-zhui-zi-dong-ji-yang-xie 有两种求法,分别对应了两种性质 #includ ...

  7. NX二次开发-UFUN查询对象的类型和子类型UF_OBJ_ask_type_and_subtype

    NX9+VS2012 #include <uf.h> #include <uf_obj.h> #include <uf_modl.h> #include <u ...

  8. NX二次开发-如何判断孔特征和边倒圆是否在凸台特征后面？

    在建模的时候,部件导航器里的特征按建模顺序是有特征时间戳记的. 我们可以根据特征时间戳记的名字来判断哪个特征在前,哪个在后. #include <uf.h> #include <uf ...

  9. NX二次开发-UFUN将目录与文件名组合在一起uc4575

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> #include <uf_cfi.h> UF_initialize() ...

  10. [DataContract]引用

    项目->右键->添加引用->找到System.Runtime.Serialization 添加之