首页
分类
杂记
笔记
随记
闲说
关于
其他
友联
留言
归档
登 录
Search
1
Typecho 后台美化插件——WangStyle
39,630 阅读
2
第三期全国中小学校党组织书记网络培训示范班学习心得
5,180 阅读
3
Typecho 主题——Joe 使用文档
3,773 阅读
4
JOE 主题小王先森改版
2,502 阅读
5
一个多引擎搜索主页
2,348 阅读
标签搜索
jQuery
后台美化
小王先森
累计
343
篇文章
收到
952
条评论
首页
栏目
杂记
笔记
随记
页面
闲说
关于
更多
友联
留言
归档
登录
登 录
笔记
共 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 判断,点击非本区域或遮罩层时隐藏侧边栏
2021年04月01日
2
0
2021-04-01
word 对齐表格中的两个字与三个字
在 word 中,针对两个字与三个字的排版,我们怎么让他自动对齐而不是用空格呢?其实,方法很简单。这里利用到了“段落”对话框里的对齐方式(分散对齐)与字符缩进(左右设置一样才能居中对齐)。操作步骤选中需要操作的对象打开“段落”对话框在常规下,设置对齐方式为分散对齐在缩进下,将左侧与右侧的缩进字符设置相同确定即完成动态操作
2021年04月01日
2
0
2021-03-27
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>效果
2021年03月27日
1
0
jQuery 判断页面元素是否存在
jQuery 选择器获取页面的 element 时,无论 element 是否存在,都会返回一个对象。<script> if($('div a').length > 0){ $('div').show(); } else { $('div').hide(); } </script>写好一个 div 元素,当元素下存在 a 元素时显示,否则隐藏。
2021年03月26日
0
0
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>
2021年03月25日
1
0
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>
2021年03月25日
0
0
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>
2021年03月18日
2
0
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>
2021年03月18日
0
0
2021-03-16
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>效果
2021年03月16日
1
0
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; }
2021年03月12日
0
0
1
2
3
首页
闲说
归档
关于