小案例
关注
分享
扫一扫
hfhan_872914334
前端开发
展开
-
JS 拖拽实现
拖拽有两种，一个是利用h5的拖拽属性 drag 实现，另一种是利用鼠标 按下-移动-抬起 事件模拟实现。1、h5拖拽function myDrag(el){ var disX,disY,left,top; el.draggable = true; el.ondragstart=function(e){ disX = e.clientX;原创 2018-02-01 22:02:04 · 333 阅读 · 0 评论 -
调整html元素大小 resize
1、使用css属性：resizediv{ resize: both;}resize 属性规定是否可由用户调整元素的尺寸。取值：none：默认，用户无法调整元素的尺寸。Both：用户可调整元素的高度和宽度。Horizontal：用户可调整元素的宽度。Vertical：用户可调整元素的高度。缺点：不支持ie！仅Firefox 4+、Chrome 以及 Safari 支持原创 2018-02-01 22:18:53 · 10263 阅读 · 0 评论 -
基于Highcharts箱线图实现k线图
如何制作一个k线图？似乎可利用的插件或库有很多，比如echarts、highcharts、d3.js等。使用echarts是最简单的，有现成的demo可供参考，而d3可定制性是最高的，这些定制需要你一点点去写，也不好写，highcharts官网上没有demo，网上也没有相关的案例，但是通过阅读他的说明文档，发现了箱线图这一图表类型，这不正是highcharts实现k线图最好的方法吗？认原创 2018-01-27 15:19:41 · 5013 阅读 · 1 评论 -
canvas绘制验证码
没什么好说的，如题，利用canvas绘制验证码，代码里有注释，应该说很清楚 ☻<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>canvas绘制验证码</title></head原创 2018-03-07 17:07:16 · 594 阅读 · 0 评论 -
Javascript设置和获取文本框鼠标位置
最近在csdn问答板块看到了一个问题：如何实现textarea中输入@在右下方出现一个提示框？ 主要难点是光标所在的位置，网上找了下，大多是获取光标所在的字符位数，而不是距离开头的宽高，所以舍弃。但是本文还是需要这个技术，来判断光标是不是在文本最后。//输入框获取光标function getPosition(element) { var cursorPos = 0;...原创 2018-02-07 11:58:53 · 1807 阅读 · 0 评论 -
canvas+audio+range 模拟音乐播放器
这次利用h5的一些功能，来简单实现一个音乐播放器的播放界面，主要体现在canvas绘制，audio播放音频，range控制进度及音量。h5有很大的浏览器兼容性问题，这里不做考虑。demo中有一个canvas动画的实现，考虑到动画的流畅性及性能，这里使用requestAnimationFramerequestAnimationFrame 采用系统时间间隔，保持最佳绘制效率，不会因为间隔时...原创 2018-02-23 15:01:02 · 282441 阅读 · 0 评论