-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (79 loc) · 5.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="mpr0xy">
<title>Audio.js</title>
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="./css/demo.css" rel="stylesheet">
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li><a href="https://github.com/mpr0xy/audio.js">Github</a></li>
<li><a href="http://blog.mpr0xy.com">mpr0xy</a></li>
</ul>
<h3 class="muted">Audio.js</h3>
</div>
<hr>
<div class="jumbotron">
<h1>
Audio<span style="font-weight: normal;">.js</span>
</h1>
<p class="lead">让你在看英文文章时，可以轻易选取一段然后读出来．</p>
<div class="over-div">
<a class="btn btn-large btn-success bookmark" onclick="alert('请将此链接拖拽到书签栏'); return false;" href="javascript:(function(){function loadAudioJs(){try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src='//mpr0xy.github.io/audio.js/audio.js';x.charset='utf-8';document.getElementsByTagName('body')[0].appendChild(x)}catch(e){alert(e)}}if(window.audioJs&&window.audioJs.runing){window.audioJs.runing=false;$('body').unbind('mousemove');$('body').unbind('click');$('body').css('background-color',window.audioJs.bodyColor);if(window.audioJs.preElement){window.audioJs.preElement.css('outline','')}}else if(window.audioJs&&!window.audioJs.runing){window.audioJs.run()}else{if(!window.jQuery){try{var scr=document.createElement('script');scr.type='text/javascript';scr.src='//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js';scr.onload=scr.onreadystatechange=function(){if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){loadAudioJs()}};document.getElementsByTagName('head')[0].appendChild(scr)}catch(e){alert(e)}}else{loadAudioJs()}}})();">Audio.js</a>
<a class="btn btn-large btn-success overlay">把我拖拽到书签栏</a>
</div>
<div class="clip">
<p>如果不能拖拽，请点击下面按钮复制代码自行添加到浏览器书签/收藏夹</p>
<button id="copy-button" data-clipboard-text="javascript:(function(){function loadAudioJs(){try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src='//mpr0xy.github.io/audio.js/audio.js';x.charset='utf-8';document.getElementsByTagName('body')[0].appendChild(x)}catch(e){alert(e)}}if(window.audioJs&&window.audioJs.runing){window.audioJs.runing=false;$('body').unbind('mousemove');$('body').unbind('click');$('body').css('background-color',window.audioJs.bodyColor);if(window.audioJs.preElement){window.audioJs.preElement.css('outline','')}}else if(window.audioJs&&!window.audioJs.runing){window.audioJs.run()}else{if(!window.jQuery){try{var scr=document.createElement('script');scr.type='text/javascript';scr.src='//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js';scr.onload=scr.onreadystatechange=function(){if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){loadAudioJs()}};document.getElementsByTagName('head')[0].appendChild(scr)}catch(e){alert(e)}}else{loadAudioJs()}}})();" title="Click to copy me.">点击复制</button>
</div>
</div>
<hr>
<div class='intro'>
<p>拖拽完成后，点击新生成得Audio.js书签．鼠标移动到下面段落并框住，点击鼠标左键即可朗读．再点击一次Audio.js书签，就取消了框住功能．</p>
</div>
<div class="jumbotron">
<p>
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript
</p>
</div>
<div class="intro">
<p>使用截图</p>
<img src="http://ww2.sinaimg.cn/mw690/ec7b00fcjw1eisvo00byij20mq0d5gns.jpg"/>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
<script src="./js/ZeroClipboard.min.js"></script>
<script>
var client = new ZeroClipboard( document.getElementById("copy-button") );
client.on( "ready", function( readyEvent ) {
// alert( "ZeroClipboard SWF is ready!" );
client.on( "aftercopy", function( event ) {
// `this` === `client`
// `event.target` === the element that was clicked
// event.target.style.display = "none";
$div = $('<div/>').addClass("alert alert-success")
$div.attr('role', 'alert')
$div.text('复制成功')
$('.clip').append($div)
$div.fadeOut(1000)
} );
} );
</script>
</body>
</html>