会员
周边
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
伤心小王子
博客园
首页
新随笔
联系
订阅
管理
2019年8月6日
前端实现“查看更多”效果
摘要: 讲干货,不啰嗦,有时候文案文字较多,用户进入页面时先隐藏一部分,有“查看更多”按钮,用户点击展示全部文案,以下是具体实现: 最终效果: 具体实现: 步骤1:设置文字容器的高度,超出部分隐藏 步骤2:设置查看更多按钮层,绝对定位,至于文字层底部 步骤3:设置按钮层线性渐变,实现遮罩效果 步骤4:按钮添
阅读全文
posted @ 2019-08-06 10:52 伤心小王子
阅读(3188)
评论(0)
推荐(0)
2019年8月5日
sql简易教程
摘要: 讲干货,不啰嗦,本教程主要基于Mysql数据库,讲解sql的基本使用。 数据库主要包括增、删、改、查等基本操作,以下为设计到的常用的sql语句: 一、查 1.select 语法查询 SELECT column_name,column_name FROM table_name 其中column_nam
阅读全文
posted @ 2019-08-05 15:18 伤心小王子
阅读(1149)
评论(0)
推荐(0)
2019年8月1日
前端实现背景虚化但内容清晰且自适应
摘要: 讲干货,不啰嗦,有时候前端会遇到背景虚化但要求内容清晰的需求,先看效果: 以下为具体实现: 1.自适应的实现: 设置div标签padding-top为百分比,padding和margin百分比值是依据宽度计算的而非屏幕高度,所以可以依此设置一个自适应的区域,比如图片信息如下 那么高宽比例为:540/
阅读全文
posted @ 2019-08-01 10:19 伤心小王子
阅读(2502)
评论(0)
推荐(0)
2019年7月26日
前端实现图片上传预览
摘要: 讲干货,不啰嗦,开发中有时会遇到上传图片并即时生成图片预览的需求,以下为具体实现,主要是应用FileReader对象,有需要的请拿走。 具体实现: 测试结果: 能力有限,水平一般,错误之处,欢迎指正,感谢关注和评论!
阅读全文
posted @ 2019-07-26 10:53 伤心小王子
阅读(9578)
评论(1)
推荐(0)
2019年7月24日
Node.js Express项目搭建
摘要: 讲干货,不啰嗦,Express 是一个简洁而灵活的 node.js Web应用框架,使用 Express 可以快速地搭建一个完整功能的网站。本教程介绍如何从零开始搭建Express项目。 开发环境:windows7,node v10.16.0 1.安装Express 命令:npm install e
阅读全文
posted @ 2019-07-24 15:31 伤心小王子
阅读(10259)
评论(1)
推荐(0)
2019年7月23日
使用Canvas压缩图片
摘要: 讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩。 步骤: 1.获取img元素,既要压缩的图片 2.创建canvas对象 3.使用canvas的drawImage方法绘制图片 4.通过canvas toDataURl方法获取图像base64编码,设置quality参
阅读全文
posted @ 2019-07-23 17:22 伤心小王子
阅读(5836)
评论(0)
推荐(0)
CSS3实现瀑布流布局
摘要: 讲干货,不啰嗦,瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果。 具体步骤: 1.设置外部容器多列列数(column-count)和列间距(column-gap) 2.设置内容条目的break-inside属性为av
阅读全文
posted @ 2019-07-23 13:03 伤心小王子
阅读(8836)
评论(2)
推荐(0)
2019年7月22日
js原生方法的重写
摘要: 讲干货,不啰嗦,通过prototype可以获取到JavaScript的原型对象,进而可以在对象原型上添加新的属性和方法,当该方法与原方法名称一样时会覆盖原方法既:重写,当不一样时既:添加 如:实现数组Array的push方法的重写 能力有限,水平一般,错误之处,欢迎指正,感谢关注和评论!
阅读全文
posted @ 2019-07-22 14:23 伤心小王子
阅读(7884)
评论(0)
推荐(2)
Vue子父组件方法互调
摘要: 讲干货,不啰嗦,大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,现做一下总结,希望对大家有所帮助。 父组件调用子组件方法: 1.设置子组件的ref,父组件通过this.$refs.xxx.method_name(data)调用子组件方法,data参数可选
阅读全文
posted @ 2019-07-22 13:05 伤心小王子
阅读(5593)
评论(0)
推荐(0)
公告
点击右上角即可分享