笔记
共 28 篇
-
jQuery 弹出层点击非本区域或遮罩层隐藏 扯一下闲话菜鸟想要实现一个效果，就要受尽很多折磨。今天花了几个小时都没实现，回家后又花了半小时，终于实现了。想要的效果点击一个按钮，弹出一个侧边菜单，同时显示一个遮罩层再次点击按钮，侧边栏和遮罩层隐藏弹出层的子元素不受影响实现过程css代码.proup { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; z-index: 7777; background: rgba(0,0,0,0.65); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }html代码<div class="btn"></div> <div class="proup"></div> <div class="menu"> <ul> <li></li> <li></li> <li></li> </ul> </div> jQuery 代码$('.btn').click(function(event) { event.stopPropagation(); $('.menu').toggle(); $('.proup').toggle(); }) $(document).click(function(event){ var _m = $('.menu'); if(!_m.is(event.target) && _m.has(event.target).length == 0){ $('.menu').hide(); $('.proup').hide(); } })实现原理使用 event.stopPropagation(); 取消事件冒泡；通过 !_m.is(event.target) && _m.has(event.target).length == 0 判断，点击非本区域或遮罩层时隐藏侧边栏
-
-
jQuery 文字超出高度后折叠 实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 文字超出高度后折叠</title> <style> .container{ margin: 0 auto; width: 500px; border: green 1px solid; } .content{ position: relative; overflow: hidden; padding: 15px; } .more{ text-align: right; padding: 15px; } </style> </head> <body> <div class="container"> <div class="content"> 我以为要是唱的用心良苦，你就会对我义无反顾，我真的不会对你再爱一次，请你别再为我留太多的泪。也许这是真的不应该说，下一次我会给你更好的告别。 </div> <div class="more"></div> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ let zxHeight = 30;//最小高度 let mrHeight = $('.content').height();//默认高度 if (mrHeight >= mrHeight){ $('.content').css('height',zxHeight + 'px'); $('.more').append('<a href="#">展开</a>'); $('.more a').click(function(){ let dqHeight = $('.content').height();//当前高度 if (dqHeight > zxHeight){ $('.content').animate({height:zxHeight},'normal'); $('.more a').text('展开'); } else { $('.content').animate({height:mrHeight},'normal'); $('.more a').text('折叠'); } return false; }); } }); </script> </html>效果
-
jQuery 判断输入框的值是否为空 需求分析我想要判断输入框的值是否为空，如果为空就弹框提示，并且返回焦距到输入框。实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <input type="text" id="inputValue" placeholder="请输入内容" /> <input type="button" value="提交" id="btn" /> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $('#btn').click(function () { if ($('#inputValue').val() == '' || $.trim($('#inputValue').val() == '')) { $('#inputValue').focus() $('#inputValue').attr('placeholder', '内容不能为空') } }) </script> </html>
-
jQuery 实现点击图片放大居中显示 原理点击图片触发单击响应事件，半透明的包含块全屏显示，然后图片进行放大居中显示。实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击图片放大</title> <style type="text/css"> .pic img { cursor: pointer; width: 125px; height: 125px; } .picView { z-index: 99; display: none; top: 0; left: 0; width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); } .picView img { z-index: 100; width: 100%; cursor: pointer; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div class="pic"> <img src="https://www4.bing.com/az/hprichbg/rb/LakeWinnipeg_ZH-CN0984485385_1920x1080.jpg"> </div> <div class="picView"> <img src="#"> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('.pic img').on('click', function () { var src = $(this).attr('src'); $('.picView img').attr('src', src); $('.picView').show() }); $('.picView').on('click', function () { $('.picView').hide() }); }) </script> </html>
-
jQuery 实现滚动条下移时导航隐藏，上移显示 原理监听视口的滚动，获取到当前滚动条距离视口顶部的距离;定义一个变量，用于判断当前高度和上一次的高度;当前高度大于上一次，说明向下滚动，导航隐藏；当前高度小于上一次，说明向上滚动，导航显示。实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .header { position: fixed; width: 100%; top: 0; left: 0; height: 50px; background-color: #777777; z-index: 999; transition: top .4s; } .main { height: 2000px; margin-top: 60px; background: #98df25; width: 100%; } </style> </head> <body> <div class="header">向下滚隐藏，回滚显示</div> <div class="main"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> let previousTop=0; $(window).scroll(function () { let currentTop = $(window).scrollTop(); if (currentTop < previousTop) { $(".header").css('top', '0px'); } else { $(".header").css('top', '-60px'); } previousTop = currentTop; }) </script> </body> </html>
-
jQuery 滚动到一定位置时显示元素 scrollTop 语法$(selector).scrollTop(offset)定义和用法scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。offset 指的是滚动条相对于其顶部的偏移。如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。实现<style>.active{display:none}</style> <div class="active">显示元素，默认隐藏</div> <script type="text/javascript"> $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 200) { $(".active").fadeIn(100); } else { $(".active").fadeOut(100); } }); }); </script>
-
jQuery 实现TAB选项卡事件 原理点击上部的 li，当前 li 添加 current 类，其余兄弟移除类点击的同时，得到当前 li 的索引号让下部里面相应索引号的 item 显示，其余的 item 隐藏实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab-jQuery</title> <style> * { margin: 0; padding: 0; list-style: none; } .container { width: 600px; margin: 100px auto 0; overflow: hidden; } .tab_list { height: 30px; width: 600px; } .tab_list li { float: left; height: 30px; line-height: 30px; width: 200px; font-size: 20px; text-align: center; color: #ccc; background: green; cursor: pointer; } .tab_con li { display: none; height: 200px; width: 600px; background: pink; font-size: 100px; line-height: 200px; text-align: center; } .tab_list .current { background: red; color: #ccc; } .tab_con .item { display: block; } </style> </head> <body> <div class="container"> <ul class="tab_list"> <li class="current">标题1</li> <li>标题2</li> <li>标题3</li> </ul> <ul class="tab_con"> <li class="item">内容111</li> <li>内容222</li> <li>内容333</li> </ul> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $('.tab_list li').click(function () { var index = $(this).index(); $(this).addClass('current').siblings().removeClass('current'); $('.tab_con li').eq(index).show().siblings().hide(); }); </script> </html>效果
-
CSS3 绘制不同角度的三角形 原理设置宽和高为0实现不规则三角形#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } #triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } #triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }直角三角形#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } #triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; } #triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; } #triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }
