front_end_fan-CSDN博客

原创解决ios4下不支持position:fixed的问题

前言：参考1 参考2 参考3自以为解决了所有IOS系统关于position:fixed的所有问题，看来还是没有，特在此补充！！！一、注意：不要在 fixed 元素中使用 input / textarea 元素。在 android 手机下 fixed 表现要比 iOS 更好，软键盘弹出时，不会影响fixed元素定位；还是保留之前的态度，依然不推荐在 Android下使用 iS

2018-02-06 14:42:40 631

原创利用jquery mobiscroll插件选择日期、select、treeList的具体运用

mobiscroll是个很好用的用于移动端滑动选择的插件，可以用来选择日期，也可以用来选择简单选项或者一些复杂的树形结构的选项，简单分享下。　　依赖也比较简单，引入一个mobiscroll-2.13.2.full.min.js文件和一个mobiscroll-2.13.2.full.min.css文件即可。可直接下载mobiscroll-2.13.2 ，官网 http://docs.mobiscro

2018-01-22 16:51:09 1351

原创实用插件（十一）table数据导出插件——tableExport

先引入3个js文件：点我下载script src="Blob.js">script>script src="FileSaver.js">script>script src="tableExport.js">script>1.html:table class="table table-striped table-hover" id="table2" style="display:

2018-01-16 16:46:47 4390

原创实用插件（十）ajax图片上传插件——fileupload

前言刚开始使用的是ajaxFileUpload插件，但是按照其他人的博文所说，直接使用data来传入参数，会报错跨域。如图：已经尝试网上各种方法，然而都是徒劳，比如修改域名，修改jsonp，修改ajaxFileUpload.js的代码…… 表示很绝望！！！希望看见本博文的大神多多指教，感谢！ajaxFileUpload实现原理：它是动态的去创建一个iframe和一个form，

2018-01-15 10:53:37 3751

原创实用插件（九）手机日历插件——Mobiscroll

1、点我下载2、使用方法： <link href="../Mobiscroll/mobiscroll.android-ics-2.5.2.css" rel="stylesheet"><link href="../Mobiscroll/mobiscroll.animation-2.5.2.css" rel="stylesheet"><link href="../M

2017-12-28 16:22:57 1765

原创实用插件（八）20行代码轻松搞定分页——kkpager

前言说是轻松搞定，但是今天也是花了半天的时间，其实也是我在网上找了将近10个分页插件，都不满意。（之前项目里自己写的分页插件有瑕疵，也没有封装，所以就想着去网上找个封装好的）。结果，要么不方便使用ajax，要么就是功能不够齐全，要么就是各种bug。“山重水复疑无路，柳暗花明又一村”，最终经过寻找+对比+研究，才发现一个简单实用的分页插件kkpager，分享在此！1、点我下载2、使用方法：<!--引入

2017-12-18 15:46:23 2127 1

原创史上最完美最简单实用的解决文本溢出方法（tooltip/popover）

直接上代码：(Talk is cheap. Show me the code)<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap.min.css"/> <style> .

2017-12-15 16:31:09 5054

原创 ajax相关总结

1.所有公共的变量和方法统一放在一个js文件，目的是方便修改。比如： i.公共路径：比如：Ajax请求路径的前缀… ii.公共变量：比如：token、pageNumber、pageSize… iii.公共方法：比如：时间格式转换的方法，存/读cookie的方法… 2.每个页面都不要出现同一个接口重复的ajax调用，只要同一个接口重复使用都需要用function来声明，使用的地方直接调用，

2017-12-14 17:22:41 429

原创读《ECMAScript 6 入门 —— 阮一峰》（下）

编程风格块级作用域字符串解构赋值对象数组函数Map结构Class模块ESLint的使用本章探讨如何将ES6的新语法，运用到编码实践之中，与传统的JavaScript语法结合在一起，写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范，具体可参阅jscs.info，下面的内容主要参考了Airbnb的JavaScript风格规范。块级作用域 § ⇧（1）let 取代 varES6提出

2017-09-18 10:29:31 1594

原创读《ECMAScript 6 入门 —— 阮一峰》（上）

前言ES6的出现是为了提高 javascript 的严谨性，安全性等方面，它代表着js的发展方向。网站开发的人员，无论前后端都必须熟稔 ES6 语法规范。带着问题看书1. ES6 新增的关键词 let 和 var 区别？a. 使用let声明的变量，只在它所在的代码块内有效。即如果使用let，声明的变量仅在块级作用域内有效。b. var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为u

2017-09-18 10:13:19 2108

原创不要过度依赖JQuery（三）

前言在不要过度依赖JQuery（一）和不要过度依赖JQuery（二）两篇文章中已经列举了大量的使用原生JavaScript替代JQuery的例子，在本文中将继续列举！ 1、表单获取焦点$('#test').focus(); $('#test').focus(function(){}); var t = document.getElementById('test');function

2017-09-15 11:22:21 494

原创不要过度依赖JQuery（二）

前言为什么说不要过度依赖JQuery呢？从项目方面来讲，一些项目在开发中实际用到JQuery内置功能不多，这样会造成项目臃肿；另一方面，目前的主流已经倾向于原生开发。而在之前一篇《不要过度依赖JQuery（一）》一文中已经介绍了部分使用原生JavaScript实现JQuery功能的代码，这一章将继续列举。 1、位置获取相对于文档的位置$('#test').offset() functi

2017-09-15 11:11:10 430

原创不要过度依赖JQuery（一）

前言毫无疑问，JQuery是一款非常优秀的JavaScript库，它让我们开发项目变得更加便捷容易。不过，当你准备在一个项目（特别是移动项目）中使用JQuery时，你真的该好好思考一下，你会用到JQuery的哪些功能，是否真的需要jQuery。因为随着JavaScript的不断改善进化，现在它内置的功能已经非常强大，在很大程度上，已经可以实现以前需要在JQuery中才能实现的技术（如果你的

2017-09-15 11:03:02 596

转载统一回复《怎么学JavaScript？》

鉴于时不时，有同学私信问我怎么学前端的问题。这里统一回复一下，如下次再遇到问我此问题同学，就直接把本文链接地址发给你了。首先说句题外话。关于有人管我叫大神的事情。个人感觉这跟你买东西时，人家管你叫帅哥一样，你答应与否都无妨。正题开始，前端怎么学，应该因人而异，别人的方法未必适合自己。就说说我的学习方法吧。我把大部分时间放在学习js上了。因为这个js的学习曲线，先平后陡。项目实践和练

2017-09-12 13:55:18 852

原创 table表格合并第一列中相同的内容（优化+注解）

jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 console.log(this); return this.each(function(){ console.log(this) var that;//用来保存含有重复内容的列中的第一个td console.log(that);//

2017-09-06 17:42:17 2315

原创 table表格合并第一列中相同的内容！

分享一个简单实用的jquery小插件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ transition:.5s; transform: rotate(-45de

2017-09-06 11:06:35 6205 5

原创如何自己开发一款js或者jquery插件

引子现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢？首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文可以略微介绍一下，方便以后写插件的时候

2017-09-05 09:28:14 4215 1

原创实用插件（七）视频播放插件——ckplayer

ckplayer插件下载地址：http://pan.baidu.com/s/12HYH4（如果不在了，自己找地址下载，下载后添加到网站根目录）******特别提醒：解压后不要忘了把js文件夹也添加到你的网站根目录。这个主要是为了各浏览器的兼容性的，如果不添加，在ie，Firefox上有可能不能用！1，首先在页面头部引入：2，在body部分放一个div：

2017-09-04 15:41:40 13629

原创实用插件（六）手机日历插件——LCalendar

1、点我下载2、使用方法：  <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" />  <script src="../js/LCalendar.js" type="text/javascript" charset="ut

2017-09-01 10:46:47 9542 1

转载我对知乎前端相关问题的十问十答

之前知乎上有不少同行邀请我回答一些前端相关问题，但是，大家都知道了，要认真回答一个问题是需要大量时间和精力的，对于还在不断学习积累阶段的我，时不时分散原本的精力，打乱自己原本的节奏，实际上是一件不划算的事情。就好像邮件或者微信，来一条信息，你就去看一下，时间和精力都会大大分散，工作和学习效率必然会大打折扣。所以我的策略是一段时间后专门花时间统一处理，这样时间利用率会更高，投入产出比会更大。对于知乎上

2017-08-24 15:56:12 1937

原创实用插件（五）弹出操作提示框artdialog

注意事项：因为artdialog的布局方式是tabble>table,所以自己的项目要是也有table必须要给个class或者id，以免自己的样式影响到弹出框样式(artdialog的html布局图见文章末尾！)（by wangxiaozan）artDialog是一个精巧的web对话框组件，压缩后只有十多KB，并且不依赖其他框架。在页面head引入artDialog，注意如果文件带有skin参数将

2017-08-17 15:11:55 1328

原创实用插件（四）图片上传前预览插件

注：该插件app项目，pc项目都可使用1、由于插件为轻量级，直接附上源码和demo<!doctype html><html><head><meta charset="utf-8"><title>jQuery图片上传前预览</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><styl

2017-08-04 15:09:36 2396

原创实用插件（三）通讯录插件

1、下载：点我下载 2、使用：引入1个css文件，2个js文件<link href="css/style.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/zepto.js"></script><script type="text/javascript" src="js/city.js" s

2017-08-04 14:50:07 2680

原创实用插件（二）图片全屏预览插件——PhotoSwipe

注：该插件app项目，pc项目都可使用1、下载：先下载插件压缩包免费下载2、使用：步骤：1、html结构： <ul id="gallery" class="upload-pics gallery"> <li><a href="../../images/p1.png"> <img src="../../images/p1.png" /></a></li

2017-08-04 14:42:01 2466

原创实用插件（一）日历插件——My97DatePicker

1、下载：My97DatePicker组件包免费下载 2、使用：步骤 1. 把My97DatePicker文件夹拷贝到项目根目录下 2. body前面引入一个css文件：<link rel="stylesheet" href="skin/default/datepicker.css"/>body前面引入后面一个js文件：<script type="text/javascript"

2017-08-04 14:23:05 6350 1

原创文本溢出省略号

最近开发过程中，经常遇到文本溢出的显示问题。现归纳一下几种方法。早在2012年，所有浏览器都已经支持text-overflow:ellipsis; 一、单行文本溢出 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>

2017-07-19 11:30:04 630

转载秒懂Vuejs、Angular、React原理和前端发展历史

今天来说说 “前端发展历史和框架” 「前端程序发展的历史」「不学自知，不问自晓，古今行事，未之有也」我们都知道现在流行的框架：Vue.js、AngularJs、ReactJs，已经逐渐应用到各个项目和实际应用中，它们都是MVVM数据驱动框架系列的一种。在了解MVVM之前，我们先回顾一下前端发展的历史阶段，做到心中有数，才会更好理解。这段回顾历史，由于网上就可查不少资料，但都篇幅很长，晦涩难懂。所

2017-07-17 11:05:25 764

原创 ThreeJS GSAP动画库综合应用

本文介绍了使用Three.js与GSAP动画库创建3D动画效果的技术实现。主要内容包括：1) GSAP库的导入与初始化设置；2) 立方体网格的创建与旋转动画；3) 随机三角形几何体的生成与旋转动画；4) 球体、光源和小球的动态场景设置。通过代码示例展示了如何利用GSAP实现平滑的3D动画效果，包括对象旋转、随机几何体生成和光影交互等技术要点，为创建丰富的Web 3D动画提供了实用参考。

2026-01-29 11:45:31 959

原创 ThreeJS 详解光线投射与物体交互

光线投射是Three.js中实现用户交互的重要技术，通过Raycaster类可以轻松实现鼠标与3D物体的交互。创建Raycaster和鼠标位置对象设置场景、相机和待检测物体监听鼠标事件并转换坐标使用setFromCamera方法设置光线使用intersectObjects方法检测交点处理交点结果实现交互效果通过这种技术，可以实现点击选择物体、悬停高亮、拖拽等功能，大大增强用户的交互体验。

2026-01-29 11:38:13 259

原创 ThreeJS 精通粒子特效

本文介绍了Three.js中创建粒子特效的核心技术，包括点材质设置、纹理配置和几何体创建方法。通过代码示例详细讲解了如何使用PointsMaterial调整粒子大小、颜色和透明度，以及如何通过BufferGeometry高效处理大量粒子数据。文章还展示了两种典型粒子系统的实现：星河效果（通过随机分布和颜色渐变实现）和雪花效果（通过多层粒子系统实现）。这些技术可应用于创建各种3D场景中的粒子视觉效果。

2026-01-29 10:59:39 279

原创 ThreeJS 灯光与阴影

本文介绍了Three.js中灯光与阴影的实现方法，包括基础设置、各类光源配置及阴影优化技巧。主要内容涵盖：1)渲染器和物体的阴影启用方法；2)环境光、平行光、聚光灯和点光源的设置与参数调整；3)透明度物体的阴影处理方案；4)大场景级联阴影映射(CSM)的应用；5)灯光辅助工具的使用。通过代码示例详细展示了如何配置不同类型光源的阴影参数，解决常见阴影问题，提升渲染效果。

2026-01-29 10:55:19 608

原创 Three.js 纹理材质高级操作

Three.js纹理材质高级操作摘要本文详细介绍了Three.js中纹理材质的高级处理技术，包括纹理变换（位移、旋转、缩放、重复）、纵向翻转与预乘Alpha处理、Mipmap技术、各项异性过滤等核心概念。重点讲解了KTX2、DDS、TGA等专业纹理格式的加载方法，以及色调映射、EXR/TIF/PNG动态范围图像处理等高级功能。通过纹理重复设置、过滤方式优化、压缩纹理加载和色调映射控制等技术，开发者可以创建更高质量的3D场景渲染效果。文章提供了完整的代码示例，涵盖了从基础纹理操作到专业级图像处理的完整工作流

2026-01-29 10:26:01 558

原创 Three.js 材质进阶

本文介绍了Three.js中高级材质的使用方法，包括MatCap材质、Lambert/Phong材质、Standard材质和Physical材质等核心概念。重点讲解了如何利用这些材质实现玻璃效果、水晶效果、清漆涂层和布料光泽等高级渲染效果，并详细说明了折射率、反射率、透光性等关键参数的设置。通过代码示例展示了材质属性的动态调节方式，为创建逼真的3D场景提供了实用技术指导。

2026-01-29 10:20:41 742

原创 Three.js Geometry进阶

本文详细介绍了Three.js中Geometry的进阶用法，包括UV映射、法向量设置、几何体变换、包围盒计算和线框显示等核心概念。通过UV映射实现纹理贴图，使用法向量控制光照效果，利用变换方法调整几何体位置，计算包围盒进行碰撞检测，并展示如何生成线框几何体。文章提供了大量代码示例，涵盖从基础设置到多对象包围盒合并等高级技巧，为3D开发中的几何体操作提供了全面指导。

2026-01-29 10:10:37 889

原创 Three.js 开发快速入门

本文介绍了Three.js开发的快速入门知识，涵盖控制器使用、物体变换、材质纹理等核心内容。主要内容包括：1）轨道控制器(OrbitControls)和辅助坐标系(AxesHelper)的使用；2）物体位移、旋转、缩放及父子层级关系；3）响应式画布与全屏控制实现；4）使用lil-gui进行参数调试；5）BufferGeometry的高效几何体表示；6）顶点组与多材质网格应用；7）纹理加载与不同类型贴图映射；8）线性雾和指数雾效果的实现。通过这些实例，开发者可以快速掌握Three.js的基本概念和实用技巧，为

2026-01-29 10:00:02 766

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

lCalendar纯原生js日期时间选择纯原生js日期时间选择

ckplayer是一款非常好的web网页前台视频播放js插件。

ajax图片上传插件

日历插件日历插件日历插件

表格数据导出

AngularJS权威教程

空空如也