Javascript判断鼠标滚动方向

做项目的时候,有时候需要判断鼠标滚轮的滚动方向,很常见的一个使用场景就是用js去模拟滚动条,判断的方法很简单:
IE、chrome、opera、safari 都使用 mousewheel 事件,用传统的事件绑定就 OK;
Firefox 又玩个性,它要使用 DOMMouseScroll 事件,并用 addEventListener 方法绑定;

// firefox
if(Element.addEventListener){
    Element.addEventListener('DOMMouseScroll', function(event){
        event.target.innerHTML = event.detail; //滚动的值
    }, false);
}

// ie & chrome & opera & safari
Element.onmousewheel = function(event) {
    event = event || window.event;
    Element.innerHTML = event.wheelDelta; //滚动的值
};

具体的值其实我们不在乎,关键是能判断好方向就行了,Firefox 的 addEventListener 方法里有一个布尔值参数,它的作用是判断一个绑定了不同事件的元素,用什么顺序去执行这些事件:

// 事件1
Element.addEventListener("click",function(){
    alert("1");
},boolean);

// 事件2
Element.addEventListener("click",function(){
    alert("2");
},boolean);

继续阅读 Javascript判断鼠标滚动方向

HTML5音乐播放器(五):同步显示歌词

好久没更新博客了,真是罪过,老偷懒,鄙视下自己,这两天把歌词同步显示的功能弄完了,先来说说原理:

1.ajax获取歌词文件(lrc文件)。

2.用正则分别去过滤出歌词和歌词前面对应的时间,存入数组。

[ti:很难]
[ar:张震岳]
[al:OK]
[by:]
[00:15.79]又一天的一个晴天
[00:19.07]阳光印在这张旧沙发
[00:22.96]躺下来 闭上眼
[00:25.11]恍然不知寂寞 枕着蔓延
.....
//获取歌词内容
lrcVal = xmlhttp.responseText.replace(/[dd:dd.dd]/g,"");
lrcArray = lrcVal.split("n");

//歌曲名
lrcArray[0].replace(/[ww:(.*?)]/g,function(){
    musicName = arguments[1] || "暂无";
});

//歌手
lrcArray[1].replace(/[ww:(.*?)]/g,function(){
    singer = arguments[1] || "暂无";
});

//获取歌词时间轴
xmlhttp.responseText.replace(/[(d*):(d*)([.|:]d*)]/g,function(){
    var min = arguments[1] | 0, //分
    sec = arguments[2] | 0, //秒
    realMin = min * 60 + sec; //计算总秒数

    lrcTimeArray.push(realMin);
});

继续阅读 HTML5音乐播放器(五):同步显示歌词

HTML5音乐播放器(四):播放列表与播放方式

发现播放列表和播放方式切换两个功能是连在一起的,单独一个拿出来说不太合适,所以就都一块弄完了。废话不多说,进入主题,功能的逻辑我是这么设计的:

把整个歌曲文件的信息都写在 json 文件里,获取并生成播放列表。当播放歌曲时,系统会生成当前播放歌曲的引索值(例如:1,2,表示第二张专辑的第三首歌,这个很重要,歌曲切换都是基于这个引索值的),当要播放下一曲时,系统会根据当前是什么播放方式(列表循环,单曲循环,随机播放,顺序播放),生成新的引索值,然后通知播放器,下一首该怎么播放,是随机,还是循环,还是播放结束。

这部分代码不难,主要是要弄清楚整个流程应该是个什么方式,代码我就不贴了,demo 里都有,注释也都比较全。我描绘一下歌曲的播放流程,并写出它用到的函数,我想可能这种方法比较容易讲清楚:)

首先,我们要打开专辑列表,在打开的同时,生成专辑列表:

//---------------------------------------------------【功能:打开&关闭专辑列表】
MUSICENGINE.prototype.albumLists = function(){ ... };

//---------------------------------------------------【功能:生成专辑列表】
MUSICENGINE.prototype.formatAlbumLists = function(){ ... };

这时,可以播放了,我们可以双击专辑,打开专辑内的歌曲列表:

//---------------------------------------------------【双击专辑生成歌曲列表】
function formatInAlbumLists(song,AlbumName){ ... }

继续阅读 HTML5音乐播放器(四):播放列表与播放方式

HTML5音乐播放器(三):播放进度,时间显示以及音量的调节

时间真是不够用,只能晚上抽空把功能完善了,这节我们说下歌曲播放进度,时间显示以及音量的调节这三个部分。

一.歌曲播放进度

这个功能用到的 audio api 主要有:

currentTime() :以秒为单位返回从开始播放到目前所花的时间,也可设置 currentTime 的值来跳转到特定位置;

duration:获取媒体文件的播放时长,以秒为单位,如果无法获取,则为 NaN;

歌曲进度:首先先设置一个定时器,分别获取这两个值,用当前播放的秒数除以歌曲总秒数,再乘以歌曲进度条的总宽度(px),就能算出歌曲进度条一秒钟可以走多少了。

歌曲进度调节:点击进度条的某个位置,歌曲跳转到响应位置,这个功能的实现是先获取到点击的位置距离进度条最左边的长度(让 Firefox 支持 offsetX、offsetY),接着获得这段距离在整个进度条的长度里所占的百分比,用这个百分比乘以歌曲的总长度,就能算出该给 currentTime 设置的值了。

继续阅读 HTML5音乐播放器(三):播放进度,时间显示以及音量的调节

HTML5音乐播放器(二):基本的控制

这一节我们主要讲讲基本的播放功能:播放,暂停,下一曲,上一曲;网上讲解很多,但我们还是先俗套的说说基本的标签和属性吧:)

<audio src="音频的地址">备用(当浏览器不支持audio时显示的内容)</audio>

audio 的控制函数主要有:

控制函数 功能说明
load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
play() 加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有:

只读属性 属性说明
duration 获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
paused 如果媒体文件被暂停,则返回true,否则返回false
ended 如果媒体文件播放完毕,则返回true
startTime 返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
error 在发生了错误后返回的错误代码
currentSrc 以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

继续阅读 HTML5音乐播放器(二):基本的控制

利用图片延迟加载来优化页面性能(jQuery)

图片延迟加载也称懒加载,常用于页面很长,图片很多的页面,以电子商务网站居多,比如大家常上的京东,淘宝,页面以图居多,整个页面少说几百K,多则上兆,如果想一次性加载完成,不仅用户要哭了,服务器也得哭了。

为了避免这种请况发生,目前主流的做法是页面初次加载时,只显示当前可视区域的图片,当用户滚动页面的时候,当图片进入可视区域时再加载,这样可以明显的提高页面加载速度,而更少的图片并发请求数,也可以大大的减轻服务器的压力,可谓一举多得。

图片延迟加载的原理比较简单,先把图片的真实地址写在自定义的一个属性上,比如 data-url(HTML5中以 data- 开头的自定义属性都是合法的),src 地址最好不要空着,放一个 1×1 的全透明占位图片就行了,如:

<img src="images/transparent_img.png" data-url="images/real_img.jpg">

也可以加上如果用户禁用JS后的替代方案:

<img src="images/transparent_img.png" data-url="images/real_img.jpg" >
<noscript><img src="images/real_img.jpg" ></noscript>

当页面滚动的时候开始计算图片是否处在当前窗口的可视区域,如果在的话,就把 src 的假地址替换成 data-url 的真实地址,ok,原理就是这样,很简单吧。

网上详细讲解这个效果的很多,例子也不少,大家有兴趣可以搜一下。最近在看前端性能优化方面的东西,正好上午没事想写个插件练练手,就写了这个简单的延迟加载的插件,基于 jQuery,代码不多,只有 60 行:

继续阅读 利用图片延迟加载来优化页面性能(jQuery)

让 Firefox 支持 offsetX、offsetY

前不久做了一个效果,需求是鼠标划上显示大图,并跟随鼠标移动,效果很简单,利用 offsetX/Y 分别判断出鼠标指针位置相对于触发事件的对象的 X 坐标和 Y 坐标,但坑爹的是 firefox 不支持这个方法,这一下就蛋疼了… 在网上看了很多兼容的方法,感觉最可靠的方法是利用【当前鼠标指针到文档的距离】减去【当前触发事件的对象到文档的距离】等于【当前鼠标指针到第一个定位的父元素的坐标】,很绕口是吧,我画了张图,看着能清楚些:

firefox_offsetX_test

要获取【当前鼠标指针到文档的距离】,我们需要 window.pageYOffset(Netscape属性,指的是滚动条顶部到网页顶部的距离)加上 clientY(当前鼠标指针相对于当前窗口的垂直坐标)。

而要获取【当前触发事件的对象到文档的距离】,我们需要从当前触发元素到根节点为止,各级 offsetParent 元素下面有解释)的 offsetLeftoffsetTop 值之和。

offsetParent:获得被定位的最近的父级对象,定位的要求是设置了 position 属性。

如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位的父级元素,如没有已定位的父级元素,则返回 body 对象。

如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 td 和 table 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 body 对象。

继续阅读 让 Firefox 支持 offsetX、offsetY

控制好javascript在页面中的执行顺序

一、页面中脚本的执行顺序

1.页面中 Javascript 的执行顺序是依靠页面引入的<script>标记的先后顺序决定的。

2.脚本定义的函数或全局变量,后面加载的脚本也可以调用。

3.调用的变量如果前面没有声明,则会返回 undefined。

3.如果调用的函数不在同一段脚本中,则会报函数未定义错误。

5.document.write() 中写入的脚本,浏览器会在解析完 document.write() 后继续解析document.write() 写入的脚本。

好了,我们把这些载入脚本的方法放在一起,看个例子:

<script type="text/javascript">
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(4);')
document.write('fn();');
document.write('alert(e);');
document.write('</script>');
</script>
<script type="text/javascript">
alert(5);
</script>

test.js中的代码:

var e = 1;
function fn(){
  alert(2);
}
alert(3);

chrome中的执行顺序为:3 – 4 – 2 – 1 – 5;

IE中的执行循序为:4 – 3 – 5 并报错属性“fn”的值为 null、未定义或不是 Function 对象;

继续阅读 控制好javascript在页面中的执行顺序

简约的返回顶部效果(jQuery)

博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改。

一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一个,是基于 jQuery 的,用起来还不错。

常见的“返回顶部”分这么3种:把返回顶部按钮放在页面最底部的,返回顶部按钮在滚动距离大于一定的距离后显示出来的,还有就是滚动距离大于 0 的时候就显示出来,喜欢最后这种,嗯,就它了~ 做好了贴出来共享下:)

HTML:

用两个 span 标签去模拟一个向上的箭头。

<div class="returnTop" title="嗖的就上去了!">
  <span class="s"></span>
  <span class="b"></span>
  返回顶部
</div>

CSS:

用 css 去模拟三角形很给力,不仅兼容性很好,而且可用的地方还非常多。这个东西用嘴说不好理解,看例子就一目了然了,更多的用 css 模拟三角形的详解和用法可以看看我写的这篇文章《三种纯CSS实现三角形的方法》。

继续阅读 简约的返回顶部效果(jQuery)

Javascript面向对象学习笔记(一)

最近一直在学习Javascript的面向对象,感觉这里是个难点,想掌握只能是多写多练了,这是我的学习笔记,整理出来和大家分享,希望能有所帮助,我主要参考了《JavaScript高级程序设计》和《JavaScript权威指南》。

1.工厂模式:

function robot(model, color){
    var e = new Object();
    e.model = model;
    e.color = color;
    return e;
}

var robot1 = robot("T1000", "white");
var robot2 = robot("S2000", "black");

函数 robot() 可以被无限次的调用,并每次都会返回一个包含 model 和 color 属性的对象,但这些被返回的相似的对象之间却体现不出任何联系。

2.构造函数模式:

function Robot(model, color){ //构造函数以大写字母开头
    this.model = model;
    this.color = color;
    this.sayModel = function(){
        alert(this.model);
    }
}

var robot1 = new Robot("T1000", "white");
var robot2 = new Robot("S2000", "black");

alert(robot1.model);    //"T1000"
alert(robot2.model);    //"S2000"
robot1.sayModel();      //"T1000"
robot2.sayModel();      //"S2000"

继续阅读 Javascript面向对象学习笔记(一)