![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
说学逗唱攻城狮
这个作者很懒,什么都没留下…
展开
-
uniapp:实现tabs(scroll-view)点击左右滑动
uniapp:实现tabs(scroll-view)点击左右滑动转载 2023-02-22 18:02:03 · 2004 阅读 · 0 评论 -
【无标题】
jq实现横向tab分类切换自动居中原创 2023-01-18 12:02:45 · 65 阅读 · 0 评论 -
jq 复选框全选、全不选。
全选、全不选原创 2022-09-13 16:40:22 · 123 阅读 · 0 评论 -
table 设置每列等宽table-layout: fixed;后 td设置宽度无效
table 设置table-layout:fixed; td 宽度失效原创 2022-08-24 14:11:50 · 835 阅读 · 0 评论 -
判断页面 向上滚动还是向下滚动 显示导航
页面 向上滚动还是向下滚动 显示导航原创 2022-07-07 15:11:44 · 272 阅读 · 0 评论 -
table 固定列 纯css 上下滚动固定 顶部 th ,左右滚动固定 第一列 td
table 固定列原创 2022-06-07 17:07:52 · 918 阅读 · 1 评论 -
仿地图上拉下滑抽屉盒
展开里面的内容可进行滚动,当里面的内容共滚动到顶部时进行收缩。项目目前较紧急,还有很多地方需要完善,暂时记录下。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title&g.原创 2022-05-17 14:41:27 · 258 阅读 · 0 评论 -
Google浏览器记住密码,自动填充后去除背景色,input内容填入样式变黑问题
google浏览器记住密码之后,账号密码框自动填充到input当中,输入框的背景色为白色,color为黑色,目标是去除这些自动填充之后的默认样式。 input:-webkit-autofill { -webkit-text-fill-color: #ededed !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; background-color:tra原创 2022-03-30 09:33:51 · 1163 阅读 · 0 评论 -
单个标签向上逐个滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=u.原创 2021-11-18 14:53:05 · 99 阅读 · 0 评论 -
转载:阮一峰的网络日志 —— Flex 布局教程:语法篇
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法。网转载 2021-11-09 14:33:00 · 904 阅读 · 0 评论 -
jquery.watermark.js 在网页中添加水印,打印时水印背景不见了,办法来了
如果不加下面的重点内容,打印预览的就没有水印,水印会被压在底下,当然可以手动选择背景,但是这样水印就没有意义了。**重点来了/* 谷歌浏览器 /-webkit-print-color-adjust: exact;print-color-adjust: exact;/ 火狐浏览器 */color-adjust: exact;**页面css@charset "utf-8";/* html { background: #fcfcfc;} */.data-table { prin.原创 2021-11-09 12:04:10 · 5558 阅读 · 3 评论 -
echarts 柱形图自动循环滚动
<!-- THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-gradient--><!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <b.原创 2021-10-21 09:50:35 · 3753 阅读 · 4 评论 -
fullpage.js 关闭鼠标滚动事件
// 删除鼠标滚轮控制 $.fn.fullpage.setAllowScrolling(false); // 删除键盘方向键控制 $.fn.fullpage.setKeyboardScrolling(false);原创 2021-10-15 16:39:53 · 834 阅读 · 0 评论 -
css3+js 绘制小圆跟随中心圆
围绕中心圆画图,左边各大办公设置为定时旋转,每5秒进行切换,最右边显示相对应的说明文字。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .section { position: absolute; top: 0;原创 2021-10-15 16:38:38 · 421 阅读 · 0 评论 -
移动端页面第一个元素margin-top出现滚动条
移动端页面元素未超过页面高度出现滚动条,页面的第一个元素在与页面顶部重合,重合后的页面元素margin-top导致的页面被拉长到margin-top的高度上,从而导致页面出现滚动条。我当前页面的第一个元素就是 .order-contacts 这个dom,当我给一个margin-top之后页面重合,所以在这个元素的父级元素上给样式来改变盒模型box-sizing: border-box;border: 1px solid transparent;把元素和页面分隔1个像素,之后就不会影响页面的高度。原创 2021-07-14 10:49:34 · 1196 阅读 · 0 评论 -
获取从当前时间开始后七天
// 获取 从 今天起 后七天const temp= [];for (let i = 0; i < 7; i++) { const time = new Date(new Date().setDate((new Date().getDate() + i) )); // const year = time.getFullYear(); const month = `0${time.getMonth() + 1}`.slice(-2); const strDate = `0${time.get原创 2021-06-16 11:00:31 · 343 阅读 · 0 评论 -
bootstrap框架container导致页面X轴出现横向滚动条
html {overflow-y: scroll;}body {width: 100%;overflow: hidden;}原创 2021-02-26 15:53:07 · 365 阅读 · 0 评论 -
纯css流畅侧滑
鼠标 hover 到侧边区域时,滑出广告<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"原创 2021-01-20 17:42:54 · 176 阅读 · 0 评论 -
主页单条消息提醒轮播,向上滚动
单条消息提醒可根据自己想要显示的时间和滚动的速度进行调整.xl-schedule { margin: 15px 10px; padding: 10px; background: #fff; border-radius: 8px;}.xl-meet { font-style: italic;}.xl-red { color: red;}.xl-notice { padding: 2px 10px; margin: 0 4px; border: 1px .原创 2021-01-14 15:34:25 · 179 阅读 · 0 评论 -
原生js无限循环单条向上滚动
body { background-color:#FFFFFF;}.out { overflow:hidden; height:21px; margin-top:50px; padding-left:20px;}<div class="out" id="roll"> <div>第一屏滚动的文字</div> <div>第二屏滚动的文字</div> <div>第三屏滚动的文字</div&g.转载 2021-01-06 11:41:44 · 322 阅读 · 1 评论 -
css画出三角形,√,×
<style> .triangle { display: inline-block; margin-bottom: 10px; width: 0; height: 0;}.top { border: 50px solid #eaeaea; border-top-color: #ffc0cb;}</style><div class="triangle top"></div><style>.triangle.原创 2020-12-11 17:09:59 · 332 阅读 · 0 评论 -
好看的下拉选择到保存到div上,仅css
<style> .radio-company { padding: 0.47rem 0.8rem; cursor: pointer; min-height: 38px; border: 1px solid #DFE3E7; border-radius: 0.267rem; } .radio-ul { display: none; padding: 5px 10px; border: 1px solid #DFE3E7; } .radio-li { p原创 2020-12-10 11:22:48 · 77 阅读 · 0 评论 -
jquery实现模糊查询
前端实现下拉模糊查询实例,只能选择存在的数据,不存在的数据不能选择也不能输入<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>面向对象(下拉框 与 模糊搜索)</title> <link rel="stylesheet" href=原创 2020-08-20 17:30:10 · 1493 阅读 · 0 评论 -
修改微信小程序单选,复选框样式
xml <label class="checkbox"> <checkbox checked="checked" disabled />获取您的公开信息(头像、昵称)等 </label>xss/*复选框外框样式*/checkbox .wx-checkbox-input { width: 8px; height: 8px; bo...原创 2020-05-06 11:55:06 · 365 阅读 · 0 评论 -
当display:none;遇到overflow:hidden页面内容高矮不齐
当display:none;遇到overflow:hidden;文本会高出一截有两种方案:所有的都使用overflow:hidden;使用vertical-align: bottom,就可以解决。这是为什么呢?因为overflow:hidden和display: inline-block一起使用时会造成baseline的移动,所以高度就变得不一样了使用vertical-align: b...原创 2020-03-07 16:34:56 · 999 阅读 · 2 评论 -
css3从下往上展开显示效果
一个简单的css3从下往上显示效果,想要的这种感觉的效果一直没找到,自己写了一个记录一下,也方便以后需要直接拿过来使用。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maxi...原创 2020-01-15 10:45:55 · 4662 阅读 · 0 评论 -
微信小程序伸缩样式,所点击的某项展开/收缩
定义一个数组对象,数据中保存字段isOpen作为当前项是否为展开。每点击一次给当前点击项赋一个相反值,来设置展开收缩。xml:<view class="wx-app-item" wx:for="{{projects}}" wx:for-item="items" wx:key="key"> <view> <view class="wx-item...原创 2020-01-03 09:43:33 · 3515 阅读 · 0 评论 -
js原生获取系统当天时间从00:00点到23:00
// 设置默认开始时间var curr_time = new Date();var startTime = curr_time.getFullYear()+"-";startTime += curr_time.getMonth()+1+"-";startTime += curr_time.getDate()+" “;startTime += curr_time.getHours()+”:...原创 2019-06-03 15:47:21 · 1635 阅读 · 0 评论 -
遍历获取的字符串并用逗号分隔,最后后一个元素去掉逗号
function getChecked() { var sheets = ""; var checkedBox = $('input[name=ck]:checked'); /** * 定义一个字符串 * 遍历所有选中的 checkbox 用逗号分隔存入字符串中 * */ checkedBox.each(function() { she...原创 2019-04-24 15:58:53 · 3417 阅读 · 0 评论 -
jq 字符串最后一个元素去除逗号
jq 字符串最后一个元素去除逗号var str ="1,2,3,4,5,";var lastIndex = str.lastIndexOf(',');if (lastIndex > -1) { str = str.substring(0, lastIndex) + str.substring(lastIndex + 1, str.length);}...原创 2019-04-24 15:53:41 · 2895 阅读 · 0 评论 -
css动画 右往左显示 侧边小提示会话隐藏 兼容ie8
<!DOCTYPE ><html> <head> <title>侧边信息隐藏</title> <meta charset="utf-8" /> <style> .div-fixed, .div-look-btn, .div-content { hei...原创 2019-04-16 12:05:56 · 259 阅读 · 0 评论 -
利用jq实现横向tab分类切换自动居中
css:用flex布局自动处理浮动,也不用去计算ul的宽度。js:1.当前点击的li距离屏幕左边的距离2.li的宽度的一半3.总屏幕宽度的一半4.当前滚动条滚动的距离最后结果:当前滚动条滚动的距离+(当前点击的li距离屏幕左边的距离-总屏幕宽度的一半)+li的宽度的一半效果如图:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&g原创 2018-11-29 16:30:47 · 1720 阅读 · 0 评论 -
对移动端的基于根元素rem单位理解
以前一直听过rem自适应布局对移动端的友好,一直觉得px也可以用就没有去理解使用,最近接到一个新项目,混合app的,然后就开始自我审视,px好像满足不了了现在的界面要求了,好吧,开始埋头干,终于找到一篇让我清楚的文章了:https://www.html.cn/book/css/values/length/rem.htm这个文章只是能够让你知道这个怎么用,具体的理解还是看个人,以下是我看了文章后...原创 2019-07-18 15:39:23 · 617 阅读 · 0 评论 -
相册不规则图片显示,等比缩放大小一致
最近在写一个项目的时候需要展示用户上传的图片,但是图片的大小比例都不对,导致显示的时候大小不一,在网上查了一个css3的样式 object-fit,注意不兼容任何版本的IE。MDN写的有详细解释:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit#CSS一看就懂,一写就懵。这里要注意的是图片 img 必须定宽高,要不然 ...原创 2019-07-12 11:09:57 · 225 阅读 · 1 评论 -
网站上显示地图上的地址,标注图标挂了如何显示?解决了
1、打开以下网址,看到是百度地图的http://api.map.baidu.com/lbsapi/creatmap/2、根据你想显示的地点进行选择,其次点击获取代码放到你的本地上运行就可以了。之后你会发现那个标注的地方图片是挂掉的,把下面的两个方法拿过去替换掉你从百度上获取的那两个方法,标注的图片就出来了。亲测有效!!! //创建InfoWindow function cr...原创 2019-08-20 18:11:46 · 332 阅读 · 0 评论 -
点击事件调用时传递参数
字符串点击事件传递变量参数写法return '<img src="images/control_start_blue.png" style="cursor:hand" width="15px" height="15px" onclick="sendMsg(\''+setname+'\');" >';原创 2019-08-16 17:08:38 · 1472 阅读 · 0 评论 -
js 变量相加求和
在 js 中数值中存在变量的 “+” 号都代表拼接;当 Number() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 Number 对象。如果不用 new 运算符,把 Number() 作为一个函数来调用,它将把自己的参数转换成一个原始的数值,并且返回这个值(如果转换失败,则返回 NaN)。创建 Number 对象的语法:var myNum=new Number(valu...原创 2019-08-29 14:31:03 · 4080 阅读 · 1 评论 -
jquery 加载公用部分的头部,底部
jquery加载共同部分的代码直接有一个 load 方法,把需要抽出去用做公用部分的地方用一个标签包裹起来,然后进行调用。切记:被调用的公用部门是html文件,且文件中不写html头,直接写需要加载的部分就可以了,否则会出现报错或者页面加载不出来的情况。这是加载简单的公用部分,如果是加载有复杂逻辑,操作的公共部分还得用iframe进行处理。其次看了很多文章说是load可能会存在跨域的问题,但是...原创 2019-09-06 17:24:57 · 1739 阅读 · 0 评论 -
判断函数方法是否传入变量,没有则设置默认变量值
以下函数方法调用时,传递参数,若不传递则为0,传递则是传过来的值。settime = settime ? settime : 0;( 三目运算赋值 )原创 2019-09-10 09:41:39 · 287 阅读 · 0 评论 -
mui 页面报错Unable to preventDefault inside passive
点击事件时出现:mui.min.js:8 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080解决方法:在样式文件...原创 2019-09-27 10:02:02 · 1031 阅读 · 0 评论