您现在的位置:IT技术 > WEB前端 >

WEB前端频道头条

前端工程师必读:网站前端性能优化最佳方案
一个网站影响用户访问的最大部分是前端的页面。网站可以划分为:前端和后台。后台可以理...
如何成为优秀的web前端工程师?
如何成为优秀的web前端工程师?在解答这个问题之前,首先需要弄明白的是什么是前端工程师...
如何成长为一个优秀的Web前端开发工程师?
如何成长为一个优秀的Web前端开发工程师?相信很多人都在寻找答案。那么今天IT技术网就为大...
WEB前端频道内容加载中...

八个网页通用的web字体集

八个网页通用的web字体集,写在css文件里面,具体看您的需求了: /*TheTimesNewRoman-basedserifstack:*/font-family:Cambria,HoeflerText,Utopia,LiberationSerif,NimbusRomanNo9LRegular,Times,TimesNewRoman,serif;/*AmodernGe...

日期:2013-09-04 21:42:21

点击:207 好评:0

CSS的text-overflow实现截断字符串

CSS的text-overflow实现截断字符串, 如果字符串超过了指定的长度,通过这段css代码可以截断字符串的显示,并自动加上省略号 具体代码如下: .truncate_string{width:250px;white-space:nowrap;overf...

日期:2013-09-04 21:39:11

点击:193 好评:0

兼容各大浏览器的javascript刷新iframe的方法

兼容各大浏览器的javascript刷新iframe的方法,具体代码如下: iframeid=myframewidth=100%frameBorder=0src=test.htmlscrolling=no/iframeinputtype=buttononclick=javascript:refreshFrame();value=RefreshFrame/scripttype=text/java...

日期:2013-09-04 21:33:47

点击:175 好评:0

CSS兼容各大浏览器的清除浮动Clearfix

CSS兼容各大浏览器的清除浮动Clearfix,具体代码如下: .clearfix:after{/*forFirefox,IE8,Opera,Safari,etc.*/content:.;display:block;height:0;clear:both;visibility:hidden;}*+html.clearfix{/*forIE7*/display:inline-block;}*html...

日期:2013-09-04 21:31:27

点击:136 好评:0

Jquery实现表格隔行变色,点击选中行

Jquery插件实现表格隔行变色,点击后选中行,鼠标经过行颜色变化。具体代码如下: html代码: htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/scripttype=text/javascriptsrc=http://cdnjs.clou...

日期:2013-09-03 22:33:54

点击:372 好评:0

javascript地区分类选择特效

javascript地区分类选择特效,该效果是仿照淘宝地区分类做的,具体效果请看 demo ,代码如下: !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlxmlns...

日期:2013-09-03 22:25:35

点击:235 好评:0

JavaScript如何实现多重继承

javascript面向对象是实现类的多重继承。具体代码如下: functionmultipleinheritPrototype(){if(arguments.length==0){return;}varargs=arguments;varsub=args[0];varconstructor=sub.prototype.constructor;if(!Object.create){Object...

日期:2013-09-03 22:20:39

点击:228 好评:0

html+js点击图片在弹出层显示大图

html+js点击图片在弹出层显示大图,具体代码如下: css代码: *{margin:0;padding:0;}#imglist{list-style:none;width:500px;margin:50pxauto;}#imglistli{float:left;margin-top:10px;} html代码: divid=outerdivstyle=position:...

日期:2013-09-02 22:57:02

点击:765 好评:0

IT技术网使用谷歌prettify.js实现代码高亮功能

目前IT技术网使用google-code-prettify来实现代码的高亮显示,以前IT技术网使用的是highlight.js来实现文章中代码的高亮显示,但是highlight.js 显得很臃肿,加载起来很慢,然而谷歌的prettify...

日期:2013-09-02 22:56:42

点击:128 好评:0

判断网页中element是否可见的最佳方法

javascript判断网页中element是否可见的最佳方法。记得以前一直用jQurey的is(:visible)来判断,一次偶然在chrome中发现这个函数居然是消耗CPU最多的,这个函数效率很低!经过在谷歌的一翻搜...

日期:2013-08-31 10:05:48

点击:239 好评:0

浅谈JavaScript浏览器渲染机制以及定时机制

大家先来看一道题: a.onclick=function(){setTimeout(function(){//dosomething...},0);}; JavaScript API 文档明确定义:setTimeout的第二个参数意义为隔多少毫秒后,回调方法就会被执行。那么可以推断出:这...

日期:2013-08-29 00:36:56

点击:113 好评:0

javascript性能优化技巧

javascript 性能优化的技巧,下面几条规则仅仅是概括性的建议,不包括详细的Demo解说,并且指针对编写Javascript本身的一些建议。...

日期:2013-08-28 23:29:17

点击:199 好评:0

javascript判断IE版本号

公司的一个项目中需要判断IE版本号,因为 jQuery 2.0 去除了对浏览器版本号的判断,于是就看到一老外写的一段代码: var_IE=(function(){varv=3,div=document.createElement(div),all=div.getElementsByTagNa...

日期:2013-08-28 23:04:59

点击:113 好评:0

IE6forWin8解决windows8无法测试IE6的问题

做web前端的工程师们很多时间都花在可恶的IE6了上,如果开发环境是在windows7或者windows8的前端工程师们更悲催了,没有真实的IE6的测试环境,最后还得通过装个虚拟机之类的解决,之前...

日期:2013-08-28 00:01:02

点击:141 好评:0

IE6forWin7解决windows7无法测试IE6的问题

我们做web前端的工程师,起码在我们退休之前是摆脱不了IE6噩梦的,苦逼的的前端工程师们都知道,目前windows7下没有一款比较合适的IE6测试工具,大部分工程师选择的是IEtester这一类的...

日期:2013-08-28 00:00:46

点击:109 好评:0

HTML+CSS实现的漂亮搜索框

HTML+CSS实现的漂亮搜索框,谷歌和百度首页的搜索框都是input+button模式的,bing的搜索框感觉要好点儿。简言之,就是将提交按钮放到input中,其实这是做不到的,只能伪装。 htmlheadtitleI...

日期:2013-08-27 23:33:17

点击:215 好评:0

css+html写的仿windows XP计算器

无聊随便写了个,没有使用图片,除了个别细节,基本和xp自带的计算器样式非常接近。有空再添加计算功能,具体代码如下: !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/T...

日期:2013-08-27 23:31:12

点击:88 好评:0

网页要尽量少用Iframe

iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。 使用 iframe 的页...

日期:2013-08-27 13:10:00

点击:158 好评:0

CSS样式重置,初始化

CSS样式重置,初始化,自己综合修改的一些CSS公共样式初始化代码,方便大家使用: @charset utf-8; /* Document : CSS样式初始化 Created on : 2013. 8. 6,15:41:00 Author : Description: CSS样式表的初始化,全局样式...

日期:2013-08-26 22:43:24

点击:187 好评:0

如何现实动态加载JS代码?

如何现实动态加载JS代码,调用方法: FloadJS(url,function(){alert(加载成功!)},function(){alert(加载失败!);}); 具体代码如下: var FBrowser=new Object(); FBrowser.isIE=((navigator.userAgent.indexOf(MSIE)==-1)?false:true); FBrowser.isIE7=((FBrow...

日期:2013-08-26 21:19:26

点击:145 好评:0

javascript获取Select当前值

javascript获取Select当前值,具体代码如下: function GetObjID(ObjName) { for (var ObjID=0; ObjID window.frm2.elements.length; ObjID++) if ( window.frm2.elements[ObjID].name == ObjName ) { return(ObjID); break; } return(-1); } function select...

日期:2013-08-26 21:17:42

点击:66 好评:0

动态加载javascript功能模块

动态加载javascript功能模块,具体代码如下: /** * 生成命名空间 * @param {String} str 要生成的命名空间字符串 * 如果要生成com.google命名空间,就使用Msw.ns(com.google) */ if(!window.Msw) Msw = {}; Msw.ns = function(){ var ns=function(n, o){ if(n...

日期:2013-08-23 13:05:47

点击:188 好评:0

Zepto插件:手机网站封装好的touch事件js

最近公司开发手机网站,本人主要负责前端这块的工作,考虑到jquery脚本库体质大的问题,选择用Zepto脚本框架,对于手机网站,滑动屏幕事件是频繁用到的,所以经过一小段时间的研究,本人做了一个基于Zepto.js的插件,主要是对手机网站 上划,下滑,左划,右滑...

日期:2013-08-22 23:14:09

点击:177 好评:0

JavaScript对象数组排序

JavaScript对象数组排序,使用了Array.prototype.sort(),具体代码如下: script var sortArr = [ { name: Robin Van PurseStrings, age: 30 }, { name: Theo Walcott, age: 24 }, { name: Bacary Sagna, age: 28 } ].sort(function(obj1, obj2) {return obj2...

日期:2013-08-21 21:08:24

点击:118 好评:0

javascript解决URL传值时乱码的方法

URL中出现空格,等字符会乱码,这个是见到的一个比较不错的处理方式。调用时,把要传递的参数通过这个js方法转化一下就可以转化为%xx组成的一系列字符服务端正常获取有兴趣的可以试一下 ,具体代码如下: function encodeURL(str){ var s0, i, s, u; s0 = ; /...

日期:2013-08-20 23:10:04

点击:74 好评:0

AJAX实现城市select下拉框

AJAX实现城市select下拉框,具体代码如下: //+ select class=sminput _province name=location onclick=loadProvinces(this) /select function loadProvinces(_node) { $.post(getareas_uset.jsp?type=1, function(data) { $.each(data, function(k, v) { va...

日期:2013-08-20 23:09:16

点击:122 好评:0

JavaScript小数、整数四舍五入方法

JavaScript小数、整数四舍五入方法,具体代码如下: //保留两位小数同时四入五入 function changeTwoDecimal(x) { var r = ; var x1 = parseFloat(x); if (isNaN(x1)) { r = x.toString(); } else { var x2 = Math.round(x1 * 100) / 100; x1 = (x1 * 1000) /...

日期:2013-08-20 23:04:46

点击:169 好评:0

JS文本框输入数字立即转换为大写人民币金额显示

JS文本框输入数字立即转换为大写人民币金额显示,具体代码如下: ///////////////////////////////////////////////////////////////////// //界面 ///////////////////////////////////////////////////////////////////// div align=center span输入数字:a...

日期:2013-08-16 19:34:49

点击:185 好评:0

javascript获取当前日期所属第几周函数

javascript获取当前日期所属第几周函数,具体代码如下: //////////////////////////////////////////////////////////////////////////////////////////////////// //获取当前日期在当前年第几周函数封装,例如2013-08-15 是当前年的第32周 ////////////////...

日期:2013-08-15 22:17:06

点击:167 好评:0

javascript判断字符串是否含有特殊字符

javascript判断字符串是否含有特殊字符。具体代码如下: funcation checkNum(){ //定义数组保存特殊字符 var AllNumIsSame = new Array(,,!,@,#,$,%,^,,*,.); //方法实现 function CheckChar() { //获取用户输入的数值 var GetInputValue =$(#InputNumCheck)....

日期:2013-08-10 23:30:06

点击:212 好评:0

zepto实现手机网站焦点图触屏划动效果

最近公司需要做手机网站项目,在脚本js框架上我们采用了轻量级的js框架 zepto.js, 今天我们就来说下使用zepto.js实现 手机网站焦点图触屏划动效果 ,有兴趣的朋友可以先进这个网站http://zeptojs.com/, 本程序是一个测试程序,可以左右无限制的划动。 推荐...

日期:2013-08-10 12:31:40

点击:363 好评:0

基于zepto的手机焦点图touchstart touchmove

基于zepto的手机焦点图,查看地址: demo (建议使用手机浏览器查看) 代码如下: !DOCTYPE HTML html head titlezepto实现手机网站焦点图触屏划动效果/title meta content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no name=vi...

日期:2013-08-10 12:28:05

点击:368 好评:0

提升效率 jQuery选择器大全

在jQuery 中,jQuery 为编写代码者提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、...

日期:2013-08-02 22:11:49

点击:80 好评:0

jQuery实现动态改变图片的大小

jQuery实现动态改变图片的大小,具体代码如下: jQuery(window).load(function () { jQuery(#div_id img).each(function () { DrawImage(this, 500, 1000); }); }); function DrawImage(ImgD, FitWidth, FitHeight) { var image = new Image(); image.src = I...

日期:2013-07-30 00:00:54

点击:107 好评:0

如何写友好的Javascript代码?

实例:尽可能写友好的Javascript代码——在Search Engine的robot搜索时,针对的type,text/html此类“文本”的友好度是最高的(现阶段text/xml除外),而text/javascript此类的友好度不理想,如果robot还要判断DHTML代码的话……...

日期:2013-07-25 20:23:50

点击:26 好评:0

js对cookie的写入,读取及删除方法

这里的js对cookie的写入,读取及删除方法,都很实用: [js]代码: /*name:cookie 名value:cookie 值*///写入cookiefunction SetCookie(name,value){var Days = 30; //此 cookie 将被保存 30 天var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*6...

日期:2013-07-25 20:22:14

点击:173 好评:2

当前最流行的16款JavaScript框架

16个当前最流行的JavaScript框架。在这个列表中,既包括jQuery和Mootools,也有Zepo移动JavaScript框架。 里面一定有你正在用的或想尝试用的JavaScript框架,看看列表吧! 1. jQuery – Javascript框架 应用最广泛的JavaScript框架,jQuery插件非常之多,涉及...

日期:2013-07-25 20:16:41

点击:211 好评:2

jquery验证页面只能输入数字

javascript验证页面只能输入数字,具体代码如下: $(body).find(input[type=text]).each(function () { enforceNum($(this)); }); function enforceNum(_node){ _node.live(keyup blur,function(){ $(_node).val($(_node).val().replace(/[^0-9-]+/,)); $(_no...

日期:2013-07-25 13:19:51

点击:198 好评:0

IT技术网收集:兼容IE6,IE7,Firfox的CSS-hack

IT技术网收集:兼容IE6,IE7,Firfox的CSS-hack: 第一种,是CSS HACK的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 IE6*/ _height:20px; /*For IE6*/ 注意顺序。 这样也属于 CSS HACK ,不过没有上面这样简洁。 #example { color: #333; } /*...

日期:2013-07-24 21:59:22

点击:173 好评:0

八种方案解决IE6下PNG透明图片问题

IE6中的bug令很多Web前端开发人员实为头 疼,然而在众多的Bug中最令人抓狂的就是IE对png图片的不支持,IT技术网把当前最流行最实用的IE6支持PNG图片的方案整理到本文,以供大家学习参考! 方案1 - 滤镜解决方案: 介绍:滤镜从IE4.0被微软正式引入,所以我们...

日期:2013-07-24 21:50:53

点击:209 好评:0

谷歌Chrome浏览器小于12px显示不正常的解决方法

在谷歌的chrome浏览器上面,发现其中字体大小变形,设置是10px大小的居然显示成和12px大小一样,于是才发现,所有小于12px字体大小的都设置成12px。解决办法: webkit的私有属性: html{-webkit-text-size-adjust:none;} 赶快去试试吧!...

日期:2013-07-24 21:48:16

点击:953 好评:0

css-hack之兼容谷歌Chrome浏览器

现在很到网名浏览网页都用用谷歌的chrome或者是chrome内核的浏览器,因为chrome的速度确实快,包括启动速度和加载网页的速度,比ie和ff快得多,不过看评测OPERA的新版本加载网页速度更快,所以在写前端代码的时候兼容chrome浏览器是必须的,那么如何给chrome...

日期:2013-07-24 21:43:09

点击:127 好评:0

CSS3线性渐变举例详解

CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特...

日期:2013-07-24 21:39:43

点击:131 好评:0

如何理解CSS3的弹性盒模型?

css3的到来为现代浏览器加了不少新的特效,其中一个就是新的盒模型弹性盒模型,这个模型决定了一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这种效果图与XUL(火狐使用的用户交互语言)相似,除此以外,其它语言也使用同样的盒模型,如XAML 、Glad...

日期:2013-07-24 21:37:37

点击:72 好评:0

CSS编码规范之BEM思想书写习惯

什么是BEM,BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开...

日期:2013-07-24 21:30:53

点击:79 好评:0

IE6下CSS限制图片最大宽度和高度的方法

在IE7以上的IE浏览器、FF以及chrome中限制最大高度和最大宽度很容易,只需要用max-height、max-width,但IE6下却不认min-*和max-*。那么该怎么解决img在IE6下用CSS限制最大高度、最大宽度呢? 方法一: 用JS控制。这个确实可行,网上也有挺多的例子,有兴趣的...

日期:2013-07-24 21:24:14

点击:97 好评:0

HTML5中的新标签article和section的区别

HTML5中的新标签article和section的区别:article,文章是一个独立的,单独的一段离散的内容。例如一篇博客的帖子,或者一个email中的单个email。 一篇博客中的帖子,可以由rss或者其他方法聚合,而不需要更多的上下文就有意义: article ahref=# h1feimos i...

日期:2013-07-24 21:21:39

点击:106 好评:0

IE6下position:fixed固定定位的方法

对于前端的工程师来说,IE6浏览器有太多的bug让人头疼。IE6不支持position:fixed更是令人苦恼。如果我们需要 做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,只要设 置这个...

日期:2013-07-24 21:03:09

点击:144 好评:0

首页 1 2 3 4 5 6 7 8 9 10 11 12 13 下一页 末页 261216