![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 71
henouren
这个作者很懒,什么都没留下…
展开
-
ul列表中列表项hover蒙层尺寸和位置兼容性问题
对于ul列表中,经常要求鼠标以上列表项着重显示,此时可以选择使用蒙层的方式,如图:可以采用添加一个蒙层的div,设置其display:none,背景颜色以及透明度,当li:hover时,让其显示。在这个过程中,为了使蒙层显示在文字上方,需要定义pisotion:absolute以及大于列表项z-index的值。然而,由于屏幕分辨率的问题,使用绝对定位将会造成位置显示错乱。原创 2017-09-05 14:53:16 · 689 阅读 · 0 评论 -
react知识点(二)
一、JSX是js的一种语法扩展,在React中用于描述UI1)在JSX中使用{}嵌入任何js表达式2)多行JSX最好使用括号wrap3)编译后,JSX表达式成为常规的JavaScript对象。因此可以在if或者for循环中使用,或者复制给其他的变量、从函数中返回等4)在JSX中,class为className5)JSX可以防止注入攻击。在JSX中包含用户输入是安全的,因转载 2017-09-28 10:43:07 · 400 阅读 · 0 评论 -
HTML&CSS知识点(一)
本文非原创,转载自以下文章: (http://www.cnblogs.com/coco1s/p/4034937.html) 1、常用浏览器的内核 IE:trident内核 Firefox:gecko Safari:webkit Opera:Blink Chrome:Blink(基于webkit) 2、Doctype的作用、 声明位于文档的最前面的位置,处于标签之前。此标签可告知浏览转载 2017-09-12 17:26:19 · 190 阅读 · 0 评论 -
常用的CSS动画效果
在实际运用中,经常需要用到旋转、放大等动画效果。以下列举了一些常见的动画效果的CSS实现。所有的动画都需要设置过渡transition:.rotateImg,.scaleImg,.rotateAndScale,.translateImg{ transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out原创 2017-09-12 17:36:53 · 1100 阅读 · 0 评论 -
前后端数据交互之前端传值到后台
在实际的项目开发中,经常要求前后端传值。今天,主要介绍前端向后台传值的几种方法。第一种:ajax传给后台的数据通过json封装起来,再用ajax将json传到后台,需要添加jquery库window.onload = function(){ //生成json var json = []; //实际情况中,json对象的值可通过document.getElement原创 2017-10-19 11:11:49 · 43224 阅读 · 6 评论 -
HTML跑马灯
在工作中,遇到了一个需求,需要在底部实现一个跑马灯效果的友情链接,最初想的是利用JS实现效果,后来得知可直接只用HTML标签实现该效果,着实简单了许多。 最基本的跑马灯效果实现 左右弹的跑马灯效果实现 带超链接的跑马灯一 带超链接的跑马灯二 更多参数:原文链接:http://转载 2017-10-10 15:23:41 · 2187 阅读 · 1 评论 -
前端性能优化常见方法
常见的web前端性能优化的方法总结:(1)减少http请求次数:CSS Sprites,JS、CSS源码压缩,控制图片大小;网页启用Gzip压缩,CDN托管,data缓存,图片服务器。(2)前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端使用变量保存ajax请求结果,每次操作本地变量,减少请求次数(3)用innerHTML代替DOM操作,减少DOM操作次数,优化javasc转载 2017-10-19 17:29:35 · 410 阅读 · 0 评论 -
图片全屏预览实现
要实现图片的全屏预览,主要知识点有一下几个:(1)点击图片弹出弹出层(2)获取已点击图片的图片地址(3)弹出层样式处理(包括背景透明度、图片居中等)(4)点击屏幕弹出层消失代码实现:HTML:主要是显示图片并创建弹出层 JS:纯js实现var imgs = document.getElementById("con原创 2017-10-20 14:26:34 · 5580 阅读 · 1 评论 -
CSS实现两列同等高度
要实现两列内容不同的元素显示同等高度,除了通过使用table表格以及设置固定高度外,还可通过使用display:table-cell实现。 实现布局两列等高 #box{ width: 800px; margin: 0 auto; } .col{ /*以下一句是核心代码*/ display:table-cell;/*原创 2017-10-13 09:50:50 · 1798 阅读 · 0 评论 -
CSS实现左边不动,右边自适应布局
如题,通过CSS实现左边固定,右边自适应的布局。主要有以下两种方法,均在代码上体现。 布局左不动右边自适应的两列布局 /*方法一:左边定宽,且浮动left*/ *{ margin: 0; padding: 0; } #left{ background: #007AFF; width: 250px;/*定宽*/原创 2017-10-13 09:59:09 · 3035 阅读 · 0 评论 -
CSS实现三列自适应的两种方法
实现三列自适应布局 /*方法一:绝对定位法 将左右两侧分别使用绝对定位,通过left/right使之分别固定在左右两侧,并设置宽度 设置中间部分的margin为左侧的宽度 */ *{ margin: 0; padding: 0; height: 500px; } .left{ positio原创 2017-10-13 10:18:54 · 771 阅读 · 0 评论 -
JS控制GIF图片的停止与显示(掷骰子实现)
在掷骰子游戏中,通过需要控制骰子的转动以及转动结果的显示,骰子的转动可以用GIF动图来实现,每次投掷骰子的结果可以通过点击按钮显示静态图片。代码如下: CSS实现GIF动图的停止与开始 var image = document.getElementById("gifImg");原创 2017-10-13 11:01:38 · 4225 阅读 · 1 评论 -
CSS实现垂直居中(三)
在这之前,已经写了两篇关于垂直居中的实现方法,但是由于涉及到的情况各不相同。采用的方法也不一样,今天,另外介绍一种简单的通过CSS实现不同大小浏览器窗口垂直居中的方法。关键代码: #popup img{ max-width: 100%; max-height: 100%; /*以下三行实现垂直居中*原创 2017-10-20 13:46:04 · 251 阅读 · 0 评论 -
JavaScript知识点(二)
本文转载自 JavaScript知识点(一) 16、为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,将<,>,&,”进行转义 function escapeHtml ( str ){ return str.replace(/[<>”&]/g,function(match){ switch(match){转载 2017-09-12 09:56:35 · 257 阅读 · 0 评论 -
jQuery模糊查询的两种方法
方法一:jQuery根据文本框输入实时模糊查询HTML代码: 学号 姓名 性别 年龄 2014213840 张三 男 20 2014213841 李四 男 20 2014213842 王三 女 30原创 2017-09-19 17:08:33 · 18663 阅读 · 2 评论 -
JavaScript Standard Style(JavaScript标准编码风格)(一)
本文转载来源JavaScript Standard Style(JS Standard 代码风格规则详解)每个人都有自己的开发风格,然而在实际开发过程中,基本很少有项目只需一人独立完成,大部分情况下都需要团队之间的合作,此时,制定一种主流风格便十分重要。它不仅有利于合作开发,增强代码的可读性,还能避免编程过程中一些常犯的错误;更能帮助开发人员养成良好的编程习惯。JavaScript s转载 2017-09-13 09:16:19 · 5916 阅读 · 0 评论 -
css实现气泡框效果
利用css实现如上图所示的气泡框效果。 /*气泡框效果实现*/.footer .footerArea .footerRight ul li a:hover .disNone span{ width:0; height:0; font-size:0; overflow:hidden; position:a原创 2017-09-07 15:56:08 · 619 阅读 · 0 评论 -
CSS垂直居中问题解决方法
在实际运用中,经常需要用到垂直居中的地方主要有一下两种情况:1、导航栏导航栏常用到的ul,li标签均为块级元素,a标签为行内元素。要使得a标签的文字垂直居中于li中,只需要a标签的高度与li的高度一致皆可。然而,a标签是行内元素,不能直接设置其height值,因此,可以选择a的dispaly方式为block,即可为之设置高度line-height。具体代码如下:原创 2017-09-15 14:43:45 · 861 阅读 · 0 评论 -
CSS气泡框的两种实现
方法一: /*气泡框效果实现*/ .footer .footerArea .footerRight ul原创 2017-09-08 09:24:44 · 6924 阅读 · 0 评论 -
JavaScript实现回到顶部/底部的两种方法
HTML代码: CSS代码:实现按钮固定在页面右侧/*侧边栏*/.fixed-slider .back-top{ position: fixed; bottom:9%; right: 1%; z-index: 9; } .fixed-slider .back-end{ position: fixed; bottom:2%; right: 1%;原创 2017-09-18 16:20:07 · 3443 阅读 · 0 评论 -
CSS垂直居中实现
上一次,主要写了两种垂直居中的实现方法。后来无意间看到一篇关于CSS实现垂直居中的文章,讲了一种更为简单的实现方法,通过对父元素添加以下两行代码便可实现:align-items: center;display: flex;完整Demo代码: 垂直居中 .vertical-align{ width: 200px; height: 20转载 2017-09-18 17:13:17 · 533 阅读 · 0 评论 -
react表格实现以及jquery实时模糊查询
HTML: react-实时查询表格元素 其中,需要用到 react.js,react-dom.js,browser.js以及jquery库。react实现(searchBox.js):var Pro = React.createClass({ getInitialState:function原创 2017-09-26 17:17:42 · 4053 阅读 · 0 评论 -
react知识点学习(一)——定义CSS样式
本文转载自:React入门到精通(三)——定义组件和css样式方法一:内部样式Hello {this.props.name} {this.props.title}; .alert-text{ font-size: 20px; } 需要注意的是,react引用js文件,type="text/babel" ,并且要转载 2017-09-26 17:48:25 · 510 阅读 · 0 评论 -
jQuery实现倒计时计时器
本文转载自 jquery 做一个小的倒计时效果在实际运用中,经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。 jquery倒计时实现 .shop_list ul li{ display: inline-block; list-style: none; width: 300px; }转载 2017-09-19 10:55:47 · 2686 阅读 · 0 评论 -
JavaScript、ES5和ES6的介绍和区别
30分钟掌握ES6/ES2015核心内容(上) JavaScript、ES5和ES6的介绍和区别 JavaScript简介 JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言,用来给HTML网页增加动态功能。 JavaScript由三部分组成: ECMAScript(核心)+DOM(文档对象模型)+BOM(浏览器对象模型) ECMAScript作为核心,规定了语言的组成部转载 2017-09-11 16:01:09 · 12361 阅读 · 1 评论 -
JavaScript知识点(一)
[本文非原创,转载自以下文章:] (http://www.cnblogs.com/coco1s/p/4029708.html)1、javaScript的数据类型 基本数据类型:String、Number、null、undefined、boolean 引用数据类型:object(Array、Date、RegExp、Function) 如何判断某变量是否为数组数据类型 if(typeof Ar转载 2017-09-11 17:33:05 · 557 阅读 · 0 评论 -
关于HTML中div从display:none到display:block透明度渐增显示的实现
在编写前端页面的过程中,经常会遇到将鼠标移至链接或li上时显示div的需求。如图:而在这过程中,为了有更好的用户体验,通常要求弹出的div显示过程是渐进的。此时可以采用以下步骤来实现:(1)在HTML中编写页面代码,并在CSS中设置要弹出的div显示display:none;HTML:原创 2017-09-07 09:28:04 · 13759 阅读 · 0 评论