最新统计:5455380 名前端工程师,270081 篇优秀笔记,23326 个前端问题被解决,1044 家高端企业入驻,1 个网站,1 个共同的家园!

高手的蜕变

前端网友最新动态:

加关注有惊喜:新浪微博腾讯微博
  • 赵冰龙CSS3模拟网站常用按钮渐出效果

    CSS3模拟网站常用按钮渐出效果

    记得之前在某个网站看到过这样一个效果,按钮下面的圈是一圈一圈散发出来的,很有意思,一看之后就念念不忘,查看源代码发现值flash做的,寻思着用CSS来做这么一个玩意,放在自己的网站活动页面上,立刻高大上(哈哈,纯属YY) 首先我们明确一点,用纯html和css来

  • Ling丶Q我的自我反省

    我的自我反省

    看到前人的文章,总结自己的学习心得,颇有感悟,转给大家,相互学习。 1.首先看了PHP的源码API函数,对于许多口水仗的争论一笑而过,只是停留在脚本级别上的什么效率,安全。。。之争完全就是无稽之谈,没有深入理解API,所有的争论都是臆测和不科学的态度。你做了吗

  • 小帮转载 博客园 红豆依旧在 《2015阿里巴巴秋季校园招聘前端在线笔试题个人参考答案-- ...

    转载 博客园   红豆依旧在 《2015阿里巴巴秋季校园招聘前端在线笔试题个人参考答案-- ...

      1.找出下面优先级相同的选择器   A.img.thumb:after  B.[data-job="frontend"]::first-letter   C.#main::before  D.[type="checkbox"]:checked  E.ul#shop-list   要解这道题,首先需要知道怎么计算选择器的优先级,《CSS实战手册

  • hugeannex人艰不拆

    人艰不拆

    文章是别人的,效果是俺做的。最后有点懒了,文字没怎么处理。。。PC、手机一体。。。(仿ipad翻图片效果翻页) 【鼠标拖拽或手机划屏翻页】 效果演示 码: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname=

  • pingfan常见的几个js疑难点,match,charAt,map

    常见的几个js疑难点,match,charAt,map

    JavaScriptmatch()方法 定义和用法 match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。 该方法类似indexOf()和lastIndexOf(),但是它返回指定的值,而不是字符串的位置。 语法 //匹配字符串,返回指定的值 stringObject.match(search

  • cb340081631html菜包君的绘制

    html菜包君的绘制

    今天用html做了我的头像,样式调得我晕死了,虽然尾巴不怎么完美,不过已经尽量美化了。。。还算满意! 这头像貌似是去年某天在逛dribbble的时候看到的,一老外做的,很喜欢这个设计就拿来做头像了。。。名字就叫菜包君 请用现代浏览器打开观看,已经尽量做了兼容,

  • wchy830width:auto和width:100%的区别(css学习)

    width:auto和width:100%的区别(css学习)

    <div> <p>1</p> </div> div{ width:600px; overflow:auto; } p{ width:100%; padding:10px; } p{ width:auto; padding:10px; } 如果是width:100%,则说明p的width会得到600px就已经充满div区域,然后自己又有padding,所以会

  • 林宗圣前端制作之动画效率问题

    前端制作之动画效率问题

    做移动前端的盆友应该都知道,动画特效方面,尤其兼容安卓系统,就和互联网端兼容IE6一样麻烦。好多效果不错的创意都因为不兼容安卓系统而夭折。归根到底还是因为安卓浏览器性能的问题。这里篇外话一下,安卓手机的硬件可以甩苹果一条街。但在浏览器上表现的则相反。

  • iyangjs篇

    js篇

    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? javascript语言特点: 动态性:在javascript对象中,要为一个属性赋值,不必事先创建一个字段,只需要在使用的时候做赋值操作即可。 varobj=newObject();//定义一个对象 obj.name='blue';//动

  • iyangcss篇

    css篇

    Css篇: 1.有哪项方式可以对一个DOM设置它的CSS样式?  外部样式表,引入一个外部css文件 内部样式表,将css代码放在<head>标签内部 内联样式,将css样式直接定义在HTML元素内部 2.CSS都有哪些选择器? 派生选择器(用HTML标签申明) id选择器(用DOM的ID申

  • a573367014闪瞎眼的HTML5倒计时

    闪瞎眼的HTML5倒计时

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;c

  • netsrongHTML+CSS基础:样式重置

    HTML+CSS基础:样式重置

    body,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{margin:0;font-size:12px;font-family:arial;} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} 去掉IE6,7图片下的空隙vertical-align:top; img{border:none;vertical-align:top} ie6,7下li本身

  • niezhic个人认为javascript高级语言设计中比较重要的东西16

    个人认为javascript高级语言设计中比较重要的东西16

    <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>RegExp类型</title> </head> <body> <script> //RegExp类型 varexpression=/pattern/;//可以带一个或多个/flags/比如g,i和gi. varpattern1=/at/g;//

  • cb340081631开着灰机去旅行

    开着灰机去旅行

    看到有人用css3画了开车旅行,我也来画个开灰机的,比较简陋勿喷。。。 (ps:谷歌党专用--。。。) <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>开着灰机去旅行!</title> <style> *{margin:0;padding:0;}

  • 炼心封装常用的js(base.js)——【14】应用事件绑定更改base.js,完善拖拽(中)

    封装常用的js(base.js)——【14】应用事件绑定更改base.js,完善拖拽(中)

    Base.prototype.drag=function(){ for(vari=0;i<this.elements.length;i++){ addEvent(this.elements[i],'mousedown',function(e){ e.preventDefault(); var_this=this; vardiffX=e.clientX-_this.offsetLeft; vardiffY=e.clientY-_this.offsetTop; if(typeof_this.se

  • lzrcry_沙场jQuery常用技巧大放送

    jQuery常用技巧大放送

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

  • hugeannexcanvas画米字格

    canvas画米字格

    刚看了一同学的画米字格,虽然没看懂为什么要那样做(我也很少用canvas),但个人觉得有点误导别的同学,我也来一个,虽算不上最好,但也算比较好吧(至少代码精简很多)。 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <

  • lzrcry_沙场Web前端研发工程师编程能力飞升之路

    Web前端研发工程师编程能力飞升之路

    今天看到这篇文章。写的非常有意思。发现自己才处于"入室"阶段。 【背景】 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧; 如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧; 如果你是四五年的前端开发高手,没

  • iyangHTML篇

    HTML篇

    html篇 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE:trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用GoogleChrome的Blink内核 Chrome:Blink(基于webkit,Google与OperaSoftware共同开发) 2.每个H

  • 炼心封装常用的js(base.js)——【12】封装拖拽效果

    封装常用的js(base.js)——【12】封装拖拽效果

    本节要点:根据笔记05,06弄出来的带遮罩锁屏功能的自定义弹出框,再添加一个拖拽功能,并将其封装 功能分析:拖拽流程:1.点下去mousedown;2.在点下去的物体被选中,进行移动mousemove,3.抬起鼠标停止移动.mouseup <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.

  • 269283678你不知道的jQuery性能优化指南‖

    你不知道的jQuery性能优化指南‖

    1.对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM。 这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作。直接的DOM操作速度很慢。 例如,你想动态的创建一组列表元素,千万不要这样做,如下所示: vartop_100_list=

  • fwjfwj11Sublime Text

    Sublime Text

    选择类 Ctrl+D选中光标所占的文本,继续操作则会选中下一个相同的文本。 Alt+F3选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。 Ctrl+L选中整行,继续操作则继续选择下一行,效果和Shift+↓

  • 10029068JS判断鼠标从什么方向进入一个容器

    JS判断鼠标从什么方向进入一个容器

    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>判断鼠标进入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50px;di

  • niezhic个人认为javascript高级语言设计中比较重要的东西10

    个人认为javascript高级语言设计中比较重要的东西10

    <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>Object,对象字面量表示法和方括号访问法</title> </head> <body> <script> //引用类型 varperson=newObject();//新对象是由new操作符后加上构造函数

  • Little_DouB小游戏

    小游戏

    前几天看到tree的碰壁反弹,想起来小时候玩的掌上游戏机里类似的游戏,今天下午睡醒后就大体写了个,好多细节没处理 经过两次修改,改掉部分bug,500-2000分是1.2倍速度,2000-5000分是1.5倍速度,5000分以上是1.5倍速度+2个球 <!doctypehtml> <head> <sty

  • hugeannex缓动效果

    缓动效果

    双十一前的平静,表示准备又要忙了。 整了下缓动算法,开始只熟悉linear、easeIn、easeOut,对easeInOut还是有点头大。 又想又测试,测试了又想,贝塞尔曲线会算,但用上去不怎么理想,可能是自己用法不太对,最后还是用三角函数实现的。。。 参数: t:时间,区间[0

  • treejs--碰壁反弹

    js--碰壁反弹

    这个东西倒不是很难,就是练练对临界值的判断,应该很多东西能用到这个,特别是游戏什么的 要做到临界值的判断就要获取元素的某些值,如下: 假设obj为某个HTML控件 -->obj.offsetTop指obj相对于版面或由offsetParent属性指定的父坐标的计算上侧位置,整型

  • 炼心封装常用的js(base.js)——【07】建立tool.js的理由与其对base.js的影响

    封装常用的js(base.js)——【07】建立tool.js的理由与其对base.js的影响

    李炎恢老师的教程从上节课以后,似乎是为了简化base.js,同时也为了拿出一部分更常用的基础函数,将其封装成tool.js,例如以后会用到的取消冒泡preDef(evt)和屏蔽默认事件stopPro(evt)等,应该都会把它们作为更常用的基础函数封装到tool.js中,然后base.js里面就可以直

  • 天使的眼泪-前端JavaScript定义类,定义属性,定义方法的几种方式详解与分析

    JavaScript定义类,定义属性,定义方法的几种方式详解与分析

    感觉这篇文章写的很好,就转载过来分享给和我一样的初学者。 提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字是:ProfessionalJavaScriptforWebDevelopers)这本书中描述的还算比较详细。

  • 天使的眼泪-前端前端笔试面试题目总结

    前端笔试面试题目总结

    希望对一起奋战找工作的战友们有帮助 列举3个以上http请求头,响应头有哪些字段,列举5个以上;http的响应状态消息有哪些值,列举4个以上说明 解析ajax的意思,同步和异步的区别,异步请求有哪些状态,如何创建一个异步请求,异步请求完成过程,说下IE与其他浏览器的差异 如

  • tianxiaofeng747新版qq canvas 动态背景

    新版qq canvas 动态背景

    <!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=1024"/> <metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7,IE=9"/> <title>PCQQ官方网站

  • 淡夏的绿茶head标签的那些事

    head标签的那些事

    1.定义语言 格式: 〈metahttp-equiv="Content-Type"content="text/html;charset=gb2312"s〉 这是META最常见的用法,在制作网页时,在纯HTML代码下都会看到它,它起的作用是定义你网页的语言,当访客浏览你的网页时,浏览器会自动识别并设置网页中的语言,

  • lzrcry_沙场如何通过一个问题,完成最成功的技术面试

    如何通过一个问题,完成最成功的技术面试

    招聘过程   我之前的主要工作是参与招聘并进行技术面试,招聘的总过程如下:   1.HR所进行的面试:判断候选人是不是一个连环杀手或精神病。   2.技术专家进行的面试:判断候选人是不是一个优秀的程序员。   3.大老板进行的面试:判断候选人愿意接受多少报酬

  • 炼心封装常用的js(base.js)——【04】封装下拉菜单.hover(),show(),hide()

    封装常用的js(base.js)——【04】封装下拉菜单.hover(),show(),hide()

    //设置鼠标移入移除,类似jquery的hover()方法 Base.prototype.hover=function(over,out){ for(vari=0;i<this.elements.length;i++){ this.elements[i].onmouseover=over; this.elements[i].onmouseout=out; } returnthis; } //设置隐藏 Base.prototype.hide=function

  • a573367014人人都会打飞机~!

    人人都会打飞机~!

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;c

热烈庆祝一下!微软与W3C共同庆祝HTML5规范最终完成!

ruijie热烈庆祝一下!微软与W3C共同庆祝HTML5规范最终完成!

不管HTML5现状如何都得庆祝一下! 万维网联盟(W3C)发布HTML5最新标准,这是HTML5规范的第五次重大修订

CSS3动画制作网站首页轮播图

赵冰龙CSS3动画制作网站首页轮播图

幻灯片,是网站首页经常会用到的一种前端效果,在接触CSS3动画之前,轮播图只能用JS来做, 现在有了动画,

webApp 移动端图片滑动

yangbys168webApp 移动端图片滑动

<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>移

借用构造函数

gmingshanao借用构造函数

functionSup(name,age){ this.name=name||'foo'; this.age=age||'unknow'; } Sup.prototype.sayInfo=fu

程序猿12个人艰不拆的真相

lzrcry_沙场程序猿12个人艰不拆的真相

程序猿12个人艰不拆的真相,说多了都是泪。。本文从夜生活、过节、对象、技术文档、PPT等等问题用饼图的方

Tab选项卡(自动切换)

yangbys168Tab选项卡(自动切换)

自动切换的TAB(选项卡) <!doctypehtml> <htmllang="en"> <head> <metachar

JS模拟酷狗音乐播放器

赵冰龙JS模拟酷狗音乐播放器

利用JS的动画函数模拟了一下酷狗的音乐界面,有时间、进度条、还有歌词的变化,但是数据都是提前写好的,目

页面滚动特效

yangbys168页面滚动特效

<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <titl

给小伙伴们介绍一个前端特效插件网站

WM_Perfect给小伙伴们介绍一个前端特效插件网站

dowebok【请单击】 里面的很多特效,灰常实用。本人也用过里面的很多效果,网址提供特效demo的在线演示,

大转盘(CSS3、webapp)

617418875大转盘(CSS3、webapp)

最近看到很多的微信活动,其中大转盘算是比较火的,刚好公司有需求,就研究了下。 主要使用css3的旋转属

大家说——如何逐步成为前端工程师?

katherinesnow大家说——如何逐步成为前端工程师?

一、关于前端工程师那些事 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间

ajax跨域解决办法(整理)

katherinesnowajax跨域解决办法(整理)

1.ajax跨域定义:jquery中ajax数据请求非本系统所在服务器的资源时,属于跨域请求处理,跨域包含了协议,端

自适应网页设计(Responsive Web Design)(转)

617418875自适应网页设计(Responsive Web Design)(转)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,

封装常用的js(base.js)——【06】封装遮罩锁屏.lock(),unlock

炼心封装常用的js(base.js)——【06】封装遮罩锁屏.lock(),unlock

本节要点:1.获取视口大小兼容处理。即window.innerWidth(火狐)和document.documentElement.clientWidth(非

封装常用的js(base.js)——【05】自定义弹出框.封装水平垂直居中center(),和resize()  ...

炼心封装常用的js(base.js)——【05】自定义弹出框.封装水平垂直居中center(),和resize() ...

需求:自定义一个弹出登陆框的界面,主要特点有隐藏hide(),显示show(),浏览器窗口改变大小触发事件resize

论一个弹出层插件的自我修养

赵冰龙论一个弹出层插件的自我修养

牛人们说衡量一个工程师能力的高低,有一个很重要的参数就是看他的插件写的完美不完美,如何评价一个插件的

大家说——如何逐步成为前端工程师?

ethansw3c大家说——如何逐步成为前端工程师?

文章伪原创,里面部分内容来自网络与一些前端大牛,我所做的只是将他们进行整合,希望对你前端学习入门有所

滚轮触发的前端效果原理与制作

赵冰龙滚轮触发的前端效果原理与制作

onscroll事件是一个很有意思的事件,很多前端效果的触发都是和这个事件绑定的,通过写的几个demo,整理一下

javascript入门(一)——JS的发展与基本概念

ethansw3cjavascript入门(一)——JS的发展与基本概念

关于这篇文章:最近开始学习javascript,在学习过程中,因为涉及到各种函数、方法、对象等许多的概念,自己

跟我一起学jQuery插件开发 - 其实很简单

269283678跟我一起学jQuery插件开发 - 其实很简单

【前言】 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的

4-AJAX实战 继 1-Javascript DOM编程艺术 与 2-JavaScript权威指南(第五版) , 3-JavaScript高级程

点击下载 »
返回顶部