标签搜索
搜索到
447
篇与
小王先森
的结果
-
-
-
jQuery + CSS 实现侧边栏左侧滑入滑出动画 需求点击某个图标或文字时，从左侧滑入侧边栏，再次点击滑出。实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery + CSS 实现侧边栏左侧滑入滑出</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #sidebar { position: fixed; height: 100%; width: 200px; left: -200px; background: #34be56; z-index: 9; } </style> </head> <body> <div class="nav">显示/隐藏</nav> <div id="sidebar"> <div>菜单1</div> <div>菜单2</div> <div>菜单3</div> <div>菜单4</div> </div> </body> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> //isHiden只是返回部件的隐藏属性，并不能表示部件当前的真实状态。 isHiden = true; $(".nav").click(function () { if (isHiden) { $('#sidebar').animate({ left: '0' }).show();//菜单块向右移动 } else { $('#sidebar').animate({ left: '-200px' }); //菜单块向左移动 } isHiden = !isHiden; }) </script> </html>效果
-
flex 九宫格布局 基本概念采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器属性以下6个属性设置在容器上。flex-direction flex-wrap flex-flow justify-content align-items align-content项目属性以下6个属性设置在项目上。order flex-grow flex-shrink flex-basis flex align-self布局实例九宫格布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .box { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-evenly; } .box div { flex: 0 1 380px; height: 200px; margin: 15px; background: #34ce57; } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>展示效果
-
-
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>效果
-
-
-
