web前端学习总结
文章平均质量分 72
queena~不一样的烟火
这个作者很懒,什么都没留下…
展开
-
移动端 顶部折叠导航 a标签锚点位置偏移
效果如下:点击某个导航后,会跳转到本页面a标签锚点位置。PC端a标签锚点href="#id"方式,在移动端或者angular下不管用,解决方法如下原创 2020-09-15 10:06:03 · 610 阅读 · 0 评论 -
swiper轮播+动画+蒙版特效
实际效果非常棒,此版本兼顾了PC端和移动端。贴了所有代码供参考。。。1、上层添加蒙版图片2、底层是swiper轮播图3、每个轮播图在切换前由左向右移动原创 2020-08-05 16:55:29 · 1477 阅读 · 0 评论 -
swiper层叠滑动轮播
六个图层叠轮播,连续滑动原创 2020-08-05 16:37:40 · 3509 阅读 · 0 评论 -
DevTools failed to load SourceMap 警告处理方法
报类似错误,解决方法如下根据上面出现的路径去找对应的文件,通常在文件末尾,然后删除红色框框的内容就可以了原创 2020-08-05 09:06:16 · 26518 阅读 · 5 评论 -
页面随鼠标滚动,侧边导航栏固定位置,链接跳转到页面指定位置
上一篇文章中详细介绍了a标签锚点的使用,实现链接跳转到指定位置功能,重点解决了当网页header固定fixed的情况,跳转位置有所偏移的问题,需要的同学可以查看https://blog.csdn.net/liuminyi1987/article/details/105787187本篇介绍如下左侧导航栏固定,且每个链接是a锚点。HTML代码:<div class="mprobedx-left reagent-left" id="scrolldiv" > <u原创 2020-05-27 10:39:42 · 4950 阅读 · 0 评论 -
a标签锚点位置偏移(页面顶部有fix header)
写页面的时候,用到了锚点链接<a href="#section1"></a>,但是发现点击a到对应的section的时候,不能到section的上面,会到section中的某个位置,一开始我以为是元素内容部的margin或者h1的问题,后来通过console.log()输出高度等发现了原因:最上面的nav 加了属性position:fixed的原因———虽然元素被fixed...转载 2020-04-27 11:47:21 · 3113 阅读 · 1 评论 -
vue+fetch+springMVC实现数据交互
经过3天的努力,网上参考了各种方法,终于误打误撞的解决了前后台数据交互的问题,虽然还有很多地方不知其所以然,但还是先写出解决方法,还请大牛们指教。1、首先新建vue工程,写代码,我只写了一个简单页面,代码如下:<template> <div class="hello"> <h1>{{ msg }}</h1> <h2...原创 2018-08-08 14:29:58 · 1556 阅读 · 0 评论 -
页面链接location.href用法
可以用在iframe框架里面。*.location.href 用法: top.location.href=”url” 在顶层页面打开url(跳出框架) self.location.href=”url” 仅在本页面打开url地址 parent.location.href=”url” 在父窗口打开Url地址 this.location.href=”u...转载 2018-06-01 13:54:05 · 453 阅读 · 0 评论 -
checkbox类型input获取选中值和设置选中状态
设置选中状态JS代码:var listcheck = document.getElementsByName("btn_check");//获取checkbox列表 for(var i=0;i<listcheck.length;i++){ if(listcheck[i].value == result["personid"]){//判断条件 li...原创 2018-06-07 15:24:48 · 25420 阅读 · 2 评论 -
bootstrap datetimepicker的用法以及小箭头不能显示的问题
使用时间控件时需要把CSS和js引用都加上,加上bootstrap-datetimepicker.zh-CN.js在使用的时候才可以选择使用中文。<script type="text/javascript" src="././js/public/bootstrap-datetimepicker.zh-CN.js"></script>我使用的是bootstrap-dateti...转载 2018-03-20 15:55:22 · 4224 阅读 · 3 评论 -
模态框拖拽可移动
js代码: /** 拖拽模态框*/ var dragModal={ mouseStartPoint:{"left":0,"top": 0}, mouseEndPoint : {"left":0,"top": 0}, mouseDragDown : false, basePoint ...原创 2018-03-06 09:22:31 · 2419 阅读 · 0 评论 -
echarts图表自适应,容器宽度设置为百分数,但是图表显示不全,缩到一起
问题如下:在tab切换的时候发现第二个tab页面的图表显示不全,缩到了一起。添加window自适应方法不管用,如下: mychart.setOption(option); $(window).resize(function() { //重置容器高宽 mychart.resize(); });各种搜索这个问题,找到了方法。先借鉴大牛解释出现这个问题的原因:查了一下echarts源码,发现了这个Pa...原创 2018-03-22 14:52:58 · 46460 阅读 · 5 评论 -
文件导入 隐藏file类型input控件并获取返回值
HTML:实现点击【导入】按钮就能够上传文件,代码如下:<a oppower="Export|导出" class="btn btn-default" iconcls="icon-reload" id="btnExport" group="" onClick="" style="margin-left:4px;"><span cl原创 2018-03-05 16:48:40 · 1779 阅读 · 0 评论 -
radio类型input获取选中值和设置选中状态
HTML:<td align="left" colspan="3"><input type="radio" style="width:40px" name="h_Live" id="h_Live1" value="独自居住" >独自居住<input type="radio" s原创 2018-03-05 16:33:44 · 10459 阅读 · 0 评论 -
给button绑定click事件时,出现ajax请求时,一次点击两次提交的问题解决
原文链接:http://blog.csdn.net/qingche456/article/details/62059433ajax请求时,一次点击两次提交的问题解决原代码<script> $(function(){ $('#jsStayBtn').on('click', function(){ $.ajax({ ...转载 2018-03-16 10:03:41 · 8678 阅读 · 0 评论 -
js上传照片,预览,压缩后base64编码发送后台,及将后台返回的base64图片显示到HTML
显示效果如下,点击上传,选择任意图片,压缩到设定的图片大小并显示,压缩后发送给后台。HTML:<th align="center" rowspan="4"> <span style="color:red">*</span>照片:<br><input type="file" value="原创 2018-03-07 15:08:29 · 2559 阅读 · 0 评论