本文为大家分享了jQuery实现的音乐播放试听列表，可以实现播放，暂停，自动获取音频路径功能，具体内容如下1.html文件 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>音乐播放试听列表</title></head><body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <div class="modal-content" id="music_list_box"><div class="row music_lis...
一、准备数据库首先，我们设计MYSQL数据库如下：CREATE TABLE `songs` (`song_id` int(11) NOT NULL AUTO_INCREMENT,`url` varchar(500) NOT NULL,`artist` varchar(250) NOT NULL,`title` varchar(250) NOT NULL,PRIMARY KEY (`song_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ; 这里，url字段表示是mp3音乐的存放地址,artist是歌曲的演唱者，title是歌曲的名称。我们再加入一些样例数据，如下：INSERT ...
jPlayer简介： 想在网页上播放背景音乐，不想用html标签的方式，因为那样只有音乐全部下载完以后才能播放，还容易出现跨浏览器兼容性的问题，于是选了一款基于jQuery的播放器jPlayer来做。 设置jPlayer的尺寸大小 使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽。 使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸。 注意可通过构造函数配置jPlayer({backgroundColor:"#RRGGBB"})设置jPlayer背景颜色。 Flash 安...
本文实例讲述了jquery点击缩略图切换视频播放特效。分享给大家供大家参考。具体如下： jquery点击缩略图切换视频播放是一款非常实用的播放代码，点击视频缩略图切换优酷视频播放的视频播放选项卡代码，支持flash视频切换选项卡。 运行效果图： -------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jquery点击缩略图切换视频播放特效代码如下<!DOC...
本文实例讲述了jQuery实现自动切换播放的经典滑动门效果。分享给大家供大家参考。具体如下： 这是一个滑动门代码，从外观上看，简洁经典，似乎与平时见到的滑动门没什么区别，不过它有一个重要的功能与众不同，那就是会自动切换【播放】滑动门的内容，像腾讯QQ登录后弹出的每日要闻一样，如果你再加以美化，那么就更完美无暇了。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-co...
看下面的效果图很不错吧，是怎么实现的呢？下面小编给大家分享下我的一番宝物，Lisa唱的 在angel beats的插曲。用到html5、css、jquery实现此音乐播放器。 一番宝物，Lisa唱的 在angel beats的插曲最后在简述这个东西怎么写之前，本人男，24岁，籍贯上海，诚招女友一枚，要求：性格温顺。。。（省略500字） <div class="Music"><div class="MusicPlaySound"> <img class="MusicPlayBg" src="image/music/zsy.png" /> <img class=...
本文实例讲述了jquery实现简单的自动播放幻灯片效果。分享给大家供大家参考。具体实现方法如下： html部分： <div id="slideshow"><div><img src="images/5224/5658667829_2bb7d42a9c_m.jpg"></div><div><img src="images/5230/5638093881_a791e4f819_m.jpg"></div><div>Pretty cool eh? This slide is proof the content can be anything.</div> </div>CSS部分： /* Slides need to be absolutely positioned within the wrapper....
特效介绍 仿门户网站首页泰山压顶式可关闭及重复播放的从上面“压”下来的广告flash+jQuery代码，广告播放的时候，会将整个页面都压下去(这要求您把html部分代码放到您网站最顶部，<body>的下面)，气势恢宏。 演示图使用方法 1、在head引入css。 2、建议，在您网站最顶部放入下面的代码，这样，广告播放，会把您页面的所有内容压下去，气势恢宏： <div class="gg_full wrapfix"><div class="gg_fbtn"><a style="display: none" cla...
本文实例讲述了jquery控制背景音乐开关与自动播放提示音的方法。分享给大家供大家参考。具体如下： 很多人初学网页制作时在网页中加入一段背景音乐，听到音乐响起的那一刻往往都会有一丝的成就感。 这里就为大家讲解如何使用js控制背景音乐播放与停止。具体如下： 一、jquery控制背景音乐开关代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://w...
一、prettyPhoto简介prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件，它不仅支持图片，还同时支持视频、flash、YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单，扩展性也不错，你可以最大限度地自定义prettyPhoto。目前，prettyPhoto兼容大部分主流的浏览器，包括令人纠结的IE6。 prettyPhoto插件的项目地址：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ 建...
最近写了一个在线视频播放的功能，感觉这个插件还可以，和大家分享一下！代码如下: <div class="report" id="play-product" style="cursor: pointer" data-flv="视频路径地址"></div> <script type="text/javascript"> //播放视频 $(#play-product).click(function(){ var flvUrl = $(this).attr(data-flv); var Close = closePlayer; var box = playerBox; var objclose = "#"+Close; var objBox ...
代码如下:<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ //这里参考了以下两个站点的介绍 //http://www.w3school.com.cn/html/html_audio.asp //http://www.zhanxin.info/development/2013-05-17-html5-audio.html if($.browser.msie && $.browser.version==8.0){ //本来这里用的是<bgsound src="system.wav"/>,结果IE8不播放声音,于是换成了embed $(#newMe...
最近在做css动画，遇到需要用脚本重新播放动画的情况。例如： css动画代码 代码如下:.seed_txt_out .seed_txt h2 { animation-name: seed-h2; animation-duration: 2s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: alternate; animation-play-state: running; position: relative; top: 10px; } @keyframes seed-h2 { from {top: -120px;} to {top: 10px;} } jq...
本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是html5的元素，所以使用支持html5的浏览器效果会更好。 效果预览网址：http://www.keleyi.com/keleyi/phtml/guandeng/ 完整代码： 代码如下:<!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> <title>张国...
代码如下:<!DOCTYPE html > <html> <head> <meta content="text/html; charset=utf-8" /> <title>图片左右间隔滚动Jquery特效</title> <style type="text/css"> *{ margin:0px; padding:0px; font-size:12px;} a{ text-decoration:none; font-size:12px;} a:link{color:#383455;font-size:12px;} a:hover{color:#ff0000;font-size:12px;} a:visited{color:#383455;font-size:12px;} img{ border:none;} .hl_main5_content{width:89...