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

　　<!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. CKEditor与CKFinder学习--自定义界面及按钮事件捕获

    原文地址:CKEditor与CKFinder学习--自定义界面及按钮事件捕获  讨厌CSDN的广告,吃香太难看! 效果图 界面操作图 原始界面 调整后的界面(删除了flush,表单元素等) 该界面的皮 ...

  2. mysql的sql筛选排重最大值并修改其属性

    修改属性 mysql -h192.168.1.51 -uroot -e "use codex_game_s1051_h; update user_info set isActive=0 wh ...

  3. 在Linux下如果要使用接口标志要加什么头文件吗？因为我在使用IFF_UP时会出错，说是未定义

    头文件一般放在/usr/include目录下,用grep 'IFF_UP' /usr/include/*.* |less这个命令查找一下在哪个头文件里面有定义.   追问 嗯~这个方法确实可以查找到一 ...

  4. Winform 奇怪的 英文字体错乱显示问题

    效果如图: 字体是Calibri 后来看了一下,我在vs设计器中为了预览效果定义了这些中文,然后在构造函数中将其改成英文,可能是已经为中文渲染出了位置?在改变就会冲突? 我的设计器 如何修改: 将vs ...

  5. 【JZOJ3293】【BZOJ4416】【luoguP3989】阶乘字符串

    description 给定一个由前n个小写字母组成的串S. 串S是阶乘字符串当且仅当前n个小写字母的全排列(共n!种)都作为S的子序列(可以不连续)出现. 由这个定义出发,可以得到一个简单的枚举法去 ...

  6. delphi xe10 消息操作

    //消息提醒(从手机屏幕顶部向下滑动,出现的提示消息) NotificationC: TNotificationCenter; procedure TNotificationsForm.btnSend ...

  7. poi之Excel（在线生成）下载

    Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. poi之Excel下载 @RequestMappi ...

  8. 第k小团+bitset优化——牛客多校第2场D

    模拟bfs,以空团为起点,用堆维护当前最小的团,然后进行加点更新 在加入新点时要注意判重,并且用bitset来加速判断和转移构造 #include<bits/stdc++.h> #incl ...

  9. 59 cuda 不同版本__half冲突问题 —— "__half" has no member "x"

    0 引言 深度学习中常常用到half类型的半精度浮点数,但是cpu本身是不支持half的,因此需要进行转换. 1 half - float转换 参考了某博主的github,链接如下. https:// ...

  10. NOIp2018集训test-9-15(联考二day1)

    T1.矩阵游戏 水题.每一行最后乘的数为x[i],每一列为y[i],暴力算第一行的列的贡献,每一行的列的贡献是公差为所有列的贡献之和的等差数列,然后每一行再乘上行的贡献求和即为答案. //Achen ...