前端
左本Web3D
互联网软件开发工程师,专注Web3D使用ThreeJS实现Web3D效果技巧和学习案例。积跬步以至千里,致敬每个爱学习的你。
展开
-
JS实现图片跟随鼠标进行浮动
1,介绍图片根据鼠标移动进行浮动,首先根据鼠标移动以屏幕中心点为中心计算鼠标移动的方向(上下左右),根据移动方向设置动画样式。GIF效果图如下:3,源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> html, body { wi.原创 2022-04-28 16:50:11 · 1788 阅读 · 0 评论 -
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
1,介绍该示例使用的是 r95版本Three.js库。主要实现功能:引用模型进行展示,使用精灵Sprite作为标签,鼠标悬浮精灵上时变小手。效果图如下:2,主要说明使用精灵Sprite作为标签,SpriteMaterial作为材质,使用精灵作为标签,就需要把精灵对象插入到父对象中,作为子对会随着父对象的位置变化而跟着变化,代码如下:// 创建精灵函数,传入父对象function createLableSprite_jcy(group) { var spriteM原创 2022-02-14 15:10:27 · 8381 阅读 · 5 评论 -
js计算精确度丢失问题解决,js小数失精度的解决方法
(function () { var calc = { /* 函数,加法函数,用来得到精确的加法结果 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 参数:arg1:第一个加数;arg2第二个加数;d要保留的小数位数(可以不传此参数,如果不传则不处理小数位数...原创 2019-03-04 10:35:08 · 3578 阅读 · 0 评论 -
js实现Excel文件导入导出、利用 js-xlsx 实现 Excel 文件导入导出-功能示例
1.导入功能实现下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中 然后通过FileReader对象读取文件利用js-xlsx转成json数据<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g...转载 2018-10-25 21:36:22 · 2458 阅读 · 0 评论 -
css3自定义动画和animate.css 动画
1、首先引入animate css文件<link rel="stylesheet" href="animate.min.css">2、给指定的元素加上指定的动画样式名<div class="animated bounceOutLeft"></div>这里包括两个class名,第一个是基本的,必须添加的样式名,任何想实现的元素都得添加这个。第二个..原创 2018-10-10 11:54:36 · 1267 阅读 · 0 评论 -
利用 js-xlsx 读取excel文件内容
下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中然后通过FileReader对象读取文件利用js-xlsx转成json数据<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></titl..原创 2018-10-09 09:39:08 · 15497 阅读 · 2 评论 -
JS/jQuery图片预览,支持旋转-放大-放小-全屏,例子demo
JS/jQuery图片查看器viewer.js演示-默认效果_dowebok<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>JS/jQuery图片查看器viewer.js演示-默认效果_dowebok</tit原创 2018-08-30 11:34:28 · 3855 阅读 · 1 评论 -
前端常用的正则表达式大全
1 用户名正则//用户名正则,4到16位(字母,数字,下划线,减号)var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;//输出 trueconsole.log(uPattern.test("caibaojian"));2 密码强度正则//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符var pPattern =...原创 2018-08-28 16:48:22 · 9260 阅读 · 0 评论 -
ios下iframe页面内的input手机输入法bug
苹果手机中运行的页面,在iframe 中 ,手指点击input框,自动弹出键盘后,输入几个文字,然后手指再点击一下input框之后,再在键盘里敲字母,就无法在input框显示所敲入的内容了。input组件接管keydown事件 获取光var el = $('#input');el.on('keydown', function() { window.focus() el.focus(...原创 2018-05-31 23:37:45 · 1941 阅读 · 0 评论 -
关于sui mobile和light7的一些看法
sui mobile和light7都是同一个作者开发的,都是用于手机端的UI。两个框架简直就是同卵双胞胎,其中sui mobile必须配合zepto,light7可以使用zepto也可以使用jquery。如果说你想在项目中选择这样一套框架,建议使用light7而不是sui mobile,连boostrap都抛弃了zepto,我想不到有任何理由使用它。zepto比jquery的优势只有体积小而已,然...转载 2018-06-06 11:11:26 · 4606 阅读 · 0 评论 -
js-base64转换为file对象,ajax提交表单FormData
var img = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ...原创 2018-05-29 12:28:18 · 13693 阅读 · 2 评论 -
网页特效背景——随鼠标变换的动态线条
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Example原创 2018-05-10 11:55:57 · 3186 阅读 · 0 评论 -
银行下拉菜单,HTML选择标签,所有银行信息
<select> <option value="国家开发银行">国家开发银行</option> <option value="中国进出口银行">中国进出口银行</option> <option value="原创 2018-04-25 15:40:58 · 3113 阅读 · 0 评论 -
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来。做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发。之后百度了一下这个问题,原因是主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触...转载 2018-04-11 17:46:03 · 6152 阅读 · 3 评论