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

　　<!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. centos 7 中安装Oracle 12c

    今天有需要在centos 7上安装oracle 12 所以上网查了一下安装流程,原贴转自:https://blog.csdn.net/github_39294367/article/details/7 ...

  2. DataTable转对象Model

    我们经常需要从数据库表中取数,取数是以取DataTable的方式,但是我么希望以对象为单位进行这种操作.即存在把取到的DataTable(数据表)转换为ModelList(对象集合)的需求. 原理稍微 ...

  3. Dubbo的初步理解和使用

    Dubbo(读音[ˈdʌbəʊ])是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 [1]  Spring框架无缝集成. Dubbo是一款 ...

  4. JS分支结构与循环结构

    1.分支结构 ①if语句 语法结构 if (/* 条件表达式 */) { // 执行语句 } ​ if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 } ​ ...

  5. Perl 条件语句

    Perl 条件语句 Perl 条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: 注意,数字 0, 字符串 '0' . & ...

  6. SCOI 2014 new ：未来展望

    后期计划(可能延续到noip) 后期计划这种东西..唉...经历了三周的停课生涯,我似乎已经找到了一种状态,就是我一直期盼的状态,然后为了不落泪退役,具体是这样的: 由于现在的学习任务不太紧张了,所以 ...

  7. thinkphp 防止XSS（跨站脚本攻击）

    XSS(跨站脚本攻击)可以用于窃取其他用户的Cookie信息,要避免此类问题,可以采用如下解决方案: 直接过滤所有的JavaScript脚本: 转义Html元字符,使用htmlentities.htm ...

  8. string的find("")

    ); string strleft; int FindMin = TempRangeData1.find(("_")); ) { strleft = (TempRangeData1 ...

  9. hdu多校第六场1005 （hdu6638） Snowy Smilel 线段树/区间最大和

    题意: 给定一个矩阵,矩阵上有若干点,每个点有正或负的权值,找一个方框框住一些点使得方框中点权值最大. 题解: 离散化横纵坐标,容易将这个问题转化为在矩阵上求最大和子矩阵的问题. 普通的n*n的矩阵的 ...

  10. python从入门到大神---4、python3文件操作最最最最简单实例

    python从入门到大神---4.python3文件操作最最最最简单实例 一.总结 一句话总结: python文件操作真的很简单,直接在代码中调用文件操作的函数比如open().read(),无需引包 ...