js 实现遮罩某一部分
借用一下喜马拉雅的效果图,比较一下下面的遮罩层的高度:
我们可以看到它的遮罩层一直都是只遮住的下面。开始想着怎么用CSS实现,几经测试也没弄出来,如果正在看这篇文章的你,知道如何用CSS达到这种效果,欢迎留言。
我来说一下我用js的解决方法。
原理很简单,遮罩层高度 = 选集弹层的下边距离 到 窗口底边的距离。
先看下结构:
实现效果核心代码:
$(".js_show_chapter").click(function () {
var maskHeight;
var obj = $('.js_chapter_wrap');
var wh = $(window).height();//窗口高度
var objOffsetTop = obj.offset().top; //选集弹层到顶部的距离
var docScrollTop = $(document).scrollTop();//滚动条到顶部的距离
maskHeight = wh - (objOffsetTop - docScrollTop);//计算遮罩层高度
$(".mask").height(maskHeight + 'px');
})
最后显示效果如下图:
需要完整案例的可在下方留言~感谢阅读~
js 实现遮罩某一部分的更多相关文章
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- js添加遮罩层
直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...
- 纯js制作遮罩层对话框 -- g皓皓
//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- js带有遮罩的弹窗
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 带遮罩层的弹出层
最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...
- js特效遮罩层(弹出层)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- JS实现遮罩层
/* * 显示loading遮罩层 */ function loading() { var mask_bg = document.createElement("div"); mas ...
- css+JS实现遮罩弹框
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...
- js实现遮罩以及弹出可移动登录窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 电子证据 利用Kali进行wifi钓鱼实战详细教程
电子证据 利用Kali进行wifi钓鱼实战详细教程 一. Kali系统安装和必要软件安装: 1.Kali最新版可以来我这儿拿外置驱动和光盘装,目测用U盘装最新版有些问题,比较麻烦. 2.Kali更新源 ...
- 用Entityframework 调用Mysql时,datetime格式插入不进去数据库的解决办法。
1. 打开Model.edmx, 2. 选择userinfo中的createtime字段的属性 3. storegeneratedpattern设置值为None
- supervisor 安装脚本
mkdir /data/tools && cd /data/tools wget --no-check-certificate https://bootstrap.pypa.io/ez ...
- Bug:java.lang.StackOverflowError: stack size 8MB
在开发的时候遇到了这个Bug:java.lang.StackOverflowError: stack size 8MB Log: 11-27 14:16:37.093 21892-21892/com. ...
- Atitit 项目的主体设计与结构文档 v5
Atitit 项目的主体设计与结构文档 v5 1. 版本历史说明2 2. 功能大概说明2 3. 实现的目标3 3.1. cross device跨设备(pc 手机 平板)3 3.2. cross sc ...
- 深入理解Linux内核-块设备驱动程序
扇区: 1.硬盘控制器将磁盘看成一大组扇区2.扇区就是一组相邻字节3.扇区按照惯例大小设置位512字节4.存放在块设备中的数据是通过它们在磁盘上的位置来标识,即首个扇区的下标和扇区的数目.5.扇区是硬 ...
- 解决myeclipse/eclipse创建或导入maven工程时引发的问题
起因: 最近学习maven,按照教程把命令行创建的maven工程导入到eclipse/myeclipse,由于库中没有一些依赖包,所以在导入工程的时候开发工具自动下载依赖包.可是,由于天朝特殊环境的问 ...
- Sql Server 2008 清除日志
--在SQL2008中清除日志就必须在简单模式下进行,等清除动作完毕再调回到完全模式. USE [master] GO ALTER DATABASE SSCDZ SET RECOVERY SIMPLE ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
- [转载]生活在 Emacs 中
Brian Bilbrey2002 年 8 月 20 日发布 教程简介 本教程讲什么? Emacs 是一个流行的无模式文本编辑器,有许多强大的功能.本教程将教您使用 Emacs 的基础知识.为了让您很 ...