前端工程师
关注
分享
扫一扫
文章平均质量分 66
YZiAngel
简简单单~
展开
-
transition、transform 和 animation的区别
工作中不可避免的要使用transition、transform或者animation，有的小伙伴可能很少使用，所以经常忘记或弄混这几个的用法，这里给他们总结归纳一下，希望对你会有帮助 ~-~transtion 过渡transition 的过渡属性与意义transition-property ： 过渡效果的属性，如：widthtransition-duration ： 过渡效果所...原创 2018-05-17 17:04:57 · 1112 阅读 · 0 评论 -
js实现图片轮播
Owl Carousel制作百度百科2014新首页幻灯片演示*{margin:0;padding:0;list-style-type:none;}.scroll-outer{height:421px;background:url(images/bg.jpg) 50% 0 no-repeat;}#scroll{width:1080px;margin:0 auto;padding-to转载 2015-07-09 11:01:51 · 693 阅读 · 0 评论 -
下拉菜单
代码如下： 爱好: 看书 旅游 运动 购物 效果如下：原创 2015-07-10 08:50:50 · 366 阅读 · 0 评论 -
外部链接
index.html嵌入式css样式 慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！style.cssspan{ color:red; font-size:20px;}原创 2015-07-10 09:38:09 · 549 阅读 · 0 评论 -
js 动画1
div速度 运动：代码如下：速度 运动body{paddiing:0;margin:0}#div1{width:200px; height:200px;background-color:red; position:relative;left:-200px; top:0;}#div1 span{width:20px;height:50px; background-color:bl原创 2015-07-20 17:04:00 · 560 阅读 · 0 评论 -
js动画2 多物体运动
速度渐变：代码如下：无标题文档ul,li{ list-style:none}ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px;}window.onload = function(){ var aLi = document.getElementsByTagName('li原创 2015-07-20 21:01:34 · 547 阅读 · 0 评论 -
js 动画3 完美框架
js 框架：function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; }}function startMove(obj,json,fn){ var flag = true原创 2015-07-22 20:53:11 · 767 阅读 · 0 评论 -
时间处理
正常显示:XX年XX月XX日 XX:XX:XX 以及星期//时间显示 window.onload = function(){ showTime(); } function checkTime(i){ if(i<10){ i = "0" + i; } return i; } function showTime(){ var myDate = new Date(原创 2015-07-26 15:45:27 · 604 阅读 · 0 评论 -
选项卡二
简洁的代码实现选项卡切换效果：无标题文档*{margin:0;padding:0}.notice{ height:98px; width:298px; border:1px solid #eee; overflow:hidden; }.notice-tit{ height:27px; position:relative; }.notice-tit ul原创 2015-07-29 19:41:56 · 736 阅读 · 0 评论 -
可延迟的选项卡切换
带有一些延迟的选项卡效果更佳无标题文档*{margin:0;padding:0}.notice{ height:98px; width:298px; border:1px solid #eee; overflow:hidden; }.notice-tit{ height:27px; position:relative; }.notice-tit u原创 2015-07-30 19:22:59 · 617 阅读 · 0 评论 -
可自动切换选项卡
当鼠标移动的时候，停止自动切换，当鼠标移除的时候继续自动切换代码如下：无标题文档*{margin:0;padding:0}.notice{ height:98px; width:298px; border:1px solid #eee; overflow:hidden; }.notice-tit{ height:27px; position:relati原创 2015-07-30 21:07:17 · 860 阅读 · 0 评论 -
css样式-动画效果
不用js代码实现动画效果只需要css代码简单实现代码如下所示 Title 动画效果展示 /*动画效果展示*/div{ width:100px; height:100px; background-color: red; position: relative; animation: an原创 2016-03-06 17:59:36 · 486 阅读 · 0 评论 -
图片轮播
实现图片轮播的代码：.d1{ width:770px; height:auto; overflow:hidden; border:#666666 2px solid; background-color:#000000; position:relative; }.loading{ width:770px; border:#666666 2px solid; back原创 2015-05-13 18:35:16 · 736 阅读 · 0 评论 -
前端js实现淘宝部分界面
网页小测试代码：无标题文档#kuangjia { height: auto; width: 100%; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;}#welcome { height: 17px; width: 100%; background-co原创 2015-05-04 15:12:20 · 7452 阅读 · 0 评论 -
跨域的几种解决办法
作为前端，我们经常会遇到跨域问题，本想自己总结归纳一下，但是意外的发现了一个非常棒的博客，博主已经总结的非常棒了，这里我也就偷个懒，直接引用 这里是传送门想看原版的点上边的连接，这里我留个备份，方便查阅学习，感谢原博~什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) ...转载 2018-05-04 11:13:14 · 868 阅读 · 0 评论 -
大量数据列表渲染优化方法
身为前端，我们经常遇到数据列表渲染等功能，我相信很多人都会完成这类的功能，使用的方法也大多是循环数据，创建列表元素，然后经新元素添加到列表后面，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>大量数据加载&原创 2018-05-02 17:47:25 · 9698 阅读 · 0 评论 -
Git分支
1.分支简介首先我们需要了解一点，Git 保存的数据不是文件的变化或者差异，而是一系列不同时刻的文件快照。 在进行提交操作时，Git会保存一个提交对象，该对象包括一个指向缓存内容快照的指针，作者的姓名、邮箱、提交时输入的信息以及指向他的父对象指针。首次提交的提交对象没有父对象，而有多个分支合并产生的提交对象有多个父对象。(a)首次提交此时Git仓库中有4个对象：两个个 blob ...原创 2018-05-02 15:30:13 · 541 阅读 · 0 评论 -
Git 基础
Git基础由于工作中一直使用svn作为托管工具，对git虽有了解，但是并没有完全清楚其工作模式，所以在此梳理并总结git的一些基础知识，以方便使用。1、获取仓库的两种方式(a)从现有目录中初始化仓库$ git init跟踪和提交已有文件夹$ git add *.c$ git add (b)克隆现有仓库$ git clone https://git...原创 2018-04-12 15:41:29 · 282 阅读 · 0 评论 -
Array相关的很有用的方法
今天查看Array.from()方法的具体使用，发现了一个博客里记录了很多的关于Array的方法，感觉非常好用，这里借鉴一下，以方便查询。Array.some(fn(v,i),thisArgs) 只要数组的一个值满足指定的测试，就返回true thisArgs: fn方法中this指向，如果是object类型正常指向，如果是string类型，会按fn中的i去截取string中对位的位置的字符va原创 2017-09-13 10:19:06 · 349 阅读 · 0 评论 -
移动端js适配文件
移动端手机号型号不同，显示的大小样式是各种各样，为了适配各种手机号，这里附上适配的代码供大家参考一下。如有需要添加和修改的地方，欢迎大家指正，谢谢。(function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEvt = 'orientationchange' i原创 2017-01-11 17:57:11 · 2387 阅读 · 0 评论 -
让下拉列表可编辑
再项目中我们可能遇到一种需求，让下拉列表的显示框可编辑，当我接收到这个需求的时候，又上网查资料，找到了一种可以实现的代码，这里把代码附上（借用一下，希望原创看见不要生气哈） function changeF() { document.getElementById('makeupCo').value = document.getElement原创 2016-12-16 17:27:03 · 878 阅读 · 0 评论 -
Ajax的简单应用
Ajax给我的第一映像就是非常的高大上，不知道你是不是也和我一样这样认为呢，但是当你真正去了解和认识他的时候，就会发现，他也不过如此，今天就让我们一起去了解一下他的真面目吧。 以下是一些涉及到的小知识点： 1、配置自己的服务器程序（AMP） 2、什么是Ajax 无刷新数据读取 用户注册、在线聊天室 3、ajax（url，fnSucess，fnFaold） 文件名原创 2016-08-28 17:01:48 · 447 阅读 · 0 评论 -
Ajax框架整合
我们知道，每次根据不同接口，写不同的Ajax是一件比较麻烦的事儿，但是又不逃避他们，那么该肿么办呢，下面给大家介绍一种整合框架，可以根据与不同接口去创建不同的Ajax<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> fun原创 2016-08-31 22:49:30 · 403 阅读 · 0 评论 -
dw 下拉菜单
下拉菜单实现代码：无标题文档*{ padding:0; margin:0; }#caidan{ width:810px; height:auto; margin:10px auto; }#caidan ul{ list-style-type:none; }#caidan ul li.mu{ width:90px; height:40px; f原创 2015-05-04 15:03:40 · 2530 阅读 · 1 评论 -
dw 选项卡
选项卡实现代码：无标题文档#biaodan { height: 600px; width: 365px; padding-top: 100px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; font: "微软雅黑" 14px/30px;}body { ma原创 2015-05-04 15:09:50 · 1877 阅读 · 0 评论 -
css-照片瀑布流显示
利用css代码实现照片瀑布流显示：具体代码如下： 瀑布流图片效果 标签显示 标签显示原创 2016-03-06 18:46:59 · 631 阅读 · 0 评论 -
css-多列显示
利用css代码实现多行代码的分列显示使布局更加合理美观代码如下： 多列 你好，欢迎来到燕子的世界 你好，欢迎来到燕子的世界你好，欢迎来到燕子的世界你好，欢迎来到燕子的世界你好，欢迎来到燕子的世界你好，欢迎来到燕子的世界你好，欢迎来到燕子的世界你好，欢迎来到燕子的世界你好，欢迎来到燕子的世界你好，欢迎来到燕子的世界你好，欢迎来原创 2016-03-06 18:15:31 · 523 阅读 · 0 评论 -
touch事件
在开发移动端的应用中会使用到很多的手势操作，例如一指拖动、两指旋转等等，为了方便开放者快速集成这些手势，在Clouda中内置了事件和手势库Library.touch，下面将详细的介绍如何使用Library.touch。手势事件处理类API目前支持以下功能：事件配置事件代理事件绑定解除事件代理解除事件绑定触发事件事件配置touch.config(con原创 2016-10-05 17:28:29 · 389 阅读 · 0 评论 -
js中的表单插件
表单对各种程序员来说，并不陌生，我们总会在各种项目中接触到他，表单的布局样式及验证方法，总会耗费我们非常多的时间，为了节省时间和精力，现在我给大家推荐几个插件，只需要简单的调用，表单布局和验证将不再是问题，现在，我们先看一下：第一个插件bootstrap 链接地址：http://v3.bootcss.com/ 使布局更加简单第二个插件jQuery 链接地址：原创 2016-10-05 17:01:40 · 688 阅读 · 0 评论 -
移动互联网终端的touch事件,touchstart, touchend, touchmove
前言如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方转载 2016-10-04 14:36:05 · 536 阅读 · 0 评论 -
Validform表单验证
凡要验证格式的元素均需绑定datatype属性，datatype可选值内置有10类，用来指定不同的验证格式。如果还不能满足您的验证需求，可以传入自定义datatype，自定义datatype是一个非常强大的功能，通过它可以满足你的任何需求。可以绑定的附加属性有：datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、转载 2016-10-27 21:09:15 · 998 阅读 · 0 评论 -
Session后台存储
Session是什么 session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而session保存在服务器上。 客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上，这就是session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。 如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么转载 2016-10-27 17:16:39 · 5896 阅读 · 0 评论 -
HTML5中本地存储与本地数据库
一、本地存储由来的背景 众所周知Html4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的这些限制，也就导致了Cookie只能存储一些ID之类的标识符等简单的数据，复杂的数据就更别扯了。下面是Cookie的限制：1, 大多数浏览器支持最大为 4096 字节的 Cooki转载 2016-10-17 19:52:59 · 2024 阅读 · 0 评论 -
bootstrap
你有没有为无休止的代码布局和繁琐的样式而感到头疼呢？有没有想过要是所有的常见的样式都放哪里让我随便使用呢？其实就有这样一个东西，能实现我们这个愿望，它就叫bootstrap。 什么是bootsrap呢？ Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[原创 2016-09-05 22:59:39 · 592 阅读 · 0 评论 -
js实现多物体不同运动框架
欢迎各位亲们赏脸观看 _我们都知道，网站中有很多的运动，其需求不同，但大体结构类似。如果我们把每个功能模块都写出来，不仅浪费时间，而且浪费很多代码空间，增加代码冗余，使代码显得杂乱无章。今天我们就来写一个框架，将不同的运动封装成一个方法，让不同的运动共用这一个方法，节省时间、空间。而且，这个框架一旦完成，无论何时想用，只要一个调用，就可以实现。这个方法能实现的运动有变宽、变高、变字体大小、变透原创 2016-08-13 15:03:21 · 919 阅读 · 1 评论 -
Ajax之深入了解
上一节，我们说了一些Ajax的基础知识，包括常用的get方法，现在，我们接着来讲讲post方法，以及利用get方法或post方法实现分页显示的功能。 我们使用的是nodejs，去nodejs官网下载安装后，在webstrom编写代码，将所有代码放在public文件夹里，然后在terminal控制台开启服务（npm start），之后在网页上输入localhost:3000/文件名.html。原创 2016-08-31 21:26:33 · 401 阅读 · 0 评论 -
H5中使用JS实现简易日历
1、this：当前发生事件的元素2、value：改变标签里的内容（给input使用） innerHTML：也改变标签里的内容（但是针对div、span等标签）3、数组的定义与使用 -定义：arr=[1,2,3] -使用：arr[0]4、字符串连接 -作用：连接两个字符串 -问题：连接中的优先级（从前往后相加）<!DOCTYPE html><html><he原创 2016-08-02 16:20:00 · 6054 阅读 · 2 评论 -
H5中利用JS实现全选、反选、不选
常用的全选、不选和反选的代码实现方式原创 2016-08-01 22:45:34 · 1209 阅读 · 0 评论 -
less与sass的区别与联系
英文原文：An Introduction To LESS, And Comparison To Sass，翻译：前端观察自从一个月前我偶然发现LESS之后我就开始坚定的使用它了。CSS本身对我来说从来不是问题，但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法。拥有一个提供固定数量选项可选的色盘可以让我避免颜色太跳跃以至于从一个已定的风格中脱离。事实证明，L转载 2016-10-05 20:44:42 · 568 阅读 · 0 评论 -
sessionStorage 、localStorage 和 cookie 之间的区别
1.1 cookie、sessionStorage、localStorage 共同点：都是保存在浏览器端，且同源的。区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于原创 2016-10-05 21:01:02 · 485 阅读 · 0 评论