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

　　<!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. Nginx网站部署

    Nginx网站服务部署 常用的网站服务软件 处理静态资源的服务: apache软件:https://apache.org/ nginx软件:https://nginx.org/ 处理动态资源的服务: ...

  2. 关于vsphere exsi安装时遇到的问题

    我在虚拟机上安装vsphere 6.0的时候,在安装的过程中报错,出现了如下的内容. Error loading /tools.t00 Compressed MD5: Decompressed MD5 ...

  3. 发现一个新的远程软件 gotohttp

    之前直到远程桌面连接是TeamViewer 替换的原因是: 被控制端版本 11.0.x (很久以前安装的),而我本地的Teamviewer是 14.x, 去连接,好像提示被控制端的版本太低:本地使用 ...

  4. top.location.href

    window.location.href.location.href是本页面跳转   parent.location.href是上一层页面跳转   top.location.href是最外层的页面跳转 ...

  5. Servlet - request对象相关

    request对象中封装了当前请求的所有请求信息, request对象由Tomcat服务器创建, 并作为实参传递给处理请求的Servlet的service()方法 1. 获取请求头数据 // 获取请求 ...

  6. 一起看下Apache1.3.22版本改进和修正了啥？

    Apache 1.3.20 - 1.3.22主要改进: 安全弱点: 1.在Apache1.3.20的win32平台上发现了一个漏洞.如果客户端发送一个非常长的URI可能导致用目录列表来代替缺省主页.4 ...

  7. NX二次开发-对话框加锁UF_UI_lock_ug_access

    VC/MFC调用UG Dialog要进入加锁状态 加锁 UF_UI_lock_ug_access ( UF_UI_FROM_CUSTOM ); 此处为UF_UI_select的函数 解锁 UF_UI_ ...

  8. 简单理解js回调函数

    前言 其实回调函数简单通俗点就是当有a和b两个函数,当a作为参数传给b,并在b中执行,这时a就是一个回调(callback)函数,如果a是一个匿名函数,则为匿名回调函数那下面们来通过一个实例来具体解释 ...

  9. DZY LOVES MATH （莫比乌斯反演）

    OK!开始更新莫比乌斯反演 先看了一下数据范围,嗯,根据\(jiry\)老师的真言,我们一定是可以筛一遍然后用根号或者是\(log\)的算法. 题目思路挺简单,就是把原始的式子化成: \(\sum_{ ...

  10. redis笔记--------Jedis使用

    redis安装和启动就不说了 一.准备工作 1.redis -cli -p 6379 2.eclipse中新建项目,并导入jedis相关包 3.测试jedis连通性 二.Jedis常用API (哈希) ...