随笔分类 - JavaScript
摘要：<!DOCTYPE html><html><head> <title>划字搜索 - wyf'blog</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> body,h1,p{ margin: 0;padding: 0;} #news_Main{width: 650px; margin: 20px auto; background: #ffffff;
阅读全文
摘要：图片按需加载现在大部分门户或电子商务网站的产品列表页,都比较长,且图片较多,如果全部加载,通常会耗费较多时间,而且有数据表明长时间的等待页面响应会流失大部分的用户,所以此时我们就可以考虑只加载第一屏的内容,第一屏内容以外的图片按需加载,用户滚动到该屏时再加载(包括tab切换也可以考虑未显示的区域图片不加载),这样用户在不进行任何操作时,加载页面会很快.看下面的简单demo:<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=u
阅读全文
摘要：随着网站构建越来越倾向于实现“桌面般的体验”，网站中的图片数量也开始显著地增长。想想网站中的对话框、Tabs、Tooltips、Sliders以及日历控件吧，这都是实现“桌面般体验”的必要元素。预加载这一堆图片对网站性能及可用性的提升是有好处的，这样避免了图片加载过程中页面的闪烁、破裂（视觉上）等问题。常用的技术有两种常用的图片预加载技术：CSS spritesCSS sprites技术可以用来减少页面产生的HTTP请求数。它是这么实现的，把所有的图型状态（比如按钮的默认状态，悬停及激活等状态）保存到一张图片中。并依据元素的状态，使用CSS对图片进行相应的定位、切割。不过这样有个重要的缺点——
阅读全文
摘要：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><SCRIPT type="text/javascript"> <!-- var target=[] var time_id=[] function show_date_time_0(){ setTimeout("show_date_time_0()", 100
阅读全文
摘要：Nicholas C. Zakas2012-3-13原文请猛击这里ECMAScript5将严格模式（strict mode）引入了Javascript中，目的是允许开发人员能够选择“更好”的Javascript版本，这个版本能用不同的方式处理那些普遍而又臭名昭著的错误。一开始的时候，我对该模式抱着怀疑的态度，因为当时在只有一款浏览器（Firefox）支持严格模式。时至今日，所有的主流浏览器的最新版本——包括IE10与Opera12——都支持严格模式。使用严格模式的时机已经成熟了。它带来了什么？严格模式给Javascript的运行方式带来了许多不同，我将它们分为了两类：明显的（obvious），
阅读全文
摘要：if(/MSIE 6.0/.test(navigator.userAgent)){ alert("这个是IE6");}if(/MSIE 7.0/.test(navigator.userAgent)){ alert("这个是IE7");}if(/MSIE 8.0/.test(navigator.userAgent)){ alert("这个是IE9");}if(/MSIE 9.0/.test(navigator.userAgent)){ alert("这个是IE9");}
阅读全文
摘要：网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高： document.body.scrollHeight;网页被卷去的高： document.body.scrollTop;网页被卷去的左： document.body.scrollLeft;网页
阅读全文
摘要：浏览网页摄影网站的时候，发现这个网站 有个栏目效果不错，http://pp.163.com/square/，他们是用css3实现，虽然效果很棒，但是只能在chrome、火狐等高级浏览器才能看得到，ie就不要想了，so。。。。我用js实现了这个效果，感觉还不错。。<!doctype html><html><head><meta charset="utf-8"><title>JS仿网易摄影-社区推荐展示效果</title><style type="text/css">* {
阅读全文
摘要：function startMove(obj, json, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bStop = true; for(var attr in json){ var iCur = 0; if(attr == "opacity"){ iCur = Math.round(parseFloat(getStyle(obj, attr)*100)); }else{ iCur = parseInt(getStyle(obj, attr)) || 0;...
阅读全文
摘要：/*最流行的写法*/(function(){ alert("run!") })(); /* !号可以有1~正无穷个，所以这一种就可以衍生无数种方式 */!!!(function(){ alert("run!") })(); (function(){ alert("run!") }).call(); (function(){ alert("run!") }).apply(); (function(){ alert("run!") }()); void(function(){ alert("
阅读全文
摘要：尽管面向对象JavaScript与其他语言相比之下存在差异，并由此引发了一些争论，但毋庸置疑，JavaScript具有强大的面向对象编程能力。本文先从介绍面向对象编程开始，然后回顾JavaScript对象模型，最后演示JavaScript中的面向对象编程概念。目录JavaScript回顾面向对象编程专用术语基于原型的编程JavaScript面向对象编程5.1. 核心对象5.2. 自定义对象5.2.1. 类5.2.2. 对象（类实例）5.2.3. 构造函数5.2.4. 属性（对象属性）5.2.5. 方法5.2.6. 继承5.2.7. 封装5.2.8. 抽象5.2.9. 多态提示参考文献尽管面向对
阅读全文
摘要：<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>焦点图 - 左右滚动</title><style type="text/css">* { padding: 0; margin: 0; }li { list-style: none; }img { border: none; }body { background: #ecfaff; }.box { width: 600px; height: 150px; ove
阅读全文
摘要：请在IE浏览器下观看：<html xmlns:v='urn:schemas-microsoft-com:vml'xmlns:o='urn:schemas-microsoft-com:office:office'><head><meta http-equiv='content-type' content='text/html; charset=gb2312'><title></title><meta name='generator' content=&
阅读全文
摘要：原生js：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char
阅读全文
摘要：看了妙味课堂js视频教程，课前预热第二节后，明白选项卡的实现原理，就是：点击菜单所以的元素的className都为空，然后只给点击的当前元素添加className;Tab选项卡和手风琴是一样的原理。<!doctype html><html><head><meta charset="utf-8"><title>手风琴</title><style type="text/css">* { margin:0; padding:0; }#menu { width:280px; ma
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb23
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><script type="text/javascript">// <
浙公网安备 33010602011771号