![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 50
qq_23944441
最美的不是生如夏花,而是在时间的长河里波澜不惊。
展开
-
最新前端速查表集合(CSS动画Bootstrap4)
转载:http://sc.chinaz.com/info/161209294367.htm分享的速查表是目前最新流行的前端速查表(Cheat sheet),包含:Css3 Flexbox、ES6、jQuery 3 以及最新的 Bootstrap 4,前端人员可以将这些当作是备忘表或速记手册,使用时可以快速查阅,相当便捷。Flexbox Cheatsheet Cheatsheet这里通过问答对话形式...转载 2018-03-19 14:11:58 · 1787 阅读 · 0 评论 -
精选9个值得学习的 HTML5 效果【附源码】
出处:http://www.cnblogs.com/lhb25/p/9-html5-effects.html这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的Web 应用。超炫 HTML5 粒子效果进度条 我喜欢粒子效果作品,特别是那些能够...转载 2018-04-18 13:53:28 · 412 阅读 · 0 评论 -
Web 开发中很实用的10个效果【源码下载】
出处:http://www.yyyweb.com/350.html在工作中,我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的。这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏!超炫的页面切换动画效果今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画,可以被应用到页面切换过...转载 2018-04-18 14:00:29 · 187 阅读 · 0 评论 -
纯CSS3属性animation实现的打字效果
出处:https://blog.csdn.net/u013018357/article/details/50765707<h1 class="word title-h">文字内容,打字效果。。。</h1>1css样式.word{ text-align: center; color: black; width:100%; white-space...转载 2018-04-23 13:55:49 · 1721 阅读 · 0 评论 -
常用正则表达式
1.Email验证 emailfunction isEmail(obj) { reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/ if (!reg.test(obj)) { window.alert("请输入有效合法的E-mail地址 !") return fa...原创 2018-05-10 15:06:03 · 121 阅读 · 0 评论 -
JS字符串转换为JSON的四种方法笔记
1、jQuery插件支持的转换方式: 示例: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2、浏览器支持的转换方式(Firefox,chrome,opera,safari,ie)等浏览器: 示例: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.s...转载 2018-05-10 15:47:55 · 122 阅读 · 0 评论 -
word-wrap同word-break的区别
white-space作用于空格和回车,用于控制空格是否合并、回车是否可折行、句子太长是否在空格处折行常用取值不同的作用 normal: 多个连续的空格会被合并为一个,回车会被忽略,同时句子如果太长,会在空白处折行nowrap: 与normal不同的一点是如果句子长了也不会折行常用的省略号的实现.classA { text-overflow:ellipsis; white-spac...转载 2018-04-27 17:09:56 · 213 阅读 · 0 评论 -
js中push(),pop(),unshift(),shift()的用法小结
1、push()、pop()和unshift()、shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容。 不同的是 push()、pop() 是从数组的尾部进行增减,unshift()、shift() 是从数组的头部进行增减。 var arr = [1, 2];2、push()和unshift() 向数组的 尾部/头部 添加若干元素,并返回 数组的 新长度; arr.p...转载 2018-05-25 15:22:25 · 328 阅读 · 0 评论 -
前端chrome浏览器调试总结
转载:https://www.jianshu.com/p/b25c5b88baf5一.先来认识一下这些按钮的功能先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态2.设备图标:点击它可以切换到不同的终端进行开发模...转载 2018-05-16 17:51:49 · 149 阅读 · 0 评论 -
js 中日期时间的大小比较
<body> 开始时间:<input id="startTime" name="startTime">到 结束时间:<input id="endTime" name="endTime"> <input type="button" onclick="checkTime()" v转载 2018-06-21 16:15:07 · 1390 阅读 · 0 评论 -
js只保留整数,向上取整,四舍五入,向下取整等函数
1.丢弃小数部分,保留整数部分parseInt(5/2)2.向上取整,有小数就整数部分加1Math.ceil(5/2)3,四舍五入.Math.round(5/2)4,向下取整Math.floor(5/2) Math 对象的方法 方法 描述 abs(x) 返回数的绝对值 acos(x) 返回数的反余弦值 asin(x) 返回数...转载 2018-06-20 12:08:13 · 301 阅读 · 0 评论 -
Bootstrap 栅格系统布局 .col-lg- .col-md- .col-sm- .col-xs-
Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列。 栅格系统用于通过一系列的行(row)与列...转载 2018-04-12 16:01:47 · 4146 阅读 · 0 评论 -
移动端的头部标签和meta,[html5]移动端的头部标签和meta属性详解
移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签,需要的朋友可以参考前言meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的...转载 2018-04-02 17:30:37 · 1031 阅读 · 0 评论 -
css bootstrap鼠标移到图片 放大
img{cursor:pointer;transition:all0.6s;}img:hover{transform:scale(1.4);}<divstyle="float:left;margin:10px;overflow:hidden;">&...原创 2021-08-14 15:21:05 · 2688 阅读 · 0 评论 -
前端笔试题面试题记录(上)
https://juejin.im/post/5aad40e4f265da237f1e12ed转载 2018-03-19 15:42:33 · 166 阅读 · 0 评论 -
bootstrap中将菜单改为鼠标滑过(bootstrap-dropdown-hover插件)
出处:https://www.cnblogs.com/EnderH/archive/2016/04/09/5371712.htmlgithub:bootstrap-dropdown-hover点击下载bootstrap的下拉组件,需要点击click时,方可展示下拉列表。因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框。其实在bootstrap...转载 2018-03-30 10:14:51 · 15631 阅读 · 3 评论 -
12款 jQuery 插件
jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。今天这篇文章向大家推荐12款个实用的 jQuery 插件。1. jmpress.js非常酷的幻灯片插件,基于 CSS3 transform 和 transitio...转载 2018-03-20 15:29:26 · 381 阅读 · 0 评论 -
wow.min.js 支持css3多种动画的效果!
下载地址:http://www.bootcdn.cn/wow/今天发现一个非常有趣的js,wow.min.js,Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的,用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小,类似 Scrollorama(这个非常华丽,但是也更繁杂)。wow.mi...转载 2018-04-02 16:50:45 · 12511 阅读 · 1 评论 -
wow.js 支持css3多种动画的效果
今天发现一个非常有趣的js,wow.min.js,Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的,用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小,类似 Scrollorama(这个非常华丽,但是也更繁杂)。wow.min.js 非常容易安装和使用。如果你使用 Wow.js,你可以...转载 2018-03-20 16:13:47 · 829 阅读 · 0 评论 -
js中各类格式转换
1、js 中 replace()函数var FileUrl= "\Upload\ImgList\19a6a2c4c51cb5c91a08013360231ca3.jpg";var imgUrl = FileSaveUrl.replace(/\\/g, "/") ;alert(imgUrl );输出结果:/Upload/ImgList/19a6a2c4c51cb5c91a08013360231ca3...原创 2018-03-26 11:10:06 · 1207 阅读 · 0 评论 -
easyui-layout布局高度自适应
动态加载datagrid数据$("#dg_center").datagrid({ url: ''/AJAX/EasyUiListComm.ashx', fit: true, //datagrid高度是否自适应 nowrap: true, //是否只显示一行,即文本过多是否省略部分 ...原创 2018-04-02 15:18:23 · 9558 阅读 · 0 评论 -
CSS display属性的表格布局相关属性的解释
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。table-footer-group 此元素会作为一个或多个行...转载 2018-04-02 15:27:32 · 256 阅读 · 0 评论 -
Swiper Animate使用方法
官网:http://www.swiper.com.cnSwiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件,适用于Swiper2.x、Swiper3.x和Swiper4.x 。此插件不适用于loop模式1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。<!DOCTY...转载 2018-04-02 16:48:49 · 4313 阅读 · 2 评论 -
@media实现网页自适应中的几个关键分辨率
不同分辨率设备或不同窗口大小下网页布局经常是不同的,一不小心就会发生错位。可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢?首先看下面的代码,这是从bootstrap中遍历出来的,min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600、480的,那些小分辨率的我们都归类为小于767的。为什么是...转载 2018-04-02 17:14:02 · 660 阅读 · 0 评论 -
meta type="description" 作用讲解
一、语法:<meta name="name" content="string">二、参数解析:1)name项:常用的选项有Keywords(关键字) ,description(网站内容描述),author(作者),robots(机器人向导)等。2)http-equiv项:可用于代替name项,常用的选项有Expires(期限),Pragma(cache模式),Refresh(刷...转载 2018-09-26 17:18:49 · 588 阅读 · 0 评论