HTML5技术

HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码 - 伊甸一点(2)

字号+ 作者:H5之家 来源:博客园 2016-05-08 16:00 我要评论( )

/* banner.js - Banner设计脚本, 2012 yamoo9.com---------------------------------------------------------------- */ ;( function ($){$( banner_audio= new Audio(), // 创建Audio. webm = isSupportWebM(); /

/* banner.js - Banner设计脚本, 2012 © yamoo9.com ---------------------------------------------------------------- */ ;(function($){ $(banner_audio= new Audio(), // 创建Audio. webm = isSupportWebM(); // 检查是否支持webm格式 banner_audio.src = 'media/banner_sound.mp3'; /*if(webm) { //支持webm格式 banner_audio.src = 'media/banner_sound.webm'; } else { // 不支持webm格式 banner_audio.src = 'media/banner_sound.mp3'; };*/ $('.banner') .bind('mouseover focusin', function() { // 当发生MouseOver,FocusIn事件时调用处理函数 banner_audio.load(); // 加载audio banner_audio.play(); // 播放audio }) .bind('mouseout focusout', function() { // 当发生MouseOut,FocusOut事件时调用处理函数 banner_audio.pause(); // 暂停audio banner_audio.currentTime = 0; // 初始化audio播放位置 }); }); })(window.jQuery); isSupportWebM() { var tester = document.createElement('audio'); return !!tester.canPlayType('audio/webm'); };

 

 

最后的完成作品:

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • 设计模式(1)单例模式(Singleton) - Fonour

    设计模式(1)单例模式(Singleton) - Fonour

    2017-04-23 12:00

网友点评