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

　　<!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. Flask理论基础（一）视图函数和URL反转函数(url_for)

    一.视图函数 1.1 基本用法试图函数是 app.route 或者 bp.route(蓝图)装饰器装饰的函数.该函数实现了对URL路径的转换,也就是路由功能,例如下面代码定义了默认url ‘/’ 和‘ ...

  2. linux 查看服务器序列号(S/N)

    [root@node1~]# dmidecode -t 查看支持的参数 dmidecode: option requires an argument -- 't' Type number or key ...

  3. 随笔记录 重置root密码 2019.8.7

    方法1:进入单用户模式 1.开机进入以下界面选择要启动的系统按e 2.找到星号行在后面添加上init=/bin/sh 3.按住Ctrl+x执行 4.进入单用户模式 5.如果passwd命令失败,可以直 ...

  4. PL SQL 存储过程 SQL SERVER创建存储过程及调用，Oracle创建存储过程及调用

    Oracle使用存储过程实例: 例1: //查出表字段赋值给存储过程变量 create proc proc_stu @sname varchar(20), //默认是输入参数(input),另外还有两 ...

  5. 模拟字典序排序——hdu6034

    #include <bits/stdc++.h> #include <iostream> using namespace std; ; ; int n; int maxj; s ...

  6. Nmap扫描与Tcpdump抓包分析

    扫描与抓包分析 3.1 问题 本案例要求熟悉Linux主机环境下的常用安全工具,完成以下任务操作: 使用NMAP扫描来获取指定主机/网段的相关信息 使用EtterCAP截获明文通信的密码.检测非加密通 ...

  7. 求树的最大独立集，最小点覆盖，最小支配集 贪心and树形dp

    目录 求树的最大独立集,最小点覆盖,最小支配集 三个定义 贪心解法 树形DP解法 (有任何问题欢迎留言或私聊&&欢迎交流讨论哦 求树的最大独立集,最小点覆盖,最小支配集 三个定义 最大 ...

  8. 安装JDK9之后eclipse无法启动问题解决办法

    操作系统:MAC OS JDK:1.8.0_131 eclipse:官网最新版 安装jdk的过程很简单,从官网下载之后依次点击就可以了,在终端输入:java -version 可以看到安装后的版本信息 ...

  9. taskFactory

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. CVE-2019-0708简单复现

    各文件对应位置 rdp.rb -> /usr/share/metasploit-framework/lib/msf/core/exploit/rdp.rb rdp_scanner.rb -> ...