前端
关注
分享
扫一扫
枫雨血痕
初阶农民工，欢迎各位大佬互相探讨IT技术心得体会。
展开
-
dataTable列内容过长隐藏
需求：在dataTable的表格中，有时内容数据过长导致表格整体溢出界面。需要把过长的内容限定在一个范围。法1：设置td的css样式（缺点是不能看到所有数据）：td { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width: 300px;//最大宽度}法2：给返回的数据做截取，同时所有数据显示在title属性中，如："columns": [ {原创 2020-09-22 14:52:54 · 2809 阅读 · 0 评论 -
解决AdminLTE菜单栏点击子菜单后刷新页面导致菜单栏折叠的问题
需求：AdminLTE菜单栏点击子菜单后，会刷新页面，然后菜单栏就折叠了。体验不好！优化为即使页面刷新了原菜单栏保持点击前状态解决办法：直接在菜单栏所在文件新增以下脚本代码即可<script> $('.sidebar-menu li:not(.treeview) > a').on('click', function(){ var $parent = $(this).parent().addClass('active'); $parent原创 2020-08-13 11:38:28 · 2151 阅读 · 0 评论 -
向导插件bootstrap wizard入门使用
1.插件介绍插件使用环境配置：jQuery v1.3.2+Bootstrap 3.x下载链接:bootstrap wizard2. 导入文件你的项目需要导入以下文件：<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css" /><script src="/...原创 2020-04-13 16:44:08 · 2813 阅读 · 0 评论 -
select下拉框change事件切换内容
<html><header> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge...原创 2020-04-13 16:13:18 · 4971 阅读 · 0 评论 -
freemarker遍历数字、数组、List集合、Map集合
代码：遍历数字:<#list 1..10 as n> <span>${n} </span></#list><br>遍历数字-后台传值num:<#list 1..num as nn> <span>${nn} </span></#list><br>遍...原创 2019-12-25 10:51:28 · 3468 阅读 · 0 评论 -
网页特效之手风琴
效果:使用动画，当鼠标经过某张图片，该图片(容器)宽度变大显示，其他图片宽度缩小显示。关键知识：动画基本原理：盒子目标位置 = 盒子本身位置 + 步长具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴效原创 2018-08-29 20:31:39 · 1325 阅读 · 0 评论 -
JavaScript之动画原理
动画的基本原理：盒子目标位置 = 盒子当前位置 + 步长关键知识：定时器具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画基本原理</title> <s原创 2018-08-31 20:34:12 · 1384 阅读 · 0 评论 -
网页特效之点击跟随鼠标
效果：点击网页上随机一个点，图片中心移动到该点思路：使用onclick事件，对于鼠标在页面点击的点，通过clientX/clientY和offsetWidth/offssetHeight属性得到坐标，然后使用定时器使图片减速移动到该坐标。关键知识: 事件对象event,offsetWidth,offsetHeight具体代码： <!DOCTYPE html><ht...原创 2018-08-16 21:56:49 · 2655 阅读 · 2 评论 -
网页特效之进度条
效果：按住鼠标可以拖动进度条，鼠标弹起则不做任何效果思路：布局：大盒子scroll里有三个div，第一个是启动盒子(bar),第二个是填充(显示进度)盒子,对这两个盒子使用绝对定位让其left可改变js：对bar盒子使用onmousedown事件，通过计算得到鼠标按下点相对网页左侧距离,然后对document使用onmousemove事件，通过计算得到移动时鼠标位置相对scroll的距离,然...原创 2018-08-16 21:54:34 · 348 阅读 · 0 评论 -
scroll家族之scrollTop
scrollTop 被卷去的头部(它就是当你滑动滚轮浏览网页时网页隐藏在屏幕上方的距离)如何得到scrollTop:DTD:即html文件开头的<!DOCTYPE html>未声明DTD:document.body.scrollTop;//edge,chrome,firefoxdocument.documentElement.scrollTop;//仅ie支持...原创 2018-08-18 22:20:51 · 210 阅读 · 0 评论 -
网页特效之屏幕滑动
效果：点击任意一个li选项，滑动到相对应的屏幕页面思路：布局：对于每个li铺满整个浏览器可视区域，必须让其父级宽高都为100%;js: 使用for循环，对每一个li(属于ol盒子)点击时，使用定时器和window.scrollTo()方法实现内容滑动一个屏幕;关键知识：index索引号的使用,定时器setInterval,scrollTo()具体代码： <!DOCTYPE ...原创 2018-08-18 22:15:00 · 1443 阅读 · 0 评论 -
小技巧之验证文件格式
效果：选择文件后，得到文件格式并验证是否选择正确关键知识：onchange事件,字符串常用方法substr(),lastIndexOf()具体代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>验证文件格式&原创 2018-08-29 20:38:55 · 552 阅读 · 0 评论 -
网页特效之轮播图
第一步：静态布局轮播图组成部分：图片，底部圆点，左右箭头思路：整体容器为box盒子,用ul包含七张图片(注意ul宽度需略大于等于七张图片总宽度，第一张和第七张用于替换),使用浮动横向排列;使用定位布局底部圆点和左右箭头具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2018-09-01 10:30:05 · 2456 阅读 · 0 评论 -
网页特效之下拉菜单
思路：通过:hover伪类或onmouseenter事件在鼠标经过时改变二级菜单的display关键知识：:hover伪类/onmouseenter1.纯静态版具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&原创 2018-09-04 21:58:00 · 5130 阅读 · 0 评论 -
jquery之stop()浅析
stop(clearQueue,gotoEnd)stop()方法用于停止当前正在运行的动画。stop()两个参数皆为布尔值第一个参数决定是否清空动画队列第二个参数决定是否立即执行完/停止当前动画情况1：立即停止当前动画，执行动画队列里的下一个动画具体代码：<!DOCTYPE html><html><head><meta charse...原创 2018-09-05 21:03:16 · 428 阅读 · 0 评论 -
网页特效之旋转轮播图
思路：使用动画的形式，改变图片容器(定位元素)的width,top,left,opacity,z-index,达到立体效果。关键知识：用数组形式存储json数据，数组方法pop()、unshift()、push()、shift()具体代码：html文件：<!DOCTYPE html><html lang="en"><head> <m...原创 2018-09-18 09:44:26 · 869 阅读 · 0 评论 -
事件冒泡、事件捕获、事件委托
事件冒泡：事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档).即事件由最深的节点逐级向父级触发。如例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Event原创 2018-10-18 15:19:55 · 259 阅读 · 0 评论 -
javascript之字符串
常用的字符串方法：1）把其他类型的数据转换为字符串法1：使用"";法2：使用String()法3：使用toString(基数)；基数就是进制实例：var num = 15;console.log(typeof (num+''));//stringconsole.log(typeof String(num));//stringconsole.log(typeof num.toS...原创 2018-11-10 10:46:55 · 255 阅读 · 0 评论 -
ajax之仿百度智能搜索
在使用搜索引擎时，我们常常在输入框输入时下方出现相关推荐词，这是通过ajax异步请求实现的。实现思路：通过得到输入输入框的值，然后使用百度的智能搜索接口发送ajax请求，得到返回的数据，并使用列表展现关键知识：ajax,jsonp,keyup事件具体代码：<!DOCTYPE html><html lang="en"><head> <...原创 2018-11-13 14:12:27 · 577 阅读 · 0 评论 -
ajax之菜谱案例
思路：使用jQuery中的ajax方法，并使用jsonp,得到来自聚合数据返回的菜单数据，然后动态生成标签嵌套数据。关键知识：jQuery中ajax(),jsonp具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&原创 2018-11-16 16:22:34 · 589 阅读 · 0 评论 -
网页特效之固定导航栏
效果：当页面产生滚动时，导航栏固定在浏览器可视区域顶部思路：首先得到导航栏的offsetTop或导航栏上面区域的整体盒子的offsetHeight,然后与页面的滚动距离scrollTop比较，大于则固定，小于则取消固定。关键知识：scrollTop,onscroll事件具体代码：<!DOCTYPE html><html lang="en"><head&...原创 2018-08-18 22:04:22 · 4201 阅读 · 0 评论 -
网页小技巧之垂直滚动条
效果：模仿滚动条思路：布局：以box盒子为主体，content盒子包含内容，scroll盒子为滚动条区域，bar盒子为滚动条，使用定位调整位置js:通过计算得到对于已显示内容的滚动条长度。滚动条做onmousedown事件，通过计算使滚动条移动时内容移动相对应的距离。并使用window.getSelection ? window.getSelection().removeAllRanges(...原创 2018-08-18 21:55:37 · 555 阅读 · 0 评论 -
网页特效之鼠标展示
效果：每当鼠标移动到该图片，展示该图片的大图效果图：思路：给div的padding-top值和大图高度一样，并以大图做该div背景使用onmouseover事件使鼠标移动到图片上时更换div背景具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2018-06-15 18:21:07 · 536 阅读 · 0 评论 -
盒子模型浅析
这篇文章总结了有关盒子模型的知识，助于梳理知识首先，什么是盒子模型我们知道，html文档中，基本上每个元素都可以看作一个盒子，我们称之为盒子模型。盒子模型的组成盒子模型包含四个重要的部分：content(width、height):盒子内容宽高padding:内边距(填充)border:边框margin:外边距重点：对于盒子来说，设置的宽高和真实占有宽高是不一样的如图（一般我们以标准盒子模型为主学...原创 2018-06-07 21:32:34 · 196 阅读 · 0 评论 -
小技巧之全选和反选
思路：使用for循环遍历input选项框，然后使用input的复选框的checded属性实现选中和取消。关键知识：for循环、input复选框具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选和反选&l原创 2018-06-21 20:02:04 · 356 阅读 · 0 评论 -
getElementById、getElementsByTagName、getElementsByClassName复合使用浅析
最近遇到一个关于查找元素的问题，有的时候单独使用getElementById、getElementsByTagName、getElementsByClassName并不足以找到需要的元素，于是我就查找并检测了其复合使用的情况于此记录，以便日后自己使用。<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2018-06-20 19:37:59 · 2388 阅读 · 0 评论 -
块级元素和行内元素
一直对块级元素和行内元素的区别和特性有点模糊，于是各方参考总结一下，方便自己梳理知识：首先说一下什么是块级元素和行内元素块级元素，指自动占一行的元素，下一个元素（标签）会在新行开始，这行就是这个块级元素的地盘。例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti原创 2018-05-29 13:07:02 · 765 阅读 · 0 评论 -
小技巧之向下箭头
思路：使用◇符号（可在输入法的软键盘找到该符号），使用定位选择位置，并隐藏溢出的上半部分细点：1.使用i标签的楷体属性把◇变大2.给i只有◇符号一半的高度，并隐藏溢出，正常显示一个向上箭头3.对s使用绝对定位，使用top属性并为负值使i容器显示向下箭头<!DOCTYPE><html><head> <meta charset="utf-8">...原创 2018-05-16 22:12:56 · 4435 阅读 · 0 评论 -
小技巧之利用position属性实现内嵌背景
思路：利用定位属性position实现主要内容下含一张大的背景图。首先，建立一个类名为bg的div用于存放背景图片，该背景图片是这个div下a标签的背景，这样这个背景就可以点击跳转。然后建立和该div为兄弟节点的另一个div，类名为content,类名为content的div用于实现各种具体页面；要实现背景图片不占位置，使用定位position:absolute;因为如果它占位置，那么具体内容（类...原创 2018-05-22 09:47:13 · 523 阅读 · 0 评论 -
前端是什么
此为小白浅显整合：一直以来，对前端一直是一个笼统的概念，于是，专门花时间整合了网上各种说法，给自己一个较正确的定位。前端是什么？？前端，也称web前端。对于网站来说，通常是指网站的前台部分，包括网站的表现层和结构层（通俗点就是用户可以看到的部分）。总结一下，浏览器、APP、应用程序的界面展现和用户交互就是前端前端能干什么？？前端工程师，别称web前端开发攻城狮，是在2005年由淘宝发明出来的称呼。...原创 2018-05-06 10:26:22 · 18698 阅读 · 1 评论 -
网页特效之点击隐藏文字+鼠标经过表单
效果：当第一次点击input文本框时，原本默认的文本隐藏，然后可自由输入文本，如果有输入的文本，鼠标经过input文本框时，默认全选文本内容，以便删除；点击文本框可取消全选。关键知识：onfocus事件、onblur事件、onmouseover事件、select()方法具体代码：<!DOCTYPE html><html lang="en"><he...原创 2018-06-16 11:21:55 · 539 阅读 · 0 评论 -
网页特效之遮罩弹出
在各种网站中，经常遇到点击注册/登录,然后使用遮罩并弹出注册/登录的界面。思路：使用id为mask的盒子作为遮罩盒子，该盒子继承body的宽高，使用半透明黑色背景。使用id为box的盒子作为弹出界面，该盒子还包含一个关闭按钮。当我们点击一下注册按钮时，网页被mask盒子遮盖，并且在页面正中间出现界面box盒子关键点：display: none;和display:block的转换层级z...原创 2018-06-10 17:16:13 · 481 阅读 · 0 评论 -
网页小技巧之星座运势
思路：使用select下拉菜单选择各种不同星座，然后用对应的onchage事件改变对应的星座图片和今日运势和内容详解。关键知识：select元素，onchange事件，定位（用定位实现运势星星颗数的增减)具体代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2018-07-23 23:22:15 · 769 阅读 · 0 评论 -
网页特效之放大镜
效果：当鼠标在小图上方时，在右边显示放大的图片思路:css布局：在大盒子box里，放入两个盒子small(放小图)和big(放大图),并在small里放一个用来显示放大区域的半透明盒子mask;然后利用定位布局mask和big的位置js：使用onmouseover/onmouseout事件显示/隐藏big盒子和mask;使用onmousemove事件设定mask盒子位置和显示big盒子里的放...原创 2018-08-15 21:39:27 · 1758 阅读 · 0 评论 -
网页特效之筋斗云
效果：当鼠标移动到导航栏的一项菜单时，云彩背景跟着移动，鼠标离开则返回第一项菜单;当有点击事件发生时，云彩停留在点击的那项菜单，再次移动到其他项菜单时，鼠标离开返回到上一个发生点击的那项菜单。关键知识：setInterval(),offsetLeft,position定位具体代码：<!DOCTYPE html><html lang="en"><head...原创 2018-08-15 21:36:28 · 720 阅读 · 0 评论 -
网页小技巧之保留小数
此以保留两位小数为例思路：法1:先把数字转换为字符串，使用indexOf()得到小数点在字符串位置，使用slice()或substr()截取字符串；法2:数值乘100后取整除10法3：直接使用方法toFixed()；该方法自带四舍五入关键知识：indedOf(),slice(),substr(),parseInt(),toFixed()具体代码：<!DOCTYP...原创 2018-08-14 21:09:05 · 532 阅读 · 0 评论 -
offset家族
offset家族作用:用于得到元素尺寸1.offsetWidth和offsetHeightoffsetWidth: 得到对象的宽度(自己的,与他人无关);offsetWidth=width+border+paddingoffsetHeight: 得到对象的高度(自己的,与他人无关);offsetHeight=height+border+padding注意：style.width...原创 2018-08-14 20:59:37 · 269 阅读 · 0 评论 -
网页小技巧之日历
思路：使用日期函数Date()获得当前的年月日和星期关键知识：日期函数Date()获取日期和时间getDate() 获取日 1-31getDay () 获取星期 0-6 getMonth () 获取月 0-11getFullYear () 获取完...原创 2018-07-21 22:16:07 · 428 阅读 · 0 评论 -
网页特效之tab栏切换
思路：使用排他思想，每当鼠标移动到一个tab选项卡时，清空所有选项卡类名，然后给当前选项卡添加类名，达到使对应的tab内容显示的目的。关键知识：排他思想，for循环中使用自定义索引属性index得到i具体代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title...原创 2018-07-21 22:14:22 · 1471 阅读 · 0 评论 -
网页特效之时钟
思路：首先使用定位功能把时钟、时针、分针、秒针聚合，然后使用日期函数得到当前时间的时分秒和毫秒，然后使用css3属性transform和旋转函数rotate()改变角度，达到使针转动的目的。关键知识：position定位，日期函数Date()获得当前时分秒的使用，transform属性具体代码：<!DOCTYPE html><html lang="en">&...原创 2018-07-24 22:17:19 · 805 阅读 · 0 评论