pluscai的博客

最聪明的人是明白自己无知的人--苏格拉底

一段js实现复制文本内容到剪切板

直接上代码:<script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1").innerText...

2017-08-23 17:24:55

阅读数 25817

评论数 12

table布局的一些总结

工作中遇到的自适应表格,实现过程并不顺畅,花费了一些功夫。将其中不熟悉的技术点总结如下,期待下次可以行云流水的做出来。 1、自适应表格如何实现文本溢出点点的效果 自适应的表格,由于单元格的流动性,文字不存在溢出这样情况,如下图所示: 如何解决自适应表格内容过多将布局撑乱的情况? 给tabl...

2019-02-19 14:20:12

阅读数 19

评论数 0

视差效果的实际应用

在实际开发中,应用一些微交互、视差效果,可以让页面更加生动。如下面的例子: 这个例子中运行了3D transform 的相关知识。具体细节如下分析。 1、切图 将psd稿上的这个区域切成如下图的3块图片,方便在页面上进行叠加、 2、布局 给三张图片设置不一样的translateZ...

2018-11-15 18:59:50

阅读数 85

评论数 0

Javascript组件化开发设计思想

一、引言 项目中经常用web弹层组件-layer,其常见的代码如下:   使用的时候很方便,弹窗的宽高、内容、标题、关闭按钮等弹窗的状态我们都可以通过配置参数配置。layer弹层组件用同一套代码来满足不同的弹窗层表现的需求,这便是组件开发的强大之处。 那么,什么是组件开发、为什么要采用...

2018-09-20 15:52:39

阅读数 574

评论数 0

JS之用面向对象和传统过程式编程

JS之用面向对象和传统过程式编程一、过程式编程如下图所示,为了实现一个div元素的拖拽功能写的代码,这是过程式编程的写法,当JS代码较少时,没必要使用面向对象。杀鸡无需用牛刀。    二、面向对象改写成面向对象时,可先将普通函数变型,再改成面向对象。普通方法变型普通方法变型,变型有3个原则1)尽量...

2018-06-30 14:28:46

阅读数 54

评论数 0

JS面向对象之原型

JS面向对象之原型一、从对象引用的问题说起    如上code中,创建了p1、p2对象,比较p1中的showName函数和p2中的showName函数,结果为false;虽然两个对象中的函数的形式、实现的功能都是一样的,但由于p1、p2是对象的引用,分别指向的是不同的两块内存区域,所以比较的结果为...

2018-06-30 14:21:11

阅读数 52

评论数 1

layer弹出iframe的高度不自适应。一直是150px

layer弹出iframe的高度不自适应。一直是150px通常我们用layer都是点击事件中弹出layer,如下:$(&quot;#loginbtn&quot;).click(function(){     layer.open({     type: 2,     title: ...

2018-06-25 10:05:17

阅读数 3111

评论数 4

jquery实时监控input值的变化、兼容ie9

jquery实时监控input值的变化、兼容ie9 $psdInput.bind(&quot;propertychange change click keyup input paste&quot;, function() {     console.log($(this).val(...

2018-06-15 10:42:02

阅读数 294

评论数 0

数据库视图的总结

视图的概念VIEW ( 视 图 ) 是 一 个 或 多 个 表 的 部 分 数 据 , 它 可 以 像 表 一 样 进 行 CRUD 操 作 , 但 没 有 具 体 的 存 储 数 据 结 构 , 它 以 一 个 SELECTiä 句 的 形 式 存 在 数 据 库 中 。 本 质 : 一 条 有...

2018-05-25 11:22:30

阅读数 733

评论数 1

JS面向对象之从工厂方式到构造函数

JS面向对象之从工厂方式到构造函数一个简单的例子:创建两个对象,每个对象都有各自的属性和方法:上面用面向对象的写法,表示两个对象--小明、小强,可以发现代码重复度很高,就一个名字不一样,别的代码都是一样的。工厂方式工厂方式其实就是函数封装,将多个对象相同部分封装成一个函数(功能)将上面的代码封装成...

2018-05-25 11:19:19

阅读数 77

评论数 0

CSS3的transform以及3D相关属性总结

CSS3的3D相关属性总结概述项目中遇到微交互、增加页面用户体验的需求,运用CSS3的transform变化的3D属性就可以达到效果。transform概述W3C 的解释:CSS Transforms is a module of CSS that defines how elements sty...

2018-04-20 10:48:20

阅读数 293

评论数 0

CSS3动画相关属性的总结

css3动画相关属性的总结概述在最近的项目中,好多都要用到微交互,而这些微交互与css3的动画属性密不可分,例如下面的的微交互:             CSS3动画相关属性有:transition,transform,animation,下面对这些属性和属性值做一个总结。trans...

2018-04-20 08:42:08

阅读数 60

评论数 0

Gulp前端自动化构建工具的应用

Gulp前端自动化构建工具的应用1. 引言:实际前端开发不再仅仅是静态页面的开发了,丰富的前端技术让前端的代码逻辑越来越复杂,模块化开发和各类框架也增加了在生产环境中部署开发环境代码的难度,这种情况下,前端自动化构建在前端开发中尤为重要。我们会遇到下面的问题:a. 每次修改了HTML、JS、CSS...

2018-03-08 19:49:45

阅读数 55

评论数 0

单页切屏效果的原理

前言在实际的开发过程中碰到的单页切屏效果,稍作改动,就可以做成如下优雅的幻灯片效果了。 原理文档结构如下,监测鼠标滚轮的滚动事件,相应的执行切屏动画。实现过程中的注意事项: 鼠标滚轮事件的兼容性问题: W3C并没有对鼠标滚轮事件进行规范,各浏览器厂商封装了不同的实现方法,事件属性也不一样,Fi...

2018-01-12 08:34:01

阅读数 191

评论数 0

利用transition属性实现一个简单小巧的hover效果

在实际工作中,简单利用css3的属性可以让页面更生动,如下面的例子:“了解详情”的hover效果比单纯的颜色变换效果更生动。而实现的方式就是简单的利用了css3transition属性。页面代码结构如下:<div class="box"> <a hre...

2017-12-19 19:05:51

阅读数 140

评论数 0

propertyIsEnumerable的用法

propertyIsEnumerable用法语法和功能obj.propertyIsEnumerable(prop): 判断prop属性是否是obj的可枚举属性 eg: var o = {}; var a = []; o.prop = 'is enumerable'...

2017-10-24 17:00:28

阅读数 145

评论数 0

利用ES6中的模板字符串轻松实现多行和字符串值的插入

多行字符串// Multiline strings `In JavaScript template strings can run over multiple lines, but double and single quoted strings cannot.` // 如打印或者输出,是多行...

2017-07-19 16:31:21

阅读数 233

评论数 0

很方便的javascript开发工具--火狐的Scratchpad(代码草稿本)工具

火狐的console控制台可以很方便的测试单行js代码,就像这样:但是在测试一段js代码时并不方便,这是就可以用Scratchpad代码草稿本工具,通过 ctrl+F4 打开窗口,我们可以打开写好的js文件,也可以直接写js,写完也可以进行保存,非常方便。截图如下:

2017-07-18 14:46:49

阅读数 760

评论数 0

利用伪元素:before实现的快递单查询垂直列表的demo

先看下实现的效果:代码如下//html <ul> <li class="cur"> <span>【已扫描待审查】 操作人:张三</span> <p>操作时间:2017-06-1...

2017-07-17 10:52:17

阅读数 166

评论数 0

通过闪烁标题来实现web消息通知的小demo

一段js代码模拟实现web消息推送的功能,通过闪烁文档的标题来实现,代码如下:var titleInit = document.title, isShine = true; setInterval(function() { var title = document.titl...

2017-07-17 09:30:39

阅读数 572

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭