优化大屏加载速度和打包大小
This commit is contained in:
wgx
parent
a7a0120971
commit
15b6746d22
10781
pnpm-lock.yaml
10781
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,213 +0,0 @@
|
|||
# EasyPlayer.js
|
||||
|
||||
其他教程
|
||||
https://www.mdaima.com/news/157.html
|
||||
|
||||
## 简介
|
||||
|
||||
集播放http-flv, hls, websocket 于一身的H5`视频直播/视频点播`播放器, 使用简单, 功能强大；
|
||||
|
||||
## 功能说明
|
||||
|
||||
- [x] 支持 MP4 播放
|
||||
|
||||
- [x] 支持 m3u8/HLS 播放;
|
||||
|
||||
- [x] 支持 HTTP-FLV/WS-FLV 播放;
|
||||
|
||||
- [x] 支持直播和点播播放;
|
||||
|
||||
- [x] 支持播放器快照截图;
|
||||
|
||||
- [x] 支持点播多清晰度播放;
|
||||
|
||||
- [x] 支持全屏或比例显示;
|
||||
|
||||
- [x] 自带的 flash 支持极速和流畅模式;
|
||||
|
||||
- [x] 自带的 flash 支持 HTTP-FLV 播放;
|
||||
|
||||
- [x] 自动检测 IE 浏览器兼容播放;
|
||||
|
||||
- [x] 支持重连播放；
|
||||
|
||||
## HTML 集成示例
|
||||
|
||||
- 使用方式
|
||||
|
||||
- [x] 普通集成
|
||||
|
||||
copy dist/element/EasyPlayer-element.min.js 到 www 根目录
|
||||
|
||||
在 html 中引用 dist/element/EasyPlayer-element.min.js
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>easyplayer</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
|
||||
name="viewport"
|
||||
/>
|
||||
<script type="text/javascript" src="EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<easy-player
|
||||
video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks2"
|
||||
live="true"
|
||||
stretch="true"
|
||||
></easy-player>
|
||||
<easy-player
|
||||
video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
|
||||
live="false"
|
||||
stretch="true"
|
||||
></easy-player>
|
||||
<easy-player
|
||||
video-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv"
|
||||
live="true"
|
||||
stretch="true"
|
||||
></easy-player>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
- [x] vue集成
|
||||
|
||||
```
|
||||
npm install @easydarwin/easyplayer --save
|
||||
```
|
||||
|
||||
- Vue 集成调用
|
||||
|
||||
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录
|
||||
|
||||
copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录
|
||||
|
||||
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录
|
||||
|
||||
**注意：** 没有调用会出现无法加载对应插件的报错
|
||||
|
||||
在 html 中引用 dist/component/EasyPlayer-lib.min.js
|
||||
|
||||
###H.265 copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录
|
||||
|
||||
#### demo
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title>EasyPlayer-demo</title>
|
||||
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-lib.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong
|
||||
>We're sorry but easynvr-token doesn't work properly without JavaScript
|
||||
enabled. Please enable it to continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
##效果演示
|
||||
|
||||
|
||||
|
||||
- [x] npm集成
|
||||
|
||||
```html
|
||||
......
|
||||
|
||||
<EasyPlayer
|
||||
:videoUrl="videoUrl"
|
||||
:aspect="aspect"
|
||||
live
|
||||
@message="$message"
|
||||
:fluent="fluent"
|
||||
:autoplay="autoplay"
|
||||
stretch
|
||||
></EasyPlayer>
|
||||
|
||||
...... ...... import EasyPlayer from '@easydarwin/easyplayer'; ......
|
||||
components: { EasyPlayer }
|
||||
```
|
||||
|
||||
源码演示：[github-demo](https://github.com/EasyNVR/EasyNVR)
|
||||
|
||||
## 配置属性
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------------------------ | -------------------------- | ------ |
|
||||
| video-url | 视频地址 | String | - |
|
||||
| video-title | 视频右上角显示的标题 | String | - |
|
||||
| poster | 视频封面图片 | String | - |
|
||||
| auto-play | 自动播放 | Boolean | true |
|
||||
| live | 是否直播, 标识要不要显示进度条 | Boolean | true |
|
||||
| speed | 是否显示倍速播放按钮。注意：当live为true时，此属性不生效 |Boolean | true |
|
||||
| loop | 是否轮播。 |Boolean | false |
|
||||
| alt | 视频流地址没有指定情况下, 视频所在区域显示的文字 | String | 无信号 |
|
||||
| muted | 是否静音 | Boolean | false |
|
||||
| aspect | 视频显示区域的宽高比 | String | 16:9 |
|
||||
| isaspect | 视频显示区域是否强制宽高比 | Boolean | true |
|
||||
| loading | 指示加载状态, 支持 sync 修饰符 | String | - |
|
||||
| fluent | 流畅模式 | Boolean | true |
|
||||
| timeout | 加载超时(秒) | Number | 20 |
|
||||
| stretch | 是否不同分辨率强制铺满窗口 | Boolean | false |
|
||||
| show-custom-button | 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准) | Boolean | true |
|
||||
| isresolution | 是否在播放 m3u8 时显示多清晰度选择 | Boolean | false |
|
||||
| isresolution | 供选择的清晰度 "yh,fhd,hd,sd", yh:原始分辨率 | fhd:超清，hd:高清，sd:标清 | - |
|
||||
| resolutiondefault | 默认播放的清晰度 | String | hd |
|
||||
| isTransCoding | 是否开启转raw | Boolean | false |
|
||||
|
||||
### HTTP-FLV 播放相关属性
|
||||
#### 注意：此属性只在播放flv格式的流时生效。
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| -------- | -------------------------------------- | ------- | ------------------ |
|
||||
| hasaudio | 是否有音频，传递该属性可以加快启播速度 | Boolean | 默认不配置自动判断 |
|
||||
| hasvideo | 是否有视频，传递该属性可以加快启播速度 | Boolean | 默认不配置自动判断 |
|
||||
|
||||
## 事件回调
|
||||
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---------- | ------------ | --------------------- |
|
||||
| video-url | 触发通知消息 | type: '', message: '' |
|
||||
| ended | 播放结束 | - |
|
||||
| timeupdate | 进度更新 | 当前时间进度 |
|
||||
| pause | 暂停 | 当前时间进度 |
|
||||
| play | 播放 | 当前时间进度 |
|
||||
|
||||
|
||||
## 更多流媒体音视频资源
|
||||
|
||||
EasyDarwin开源流媒体服务器：<a href="http://www.easydarwin.org" target="_blank" title="EasyDarwin开源流媒体服务器">www.EasyDarwin.org</a>
|
||||
|
||||
EasyDSS高性能互联网直播服务：<a href="http://www.easydss.com" target="_blank" title="EasyDSS高性能互联网直播服务">www.EasyDSS.com</a>
|
||||
|
||||
EasyNVR安防视频可视化服务：<a href="http://www.easynvr.com" target="_blank" title="EasyNVR安防视频可视化服务">www.EasyNVR.com</a>
|
||||
|
||||
EasyNVS视频综合管理平台：<a href="http://www.easynvs.com" target="_blank" title="EasyNVS视频综合管理平台">www.EasyNVS.com</a>
|
||||
|
||||
EasyNTS云组网：<a href="http://www.easynts.com" target="_blank" title="EasyNTS云组网">www.EasyNTS.com</a>
|
||||
|
||||
EasyGBS国标GB/T28181服务器：<a href="http://www.easygbs.com" target="_blank" title="EasyGBS国标GB/T28181视频服务器">www.EasyGBS.com</a>
|
||||
|
||||
EasyRTS应急指挥平台：<a href="http://www.easyrts.com" target="_blank" title="EasyRTS应急指挥平台">www.EasyRTS.com</a>
|
||||
|
||||
TSINGSEE青犀开放平台：<a href="http://open.tsingsee.com" target="_blank" title="TSINGSEE青犀开放平台">open.TSINGSEE.com</a>
|
||||
|
||||
Copyright © <a href="http://www.tsingsee.com" target="_blank" title="青犀TSINGSEE">www.TSINGSEE.com</a> Team 2012-2021
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<script src="../../js/jquery.min.js"></script>
|
||||
<!--<script src="../../plugin/EasyPlayer/js/EasyPlayer-element.min.js"></script>-->
|
||||
<script src="../../plugin/EasyPlayer/js/EasyWasmPlayer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width:100%;height:55vw;background-color:pink;margin: auto;">
|
||||
<div id="newplay"></div>
|
||||
</div>
|
||||
<script>
|
||||
callbackfun=function(e) { //点击播放器里的按钮返回事件
|
||||
console.log(e);
|
||||
|
||||
if(e=='pause') {//暂停事件
|
||||
player.setSnap('images/logo_1.png');//显示封面图片
|
||||
} else if(e=='play') {
|
||||
player.endSnap();//清除封面图片
|
||||
player.endLoading();//取消Loading显示
|
||||
}
|
||||
|
||||
}
|
||||
var player=new WasmPlayer(null,'newplay',callbackfun,{
|
||||
Height: true,openAudio: true,BigPlay: false,HideKbs: true,
|
||||
})
|
||||
|
||||
//Height:播放器尺寸是否继承父盒子的
|
||||
//openAudio:是否打开音频
|
||||
//HideKbs:是否隐藏实时码率
|
||||
|
||||
var video_url='http://open.ys7.com/v3/openlive/E79782550_1_1.m3u8';//视频流地址 萤石云地址最大支持10个m3u8并发 要不就需要开通企业每年300
|
||||
|
||||
$(document).ready(function() {
|
||||
player.play(video_url,1);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,51 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyPlayer</title>
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
#player .easy-player {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h4 style="width:600px;margin: auto;">EasyPlayer播放器</h4>
|
||||
<br>
|
||||
<div style="width:600px; height: 400px;position: relative;">
|
||||
<easy-player id="player" live="true" show-custom-button="true" isH265="true" ></easy-player>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a></p>
|
||||
<p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
|
||||
<input type="text" id="value">
|
||||
<button id="btn">播放</button>
|
||||
<button id="btnSnap">快照</button>
|
||||
</div>
|
||||
<script>
|
||||
let vuePlayer = null
|
||||
var btn = document.getElementById('btn');
|
||||
var btnSnap = document.getElementById('btnSnap');
|
||||
let player = document.getElementById('player')
|
||||
|
||||
// 地址栏
|
||||
var value = document.getElementById('value');
|
||||
//播放事件 传入地址播放
|
||||
btn.onclick = function(){
|
||||
console.log('player', player)
|
||||
$('#player').attr('video-url',value.value)
|
||||
|
||||
}
|
||||
btnSnap.onclick = function(){
|
||||
if (!vuePlayer) vuePlayer = player.getVueInstance(); // 获取播放器实例
|
||||
var attrs = player.attributes;
|
||||
console.log('player', vuePlayer)
|
||||
vuePlayer.snapshot()
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,222 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyPlayer</title>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
/* color: #07baf4; */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
line-height: 24px;
|
||||
}
|
||||
#app {
|
||||
padding-top: 60px;
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
.radio-container {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.radio-item{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-right: 15px;
|
||||
border-radius: 4px;
|
||||
border: 1px #ccc solid;
|
||||
}
|
||||
.radio-active {
|
||||
color: #fff;
|
||||
background-color: #07baf4;
|
||||
border-color: #07baf4;
|
||||
}
|
||||
.player_container {
|
||||
display: grid;
|
||||
}
|
||||
.player_container_1 {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.player_container_4 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.player_container_9 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
}
|
||||
.player_active {
|
||||
box-shadow: 0 0 2px 1px red;
|
||||
}
|
||||
.player_item {
|
||||
position: relative;
|
||||
padding-bottom: 54%;
|
||||
background-color: #ccc;
|
||||
border: 1px #fff solid;
|
||||
}
|
||||
.player_box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
.playerurl-container {
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.play-btn {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
margin-left: 15px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
background-color: #07baf4;
|
||||
border-color: #07baf4;
|
||||
}
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-sizing: border-box;
|
||||
color: #606266;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
||||
width: 100%;
|
||||
}
|
||||
.closes {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>EasyPlayer 多分屏案例（动态地址）</h1>
|
||||
<br>
|
||||
<div class="radio-container">
|
||||
<div :class="['radio-item',{'radio-active': radio==item.value}]" v-for="(item,index) in radioList" :key="index" @click="onRadio(item.value)">
|
||||
{{item.label}}
|
||||
</div>
|
||||
<div class="radio-item" @click="onStop()">
|
||||
停止
|
||||
</div>
|
||||
</div>
|
||||
<div class="playerurl-container">
|
||||
<input v-model="playerUrl">
|
||||
<div class="play-btn" @click="onPlay()">
|
||||
播放
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['player_container','player_container_'+radio]">
|
||||
<div class="player_item" v-for="(item,index) in playerList" @click="onActive(index)">
|
||||
<div class="closes" @click="onCloes(index)"> 关闭</div>
|
||||
<easy-player
|
||||
:class="['player_box',{'player_active': active==index}]"
|
||||
:key="index"
|
||||
:muted="muted"
|
||||
:data-index="index"
|
||||
:video-url="item.videoUrl"
|
||||
:ref="'player'+index"
|
||||
style="height: 100%"
|
||||
@error="restartPlayer"
|
||||
@ended="restartPlayer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a>
|
||||
</p>
|
||||
<p>文档：<a href="https://github.com/tsingsee/EasyPlayer.js" target="_blank"> GitHub </a> <a href="https://www.npmjs.com/package/@easydarwin/easyplayer" target="_blank"> NPM</a>
|
||||
</p>
|
||||
<p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
active:0,
|
||||
radio: 1,
|
||||
radioList: [// 选择分屏
|
||||
{ label:"单分屏", value: 1 },
|
||||
{ label:"四分屏", value: 4 },
|
||||
{ label:"九分屏", value: 9 }
|
||||
],
|
||||
muted: false, // 控制音频
|
||||
playerList: [],
|
||||
playerUrl: 'http://demo.easynvr.com:10800/hls/stream_5/playlist.m3u8',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setPlayerList()
|
||||
},
|
||||
methods: {
|
||||
setPlayerList(){// 设置分屏
|
||||
this.onStop()
|
||||
this.playerList = []
|
||||
for (let index = 0; index < this.radio; index++) {
|
||||
this.playerList.push({videoUrl: ""})
|
||||
}
|
||||
},
|
||||
onPlay(){ // 播放
|
||||
this.playerList[this.active].videoUrl = this.playerUrl
|
||||
},
|
||||
onStop(){
|
||||
for (let index = 0; index < this.playerList.length; index++) {
|
||||
this.playerList[index].videoUrl = ""
|
||||
}
|
||||
},
|
||||
onRadio(val){// 分屏选择
|
||||
this.radio = val
|
||||
this.setPlayerList()
|
||||
},
|
||||
onActive(val){
|
||||
this.active = val
|
||||
},
|
||||
onCloes(index){
|
||||
this.playerList[index].videoUrl = ""
|
||||
},
|
||||
restartPlayer(e) {// 错误捕获
|
||||
const {index} = e.currentTarget.dataset
|
||||
const playerStr = "player" + index
|
||||
let [player] = this.$refs[playerStr]
|
||||
player = player.getVueInstance()
|
||||
player.initPlayer() // 重新初始化播放器
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyPlayer</title>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
/* color: #07baf4; */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
line-height: 24px;
|
||||
}
|
||||
#app {
|
||||
padding-top: 60px;
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
.radio-container {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.radio-item {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-right: 15px;
|
||||
border-radius: 4px;
|
||||
border: 1px #ccc solid;
|
||||
}
|
||||
.radio-active {
|
||||
color: #fff;
|
||||
background-color: #07baf4;
|
||||
border-color: #07baf4;
|
||||
}
|
||||
.player_container {
|
||||
display: grid;
|
||||
}
|
||||
.player_container_1 {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.player_container_4 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.player_container_9 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
}
|
||||
.player_item {
|
||||
position: relative;
|
||||
padding-bottom: 56%;
|
||||
background-color: #ccc;
|
||||
border: 1px #fff solid;
|
||||
}
|
||||
.player_box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>EasyPlayer 多分屏案例（默认地址）</h1>
|
||||
<br>
|
||||
<div class="radio-container">
|
||||
<div :class="['radio-item',{'radio-active': radio==item.value}]" v-for="(item,index) in radioList" :key="index" @click="onRadio(item.value)">
|
||||
{{item.label}}
|
||||
</div>
|
||||
<div class="radio-item" @click="onStop()">
|
||||
停止
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['player_container','player_container_'+radio]">
|
||||
<div class="player_item" v-for="(item,index) in playerList">
|
||||
<easy-player
|
||||
class="player_box"
|
||||
:key="index"
|
||||
:muted="muted"
|
||||
:data-index="index"
|
||||
:video-url="item.videoUrl"
|
||||
:ref="'player'+index"
|
||||
style="height: 100%"
|
||||
@error="restartPlayer"
|
||||
@ended="restartPlayer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a>
|
||||
</p>
|
||||
<p>文档：<a href="https://github.com/tsingsee/EasyPlayer.js" target="_blank"> GitHub </a> <a href="https://www.npmjs.com/package/@easydarwin/easyplayer" target="_blank"> NPM</a>
|
||||
</p>
|
||||
<p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
radio: 1,
|
||||
radioList: [// 选择分屏
|
||||
{ label:"单分屏", value: 1 },
|
||||
{ label:"四分屏", value: 4 },
|
||||
{ label:"九分屏", value: 9 }
|
||||
],
|
||||
muted: false, // 控制音频
|
||||
playerList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setPlayerList()
|
||||
},
|
||||
methods: {
|
||||
setPlayerList(){// 设置分屏
|
||||
this.onStop()
|
||||
this.playerList = []
|
||||
for (let index = 0; index < this.radio; index++) {
|
||||
this.playerList.push({videoUrl: "http://demo.easynvr.com:10800/hls/stream_5/playlist.m3u8"}) // 默认地址
|
||||
}
|
||||
},
|
||||
onStop(){
|
||||
for (let index = 0; index < this.playerList.length; index++) {
|
||||
this.playerList[index].videoUrl = ""
|
||||
}
|
||||
},
|
||||
onRadio(val){// 分屏选择
|
||||
this.radio = val
|
||||
this.setPlayerList()
|
||||
console.log(this.radio );
|
||||
},
|
||||
restartPlayer(e) {// 错误捕获
|
||||
const {index} = e.currentTarget.dataset
|
||||
const playerStr = "player" + index
|
||||
let [player] = this.$refs[playerStr]
|
||||
player = player.getVueInstance()
|
||||
player.initPlayer() // 重新初始化播放器
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
# EasyWasmPlayer
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
yarn run serve or yarn run dev or yarn run start
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
yarn run build
|
||||
```
|
||||
|
||||
### Run your tests
|
||||
```
|
||||
yarn run test
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
yarn run lint
|
||||
```
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
{
|
||||
"name": "easyplayer",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@easydarwin/easyplayer": "^5.0.3",
|
||||
"axios": "^0.18.0",
|
||||
"element-ui": "^2.5.4",
|
||||
"md5": "^2.2.1",
|
||||
"vue": "^2.6.6",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.4.0",
|
||||
"@vue/cli-plugin-eslint": "^3.4.0",
|
||||
"@vue/cli-service": "^3.4.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"eslint": "^5.8.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"fibers": "^3.1.1",
|
||||
"sass": "^1.16.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyPlayer</title>
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
#player .easy-player {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h4 style="width:600px;margin: auto;">EasyPlayer播放器</h4>
|
||||
<br>
|
||||
<div style="width:600px; height: 400px;position: relative;">
|
||||
<easy-player id="player" live="true" show-custom-button="true" decode-wasm="true"></easy-player>
|
||||
<p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a></p>
|
||||
<p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
|
||||
<input type="text" id="value">
|
||||
<button id="btn">播放</button>
|
||||
</div>
|
||||
<script>
|
||||
var btn = document.getElementById('btn');
|
||||
// 地址栏
|
||||
var value = document.getElementById('value');
|
||||
//播放事件 传入地址播放
|
||||
btn.onclick = function(){
|
||||
$('#player').attr('video-url',value.value)
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>easyplayer</title>
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./EasyPlayer-element.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but easyplayer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,123 +0,0 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<EasyPlayer v-model="videoUrl" :muted="muted" ref="easyPlayer" live :reconnection="true"></EasyPlayer>
|
||||
<el-input v-model="input" placeholder="请输入播放地址" size="mini"></el-input>
|
||||
<p>列如：http://127.0.0.1:10800/test.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a></p>
|
||||
<el-button class="player-button" size="mini" type="success" @click="player">播放</el-button>
|
||||
<div style="display: flex;flex-direction: row;margin-top: 30px">
|
||||
<el-button size="mini" type="primary" @click="play">播放</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveSnap">快照</el-button>
|
||||
<el-button size="mini" type="primary" @click="videotape">{{startVideotape? "停止录像":"开始录像"}}</el-button>
|
||||
<el-button size="mini" type="primary" @click="switchAudio">{{muted ? '开始声音' : '静音'}}</el-button>
|
||||
<el-button size="mini" type="primary" @click="fullScreen">全屏</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EasyPlayer from "@easydarwin/easyplayer"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoUrl: '',
|
||||
input: '',
|
||||
startVideotape:false,
|
||||
muted:true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
EasyPlayer
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
player() {
|
||||
if(!this.input){
|
||||
this.$message.error('请输入播放地址地址！');
|
||||
}else{
|
||||
this.videoUrl = this.input
|
||||
}
|
||||
},
|
||||
//保存快照
|
||||
saveSnap(){
|
||||
if(!this.videoUrl){
|
||||
this.$message.error('请输入播放地址地址！');
|
||||
}else{
|
||||
this.$refs.easyPlayer.saveLocalSnapshot()
|
||||
}
|
||||
},
|
||||
//录像
|
||||
videotape(){
|
||||
if(!this.videoUrl){
|
||||
this.$message.error('请输入播放地址地址！');
|
||||
}else{
|
||||
if(this.$refs.easyPlayer.switchRecording){
|
||||
this.$refs.easyPlayer.switchRecording()
|
||||
this.startVideotape = !this.startVideotape
|
||||
}
|
||||
}
|
||||
},
|
||||
play(){
|
||||
this.$refs.easyPlayer.play()
|
||||
},
|
||||
pause(){
|
||||
this.$refs.easyPlayer.pause()
|
||||
},
|
||||
switchAudio(){
|
||||
this.$refs.easyPlayer.switchAudio()
|
||||
this.muted = !this.muted
|
||||
},
|
||||
fullScreen(){
|
||||
this.$refs.easyPlayer.fullscreen()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
// text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.el-row,
|
||||
.div-btn {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.div-btn {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
min-height: 300px;
|
||||
// border: 1px pink solid
|
||||
.easy-player {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.player-button {
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
}
|
||||
.el-input__inner:focus {
|
||||
border-color: #67c23a !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
|
||||
Vue.use(ElementUI)
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
module.exports = {
|
||||
lintOnSave:false,
|
||||
devServer: {
|
||||
proxy: "http://127.0.0.1:10800"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<cross-domain-policy>
|
||||
<allow-access-from domain="*"/>
|
||||
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
|
||||
</cross-domain-policy>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" style="height: 100%">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<title>潞城区数字农业云平台</title>
|
||||
</head>
|
||||
<body style="background-color:black">
|
||||
<img class="apng-image" src="img/111.png" style="width:1000px;height:1000px;" />
|
||||
<!-- jquery -->
|
||||
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="plugin/js/apng-canvas.min.js"></script>
|
||||
<script>
|
||||
//初始化加载完成
|
||||
$(document).ready(function () {
|
||||
//你要做的事情
|
||||
console.log('ready-加载完成')
|
||||
})
|
||||
window.onload = function () {
|
||||
//你要做的事情
|
||||
console.log('onload-加载完成')
|
||||
}
|
||||
//当页面加载状态改变的时候执行function
|
||||
document.onreadystatechange = function () {
|
||||
//当页面加载状态为完全结束时进入
|
||||
if (document.readyState == "complete") {
|
||||
//你要做的操作。
|
||||
console.log('complete-加载完成')
|
||||
|
||||
APNG.ifNeeded().then(function () {
|
||||
var images = document.querySelectorAll(".apng-image");
|
||||
for (var i = 0; i < images.length; i++) APNG.animateImage(images[i]);
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -1,541 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
|
||||
<title>H+ 后台主题UI框架 - 数据表格</title>
|
||||
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
|
||||
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
|
||||
|
||||
<!--<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">-->
|
||||
<!--<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">-->
|
||||
<!-- Data Tables -->
|
||||
<!--<link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">-->
|
||||
<!--<link href="css/animate.css" rel="stylesheet">-->
|
||||
<!--<link href="css/style.css?v=4.1.0" rel="stylesheet">-->
|
||||
</head>
|
||||
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基本 <small>分类，查找</small></h5>
|
||||
<!-- <div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="table_data_tables.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="table_data_tables.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<table class="table table-striped table-bordered table-hover dataTables-example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>渲染引擎</th>
|
||||
<th>浏览器</th>
|
||||
<th>平台</th>
|
||||
<th>引擎版本</th>
|
||||
<th>CSS等级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="gradeX">
|
||||
<td>Trident</td>
|
||||
<td>
|
||||
Internet Explorer 4.0
|
||||
</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Trident</td>
|
||||
<td>
|
||||
Internet Explorer 5.0
|
||||
</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>
|
||||
Internet Explorer 5.5
|
||||
</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>
|
||||
Internet Explorer 6
|
||||
</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">
|
||||
C/A<sup>1</sup>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>渲染引擎</th>
|
||||
<th>浏览器</th>
|
||||
<th>平台</th>
|
||||
<th>引擎版本</th>
|
||||
<th>CSS等级</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 全局js -->
|
||||
<script src="js/jquery.min.js?v=2.1.4"></script>
|
||||
<!--<script src="js/bootstrap.min.js?v=3.3.6"></script>-->
|
||||
<!--<script src="js/plugins/jeditable/jquery.jeditable.js"></script>-->
|
||||
<!-- Data Tables -->
|
||||
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
|
||||
<!--<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>-->
|
||||
<!-- 自定义js -->
|
||||
<!--<script src="js/content.js?v=1.0.0"></script>-->
|
||||
<!-- Page-Level Scripts -->
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.dataTables-example').dataTable();
|
||||
|
||||
/* Init DataTables */
|
||||
var oTable = $('#editable').dataTable();
|
||||
|
||||
/* Apply the jEditable handlers to the table */
|
||||
//oTable.$('td').editable('../example_ajax.php', {
|
||||
// "callback": function (sValue, y) {
|
||||
// var aPos = oTable.fnGetPosition(this);
|
||||
// oTable.fnUpdate(sValue, aPos[0], aPos[1]);
|
||||
// },
|
||||
// "submitdata": function (value, settings) {
|
||||
// return {
|
||||
// "row_id": this.parentNode.getAttribute('id'),
|
||||
// "column": oTable.fnGetPosition(this)[2]
|
||||
// };
|
||||
// },
|
||||
|
||||
// "width": "90%",
|
||||
// "height": "100%"
|
||||
//});
|
||||
|
||||
|
||||
});
|
||||
|
||||
//function fnClickAddRow() {
|
||||
// $('#editable').dataTable().fnAddData([
|
||||
// "Custom row",
|
||||
// "New row",
|
||||
// "New row",
|
||||
// "New row",
|
||||
// "New row"]);
|
||||
|
||||
//}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container" style="width:600px;">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: 'ezopen://open.ys7.com/G39444019/1.live',
|
||||
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave();
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<video id="hlsId" autoplay controls style="width: 600px;height:400px"></video>
|
||||
<video id="hlsId2" autoplay controls style="width: 600px;height:400px"></video>
|
||||
</div>
|
||||
<script>
|
||||
var hlsDemo = new EZUIKit.HLS("hlsId","https://open.ys7.com/v3/openlive/C78957921_1_2.m3u8?expire=1687488306&id=461844489422516224&t=96ea4ce49d2ea4f2f65d045edbe8fa1a51ef9fac6f38e150052bc64a91c27db7&ev=100");
|
||||
|
||||
var hlsDemo2 = new EZUIKit.HLS("hlsId2","https://open.ys7.com/v3/openlive/G39444019_1_2.m3u8?expire=1687487466&id=461840962679742464&t=c076d5a5ad56090e919a6a2500b96169c20a77874cce866a87a7d65e493e6f2f&ev=100");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container" style="width:600px;">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
// fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
// .then(response => response.json())
|
||||
// .then(res => {
|
||||
// var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: "at.d3x4s5bhdycz32x7cl3qlciu53rfv862-4ck9tiyfrq-1fbjnvm-qrlumy5kn",
|
||||
url: 'ezopen://open.ys7.com/K16356833/1.live',
|
||||
template: 'theme', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
// });
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave(`${new Date().getTime()}`);
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container" style="width:600px;">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: 'ezopen://open.ys7.com/G39444019/1.live',
|
||||
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
staticPath: "/ezuikit_static/v64",
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave(`${new Date().getTime()}`);
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: 'ezopen://open.ys7.com/G39444019/1.live',
|
||||
template: 'mobileLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
width: 375,
|
||||
height: 210,
|
||||
});
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave();
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: 'ezopen://open.ys7.com/G39444019/1.rec',
|
||||
template: 'mobileRec', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
width: 375,
|
||||
height: 210,
|
||||
});
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave();
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container" style="width:600px;">
|
||||
</div>
|
||||
<div id="video-container2" style="width:600px;">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
var playr2;
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: 'ezopen://open.ys7.com/G39444019/1.live',
|
||||
template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
playr2 = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container2', // 视频容器ID
|
||||
accessToken: "at.e0mnhu50d7bwohb40358mchq13aobjm2-6m2v78jd7m-1g22scv-lcn0rdqm1",
|
||||
url: 'ezopen://open.ys7.com/G39444019/1.live',
|
||||
template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave();
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container" style="width:600px;">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: "at.d3x4s5bhdycz32x7cl3qlciu53rfv862-4ck9tiyfrq-1fbjnvm-qrlumy5kn",
|
||||
url: 'ezopen://open.ys7.com/K16356833/1.live',
|
||||
template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave();
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container" style="width:600px;">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: 'ezopen://open.ys7.com/G39444019/1.rec',
|
||||
template: 'pcRec', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave();
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container" style="width:600px;">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var playr;
|
||||
// 获取测试token
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
// 获取主题
|
||||
fetch(`https://open.ys7.com/jssdk/ezopen/template/get?pageStart=1&pageSize=10&accessToken=${accessToken}`)
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var template = res.data.result[0].themeId;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: "at.d3x4s5bhdycz32x7cl3qlciu53rfv862-4ck9tiyfrq-1fbjnvm-qrlumy5kn",
|
||||
url: 'ezopen://open.ys7.com/K16356833/1.live',
|
||||
template: template, // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
})
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave();
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<title>Document</title>
|
||||
<script src="./ezuikit.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div className="demo">
|
||||
<h2>视频模式使用示例：</h2>
|
||||
<div id="video-container" style="width:600px;">
|
||||
</div>
|
||||
<div>
|
||||
<button onClick="play()">play</button>
|
||||
<button onClick="stop()">stop</button>
|
||||
<button onClick="getOSDTime()">getOSDTime</button>
|
||||
<button onClick="getOSDTime2()">getOSDTime2</button>
|
||||
<button onClick="capturePicture()">capturePicture</button>
|
||||
<button onClick="openSound()">openSound</button>
|
||||
<button onClick="closeSound()">closeSound</button>
|
||||
<button onClick="startSave()">startSave</button>
|
||||
<button onClick="stopSave()">stopSave</button>
|
||||
<button onClick="ezopenStartTalk()">开始对讲</button>
|
||||
<button onClick="ezopenStopTalk()">结束对讲</button>
|
||||
<button onClick="fullScreen()">全屏</button>
|
||||
</div>
|
||||
<p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
|
||||
</div>
|
||||
<script>
|
||||
var themeData = {
|
||||
"header": {
|
||||
"color": "#1890ff",
|
||||
"activeColor": "#FFFFFF",
|
||||
"backgroundColor": "#000000",
|
||||
"btnList": [
|
||||
{
|
||||
"iconId": "deviceID",
|
||||
"part": "left",
|
||||
"defaultActive": 0,
|
||||
"memo": "顶部设备序列号",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "deviceName",
|
||||
"part": "left",
|
||||
"defaultActive": 0,
|
||||
"memo": "顶部设备名称",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "cloudRec",
|
||||
"part": "right",
|
||||
"defaultActive": 0,
|
||||
"memo": "云存储",
|
||||
"isrender": 0
|
||||
},
|
||||
{
|
||||
"iconId": "rec",
|
||||
"part": "right",
|
||||
"defaultActive": 0,
|
||||
"memo": "SD卡回放",
|
||||
"isrender": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
"footer": {
|
||||
"color": "#FFFFFF",
|
||||
"activeColor": "#1890FF",
|
||||
"backgroundColor": "#00000021",
|
||||
"btnList": [
|
||||
{
|
||||
"iconId": "play",
|
||||
"part": "left",
|
||||
"defaultActive": 1,
|
||||
"memo": "播放",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "capturePicture",
|
||||
"part": "left",
|
||||
"defaultActive": 0,
|
||||
"memo": "截屏按钮",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "sound",
|
||||
"part": "left",
|
||||
"defaultActive": 0,
|
||||
"memo": "声音按钮",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "pantile",
|
||||
"part": "left",
|
||||
"defaultActive": 0,
|
||||
"memo": "云台控制按钮",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "recordvideo",
|
||||
"part": "left",
|
||||
"defaultActive": 0,
|
||||
"memo": "录制按钮",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "talk",
|
||||
"part": "left",
|
||||
"defaultActive": 0,
|
||||
"memo": "对讲按钮",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "zoom",
|
||||
"part": "left",
|
||||
"defaultActive": 0,
|
||||
"memo": "电子放大",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "hd",
|
||||
"part": "right",
|
||||
"defaultActive": 0,
|
||||
"memo": "清晰度切换按钮",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "webExpend",
|
||||
"part": "right",
|
||||
"defaultActive": 0,
|
||||
"memo": "网页全屏按钮",
|
||||
"isrender": 1
|
||||
},
|
||||
{
|
||||
"iconId": "expend",
|
||||
"part": "right",
|
||||
"defaultActive": 0,
|
||||
"memo": "全局全屏按钮",
|
||||
"isrender": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
var playr;
|
||||
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var accessToken = res.data.accessToken;
|
||||
playr = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: 'ezopen://open.ys7.com/G39444019/1.live',
|
||||
//template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
themeData: themeData,
|
||||
plugin: ['talk'], // 加载插件，talk-对讲
|
||||
width: 600,
|
||||
height: 400,
|
||||
});
|
||||
});
|
||||
function fullScreen() {
|
||||
var playPromise = playr.fullScreen();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function play() {
|
||||
var playPromise = playr.play();
|
||||
playPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stop() {
|
||||
var stopPromise = playr.stop();
|
||||
stopPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime() {
|
||||
var getOSDTimePromise = playr.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function getOSDTime2() {
|
||||
var getOSDTimePromise = playr2.getOSDTime();
|
||||
getOSDTimePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function capturePicture() {
|
||||
var capturePicturePromise = playr.capturePicture();
|
||||
capturePicturePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function openSound() {
|
||||
var openSoundPromise = playr.openSound();
|
||||
openSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function closeSound() {
|
||||
var closeSoundPromise = playr.closeSound();
|
||||
closeSoundPromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function startSave() {
|
||||
var startSavePromise = playr.startSave();
|
||||
startSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function stopSave() {
|
||||
var stopSavePromise = playr.stopSave();
|
||||
stopSavePromise.then((data) => {
|
||||
console.log("promise 获取 数据", data)
|
||||
})
|
||||
}
|
||||
function ezopenStartTalk() {
|
||||
playr.startTalk();
|
||||
}
|
||||
function ezopenStopTalk() {
|
||||
playr.stopTalk();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
|
@ -7,12 +7,12 @@
|
|||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>汾西县黄河流域农业面源污染平台</title>
|
||||
<link rel="stylesheet" href="<%= BASE_URL %>reset.css">
|
||||
<link rel="stylesheet" href="<%= BASE_URL %>layui/dist/css/layui.css">
|
||||
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
||||
<script type="text/javascript" src="<%= BASE_URL %>layui/dist/layui.js" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" src="https://webapi.amap.com/maps?v=2.0&key=47da8a3f3ca516ecef00f9c05bf015fb&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>
|
||||
<script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/mock_position.js"></script>
|
||||
<!-- <link rel="stylesheet" href="<%= BASE_URL %>layui/dist/css/layui.css">-->
|
||||
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
|
||||
<!-- <script type="text/javascript" src="<%= BASE_URL %>layui/dist/layui.js" crossorigin="anonymous"></script>-->
|
||||
<!-- <script type="text/javascript" crossorigin="anonymous" src="https://webapi.amap.com/maps?v=2.0&key=47da8a3f3ca516ecef00f9c05bf015fb&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>-->
|
||||
<!-- <script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js" crossorigin="anonymous"></script>-->
|
||||
<!-- <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/mock_position.js"></script>-->
|
||||
</head>
|
||||
<body style="overflow:hidden;background-color:#001B42;">
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
/*Plugin CSS*/
|
||||
.str_wrap {
|
||||
overflow:hidden;
|
||||
//zoom:1;
|
||||
width:100%;
|
||||
font-size:12px;
|
||||
line-height:16px;
|
||||
position:relative;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
background:transparent;
|
||||
white-space:nowrap;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.str_wrap.str_active {
|
||||
background:transparent;
|
||||
}
|
||||
.str_move {
|
||||
white-space:nowrap;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
cursor:pointer;
|
||||
}
|
||||
.str_move_clone {
|
||||
display:inline-block;
|
||||
/* display:inline;
|
||||
zoom:1;*/
|
||||
vertical-align:top;
|
||||
position:absolute;
|
||||
left:100%;
|
||||
top:0;
|
||||
}
|
||||
.str_vertical .str_move_clone {
|
||||
left:0;
|
||||
top:100%;
|
||||
}
|
||||
.str_down .str_move_clone {
|
||||
left:0;
|
||||
bottom:100%;
|
||||
}
|
||||
.str_vertical .str_move,
|
||||
.str_down .str_move {
|
||||
white-space:normal;
|
||||
width:100%;
|
||||
}
|
||||
.str_static .str_move,
|
||||
.no_drag .str_move,
|
||||
.noStop .str_move{
|
||||
cursor:pointer;
|
||||
}
|
||||
.str_wrap img {
|
||||
max-width:none !important;
|
||||
}
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
body {
|
||||
color: #000;
|
||||
font: 13px/1.6em Arial, Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
border:100px solid #0769AD;
|
||||
border-width:0 100px;
|
||||
background:#000;
|
||||
}
|
||||
a {color:#0769AD; text-decoration:underline;}
|
||||
.conteiner {
|
||||
margin: auto;
|
||||
|
||||
text-align:center;
|
||||
padding:10px 0 10px 0;
|
||||
position:relative;
|
||||
}
|
||||
.header {
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
text-align: left;
|
||||
height:72px;
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
}
|
||||
.autor {
|
||||
left: -112px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
margin-top:-45px;
|
||||
|
||||
}
|
||||
.logoMass {
|
||||
color:#fff;
|
||||
}
|
||||
.logoMasscode {
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
line-height:72px;
|
||||
font-size:50px;
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
font-weight:900;
|
||||
display:block;
|
||||
letter-spacing:-8px;
|
||||
|
||||
-moz-transform:rotate(-90deg);
|
||||
-webkit-transform:rotate(-90deg);
|
||||
-o-transform:rotate(-90deg);
|
||||
-ms-transform:rotate(-90deg);
|
||||
transform:rotate(-90deg);
|
||||
}
|
||||
.descr {
|
||||
text-align: left;
|
||||
margin-left:30px;
|
||||
margin-right:30px;
|
||||
}
|
||||
h2 { clear:both; padding:40px 0 5px 0; line-height:1.2em; text-align:left}
|
||||
hr { clear:both; border:0; border-bottom:1px dashed #ccc; height:0; margin:20px 0; display:block}
|
||||
.slidik { margin:auto !important}
|
||||
pre {text-align:left}
|
||||
h3,
|
||||
p { text-align:left;}
|
||||
|
||||
|
||||
.str1,
|
||||
.str2,
|
||||
.str3,
|
||||
.str4,
|
||||
.str5,
|
||||
.str6,
|
||||
.str9 { margin:0 0 30px 0;}
|
||||
.str4,
|
||||
.str5,
|
||||
.str6,
|
||||
.str8 {
|
||||
/*width:24% !important;*/
|
||||
display:inline-block;
|
||||
//display:inline;
|
||||
//zoom:1;
|
||||
vertical-align:top;
|
||||
}
|
||||
.str_wrap p {
|
||||
padding:10px 0;
|
||||
margin:0;
|
||||
}
|
||||
.str_vertical p {
|
||||
padding:10px;
|
||||
}
|
||||
fieldset { border:1px dotted #AAADC4; margin:0 0 45px 0; background:#fff; box-shadow:0 0 0 20px #fff; border-radius:1px; text-align:left; padding:30px 40px; position:relative; display:block;}
|
||||
legend { text-transform:uppercase; font-weight:900;}
|
||||
h3 {
|
||||
color:#fff;
|
||||
padding:0 0 10px 0;
|
||||
text-align:center;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.navPr {
|
||||
margin:0 0 40px ;
|
||||
}
|
||||
.navPr a {
|
||||
display:inline-block;
|
||||
vertical-align:top;
|
||||
background:#0769AD;
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
text-decoration:none;
|
||||
padding:5px 15px;
|
||||
margin:0 5px;
|
||||
border:1px solid #0769AD;
|
||||
}
|
||||
.navPr span {
|
||||
display:inline-block;
|
||||
vertical-align:top;
|
||||
background:#fff;
|
||||
color:#000;
|
||||
font-weight:700;
|
||||
text-decoration:none;
|
||||
padding:5px 15px;
|
||||
margin:0 5px;
|
||||
border:1px solid #fff;
|
||||
|
||||
}
|
||||
.optionsTable {
|
||||
border-collapse:collapse;
|
||||
}
|
||||
.optionsTable td {
|
||||
border-top:1px solid #e5e5e5;
|
||||
padding:10px 50px 10px 0;
|
||||
}
|
||||
.optionsTable th {padding:10px 50px 10px 0; }
|
||||
.optionsTable tr td:first-child {
|
||||
font-weight:900;
|
||||
}
|
||||
.optionsTable tr:nth-child(even) td {
|
||||
background:#FCFCFC
|
||||
}
|
||||
.optionsTable th {
|
||||
color:#000;
|
||||
text-transform:uppercase;
|
||||
font-weight:900;
|
||||
}
|
||||
.value { padding:4px 10px; background:#000; color:#fff;}
|
||||
|
||||
.addContent,
|
||||
.removeContent,
|
||||
.destroyBtn,
|
||||
.updateBtn { background: #0769AD; color:#fff; display:inline-block; padding:10px 20px; font-size:16px;}
|
||||
|
||||
h2 { clear:both; padding:0px 0 5px 0; line-height:1.2em; text-align:left}
|
||||
.btnWrap {text-align:center; padding:30px 0 0;}
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
var stringEl = $('.str1').liMarquee();
|
||||
$('.speedChange').on('click',function(){
|
||||
var speedChange = $(this);
|
||||
var dataSpeed = speedChange.data('scrollamount');
|
||||
|
||||
stringEl.trigger('mouseenter');
|
||||
stringEl.data({scrollamount:dataSpeed});
|
||||
stringEl.trigger('mouseleave');
|
||||
|
||||
return false;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Параметры по умолчанию</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
|
||||
<div class="str1 str_wrap">
|
||||
Будь собой! Если казаться не тем, кто ты на самом деле, можно получить не ту работу, не тех друзей, не свою любовь и вообще, не свою жизнь.
|
||||
</div>
|
||||
|
||||
<a class="speedChange" data-scrollamount="30" href="#">Медленно (30px/sec)</a>
|
||||
<a class="speedChange" data-scrollamount="90" href="#">Нормально (90px/sec)</a>
|
||||
<a class="speedChange" data-scrollamount="250" href="#">Быстро (250px/sec)</a>
|
||||
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
var stringEl = $('.str1').liMarquee();
|
||||
$('.speedChange').on('click',function(){
|
||||
var speedChange = $(this);
|
||||
var dataSpeed = speedChange.data('scrollamount');
|
||||
|
||||
stringEl.trigger('mouseenter');
|
||||
stringEl.data({scrollamount:dataSpeed});
|
||||
stringEl.trigger('mouseleave');
|
||||
|
||||
return false;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str1 str_wrap">
|
||||
Будь собой! Если казаться не тем, кто ты на самом деле, можно получить не ту работу, не тех друзей, не свою любовь и вообще, не свою жизнь.
|
||||
</div>
|
||||
<a class="speedChange" data-scrollamount="30" href="#">Медленно (30px/sec)</a>
|
||||
<a class="speedChange" data-scrollamount="90" href="#">Нормально (90px/sec)</a>
|
||||
<a class="speedChange" data-scrollamount="250" href="#">Быстро (250px/sec)</a>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str1').liMarquee();
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Параметры по умолчанию</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
|
||||
<div class="str1 str_wrap">
|
||||
Будь собой! Если казаться не тем, кто ты на самом деле, можно получить не ту работу, не тех друзей, не свою любовь и вообще, не свою жизнь.
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str1').liMarquee();
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str1 str_wrap">
|
||||
Будь собой! Если казаться не тем, кто ты на самом деле, можно получить не ту работу, не тех друзей, не свою любовь и вообще, не свою жизнь.
|
||||
</div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str').liMarquee();
|
||||
$('.destroyBtn').on('click',function(){
|
||||
$('.str').liMarquee('destroy');
|
||||
return false;
|
||||
})
|
||||
$('.updateBtn').on('click',function(){
|
||||
$('.str').liMarquee('update');
|
||||
return false;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Использование метода "destroy"</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
<div class="str str_wrap" style="margin-bottom:30px">
|
||||
И с другом и с врагом ты должен быть хорош!
|
||||
</div>
|
||||
|
||||
<a class="destroyBtn" href="">destroy plugin</a>
|
||||
<a class="updateBtn" href="">update plugin</a>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str').liMarquee();
|
||||
|
||||
$('.destroyBtn').on('click',function(){
|
||||
$('.str').liMarquee('destroy');
|
||||
return false;
|
||||
})
|
||||
$('.updateBtn').on('click',function(){
|
||||
$('.str').liMarquee('update');
|
||||
return false;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str str_wrap">
|
||||
И с другом и с врагом ты должен быть хорош!
|
||||
</div>
|
||||
|
||||
<a class="destroyBtn" href="">destroy plugin</a>
|
||||
<a class="updateBtn" href="">update plugin</a>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str2').liMarquee({
|
||||
drag: false
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Отключена возможность draggable (перетаскивания)</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
|
||||
<div class="str2 str_wrap">
|
||||
Живи так, как хочешь ты, а не как ожидают от тебя другие. Не важно оправдаешь ты их ожидания или нет, умирать ты будешь без них. И свои победы одержишь сам! © Конфуций
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str2').liMarquee({
|
||||
drag: false
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str2 str_wrap">
|
||||
Живи так, как хочешь ты, а не как ожидают от тебя другие. Не важно оправдаешь ты их ожидания или нет, умирать ты будешь без них. И свои победы одержишь сам! © Конфуций
|
||||
</div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str9').liMarquee({
|
||||
direction: 'right'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Движение слева на право</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
|
||||
<div class="str9 str_wrap">
|
||||
Проблема в том, что, не рискуя, мы рискуем в сто раз больше. © Марк Аврелий
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str9').liMarquee({
|
||||
direction: 'right'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str9 str_wrap">
|
||||
Проблема в том, что, не рискуя, мы рискуем в сто раз больше. © Марк Аврелий
|
||||
</div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str10').liMarquee({
|
||||
hoverstop: false
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Отключена остановка строки при наведении мыши</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
|
||||
<div class="str10 str_wrap">
|
||||
Самая большая человеческая глупость – страх. Страх совершить поступок, поговорить, признаться. Мы всегда боимся, и поэтому так часто проигрываем. Бернард Шоу
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str10').liMarquee({
|
||||
hoverstop: false
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str10 str_wrap">
|
||||
Самая большая человеческая глупость – страх. Страх совершить поступок, поговорить, признаться. Мы всегда боимся, и поэтому так часто проигрываем. Бернард Шоу
|
||||
</div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str3').liMarquee();
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.str3 .str_item {
|
||||
font-size:0;
|
||||
line-height:0
|
||||
}
|
||||
.str3 img { opacity:0.8}
|
||||
.str3 img:hover { opacity:1}
|
||||
.str3.str_wrap.str_active {
|
||||
background:#fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Бегущие изображения</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
<div class="str3 str_wrap">
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/1c0ae2205709722b62e843abc0471a55_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/6f43b5263fbba79c5962514b85d34738_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/9ecd376e5371efaef9aad9bc9143aed8_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/19f9cefdfb07230a68581d617885a3af_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/36fdb1a35cd2f54f95cf2119fb5bc7ed_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/1c0ae2205709722b62e843abc0471a55_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/6f43b5263fbba79c5962514b85d34738_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/9ecd376e5371efaef9aad9bc9143aed8_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/19f9cefdfb07230a68581d617885a3af_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/36fdb1a35cd2f54f95cf2119fb5bc7ed_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str3').liMarquee();
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str3 str_wrap">
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/1c0ae2205709722b62e843abc0471a55_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/6f43b5263fbba79c5962514b85d34738_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/9ecd376e5371efaef9aad9bc9143aed8_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/19f9cefdfb07230a68581d617885a3af_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/36fdb1a35cd2f54f95cf2119fb5bc7ed_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/1c0ae2205709722b62e843abc0471a55_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/6f43b5263fbba79c5962514b85d34738_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/9ecd376e5371efaef9aad9bc9143aed8_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/19f9cefdfb07230a68581d617885a3af_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/36fdb1a35cd2f54f95cf2119fb5bc7ed_S.jpg"></a>
|
||||
<a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
|
||||
</div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,196 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<span>Демо</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Описание</legend>
|
||||
liMarquee - jQuery Marquee или бегущая строка на jQuery<br><br>
|
||||
Плагин liMarquee является аналогом тега «marquee» и также как и он не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. <br><br>
|
||||
Но в отличии от тега «marquee», liMarquee имеет ряд преимуществ таких как:<br><br>
|
||||
|
||||
1. Перемещение можно задать не только по горизонтали, но и вертикали.<br>
|
||||
2. Бегущая строка liMarquee останавливается при наведении курсора мыши.<br>
|
||||
3. После остановки бегущую строку можно двигать мышью и перемещать на удобную для чтения или просмотра позицию<br>
|
||||
4. Возможна подгрузка текста из XML файла. <br>
|
||||
5. Возможно динамическое изменение скорости и мн.др.
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Демо</legend>
|
||||
<p><a href="default.html">Параметры по умолчанию</a></p>
|
||||
<p><a href="from_left_to_right.html">Движение слева на право</a></p>
|
||||
<p><a href="drag_line_off.html">Отключена возможность draggable (перетаскивания)</a></p>
|
||||
<p><a href="hover_stop_off.html">Отключена остановка строки при наведении мыши</a></p>
|
||||
<p><a href="image.html">Бегущие изображения</a></p>
|
||||
<p><a href="move_html.html">Бегущая строка с html кодом</a></p>
|
||||
<p><a href="../vertical.html">Движение по вертикали</a></p>
|
||||
<p><a href="../xml.html">XML</a></p>
|
||||
<p><a href="../update.html">Использование метода "update"</a></p>
|
||||
<p><a href="destroy.html">Использование метода "destroy"</a></p>
|
||||
<p><a href="change_speed.html">Изменение скорости движения</a></p>
|
||||
<p><a href="pause_and_play.html">Методы "pause" и "play"</a></p>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Параметры</legend>
|
||||
|
||||
|
||||
<table class="optionsTable" width="100%" border="0" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<th width="1%">Option</th>
|
||||
<th width="1%">Default value</th>
|
||||
<th>Datatype</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>direction</td>
|
||||
<td>"left"</td>
|
||||
<td>String</td>
|
||||
<td>Указывает направление движения бегущей строки. <br>Может принимать значения: <span class="value">"left"</span>, <span class="value">"right"</span>, <span class="value">"up"</span>, <span class="value">"down"</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>loop</td>
|
||||
<td>-1</td>
|
||||
<td>Number</td>
|
||||
<td>Задает, сколько раз будет прокручиваться содержимое. <br>Может принимать значения: <span class="value">любое целое положительное число</span> или <span class="value">-1</span> - для бесконечного повторения </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scrolldelay</td>
|
||||
<td>0</td>
|
||||
<td>Number</td>
|
||||
<td>Величина задержки перед каждым повторением. <br>Может принимать значения: <span class="value">любое целое положительное число</span> в миллисекундах</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scrollamount</td>
|
||||
<td>50</td>
|
||||
<td>Number</td>
|
||||
<td>Скорость движения строки. <br>Может принимать значения: <span class="value">любое целое положительное число</span> px/sec</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>circular</td>
|
||||
<td>true</td>
|
||||
<td>Boolean</td>
|
||||
<td>Создает эффект бесконечной строки. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>drag</td>
|
||||
<td>true</td>
|
||||
<td>Boolean</td>
|
||||
<td>Включает перетаскивание строки мышкой. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>runshort</td>
|
||||
<td>true</td>
|
||||
<td>Boolean</td>
|
||||
<td>Включает движение "короткой" строки, когда размер контента меньше размера бегущей строки. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hoverstop</td>
|
||||
<td>true</td>
|
||||
<td>Boolean</td>
|
||||
<td>Включает остановку строки при наведения курсора мыши. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>xml</td>
|
||||
<td>false</td>
|
||||
<td>Boolean, String</td>
|
||||
<td>Подключает внешний XML файл с контентом, и загружает этот контент в бегущую строку. <br>Может принимать значения: <span class="value">путь к XML файлу</span> или <span class="value">false</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>inverthover</td>
|
||||
<td>false</td>
|
||||
<td>Boolean</td>
|
||||
<td>Инвертирует стандартную реакцию на наведение курсора. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Методы</legend>
|
||||
<h2 class="value">update()</h2>
|
||||
<p>Обновляет инициализацию строки (например: после изменения внутреннего содержания)</p>
|
||||
<p><i>(Этот метод не принимает аргументов)</i></p>
|
||||
|
||||
<h2>Пример кода</h2>
|
||||
|
||||
$('.str').liMarquee('update');
|
||||
|
||||
|
||||
<h2 class="value">destroy()</h2>
|
||||
<p>Удаляет весь функционал бегущей строки. Возвращает элемент в состояние до инициализации плагина</p>
|
||||
<p><i>(Этот метод не принимает аргументов)</i></p>
|
||||
|
||||
<h2>Пример кода</h2>
|
||||
|
||||
$('.str').liMarquee('destroy');
|
||||
|
||||
|
||||
<h2 class="value">pause()</h2>
|
||||
<p>Останавливает движение строки</p>
|
||||
<p><i>(Этот метод не принимает аргументов)</i></p>
|
||||
|
||||
<h2>Пример кода</h2>
|
||||
|
||||
$('.str').liMarquee('pause');
|
||||
|
||||
|
||||
<h2 class="value">play()</h2>
|
||||
<p>Запускает движение строки</p>
|
||||
<p><i>(Этот метод не принимает аргументов)</i></p>
|
||||
|
||||
<h2>Пример кода</h2>
|
||||
|
||||
$('.str').liMarquee('play');
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>LOG</legend>
|
||||
20.11.2014 - Добавлены методы "pause" и "play" для паузы/пуска движения строки<br>
|
||||
30.10.2014 - Добавлена возможность динамически изменить скорость движения строки (см демо: "Изменение скорости движения")<br>
|
||||
27.04.2014 - Добавлен метод "destroy", который удаляет весь функционал бегущей строки и возвращает элемент в состояние до инициализации плагина<br>
|
||||
30.03.2014 - Добавлено зацикливание короткой строки при перетаскивании<br>
|
||||
30.03.2014 - Устранен баг позиционирования длинной строки при перетаскивании<br>
|
||||
23.03.2014 - Добавлена блокировка случайного события "click" <br>
|
||||
09.02.2014 - Добавлен параметр "inverthover", который инвертирует стандартную реакцию на наведение курсора. <br>
|
||||
09.02.2014 - Иправлен баг при перетаскивании зацикленной строки<br>
|
||||
21.01.2014 - Исправлена ошибка расчета скорости при использовании метода "update"<br>
|
||||
04.12.2013 - Добавлен метод "update", который обновляет инициализацию строки после изменения внутреннего содержания<br>
|
||||
02.12.2013 - Добавлена возможность подгружать многострочный XML файл<br>
|
||||
22.11.2013 - Добавлен параметр "hoverstop". При значении "true" - строка останавливается при наведении курсора мыши (значение по умолчанию), "false" - строка не останавливается<br>
|
||||
22.11.2013 - Движение короткой строки справа налево и сверху вниз теперь начинается корректно (движение начинается с противоположного конца строки)<br>
|
||||
12.10.2013 - Добавлена возможность движения динамически меняющейся строки<br>
|
||||
07.09.2013 - Добавлена возможность перетаскивать строку с изображениями<br>
|
||||
07.09.2013 - Устранен баг при перетаскивании строки (когда курсор при зажатой LM выходил за пределы строки)<br>
|
||||
06.09.2013 - Добавлен пример с HTML блоками<br>
|
||||
30.07.2013 - Добавлено движение по горизонтали направо direction: 'right'<br>
|
||||
24.05.2013 - Добавлено движение по вертикали вниз direction: 'down'<br>
|
||||
17.05.2013 - Добавлена возможность подгрузки текста из xml файла<br>
|
||||
20.02.2013 - Устранен баг в непрерывной строке, который приводил к неожиданному ускорению бегущей строки<br>
|
||||
26.01.2013 - Добавлена управляемая возможность движения короткой строки (параметр: "runshort", значения: "true" или "false")<br>
|
||||
22.01.2013 - Фикс под медленный интернет. В HTML рекомендовано элементу сразу дописывать класс "str_wrap". Сам файл liMarquee.css для этого был немного изменен<br>
|
||||
22.01.2013 - Фикс под IE9. С версией jQuery 1.8 не работала функция $(window).load() - Этот баг устранен в версии 1.9.0, поэтому скрипт подключаем вместе с jquery версии 1.9.0
|
||||
|
||||
</fieldset>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str3-2').liMarquee();
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.str3 { font-size:0 !important}
|
||||
.str3-2 { background:none !important;}
|
||||
.str3-2 span { border:5px solid #ccc; background:#f1f1f1; color:#999; margin:0 5px; text-align:center; font:40px/100px Arial, Helvetica, sans-serif; width:100px; height:100px; display:inline-block; vertical-align:top;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Бегущая строка с html кодом</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
<div class="str3-2 str_wrap">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<span>6</span>
|
||||
<span>7</span>
|
||||
<span>8</span>
|
||||
<span>9</span>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str3-2').liMarquee();
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str3-2 str_wrap">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<span>6</span>
|
||||
<span>7</span>
|
||||
<span>8</span>
|
||||
<span>9</span>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str10').liMarquee();
|
||||
$('.btnPause').on('click',function(){
|
||||
$('.str10').liMarquee('pause');
|
||||
})
|
||||
$('.btnPlay').on('click',function(){
|
||||
$('.str10').liMarquee('play');
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Методы "pause" и "play"</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
|
||||
<div class="str10 str_wrap">
|
||||
Самая большая человеческая глупость – страх. Страх совершить поступок, поговорить, признаться. Мы всегда боимся, и поэтому так часто проигрываем. Бернард Шоу
|
||||
</div>
|
||||
<div class="btnWrap">
|
||||
<button class="btnPause">Pause</button>
|
||||
<button class="btnPlay">Play</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str10').liMarquee();
|
||||
$('.btnPause').on('click',function(){
|
||||
$('.str10').liMarquee('pause');
|
||||
})
|
||||
$('.btnPlay').on('click',function(){
|
||||
$('.str10').liMarquee('play');
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str10 str_wrap">
|
||||
Самая большая человеческая глупость – страх. Страх совершить поступок, поговорить, признаться. Мы всегда боимся, и поэтому так часто проигрываем. Бернард Шоу
|
||||
</div>
|
||||
<div class="btnWrap">
|
||||
<button class="btnPause">Pause</button>
|
||||
<button class="btnPlay">Play</button>
|
||||
</div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<textwrap>
|
||||
<text>
|
||||
В настоящей любви точки не бывает.
|
||||
</text>
|
||||
<text>
|
||||
Можно разойтись, разругаться, разочароваться — возможно абсолютно все.
|
||||
</text>
|
||||
<text>
|
||||
Но какие бы причины ни были, настоящая любовь все равно продолжает жить в сердце.
|
||||
</text>
|
||||
<text>
|
||||
Она отделяется от разума, живет вне происходящего.
|
||||
</text>
|
||||
<text>
|
||||
Ты ничего не можешь поделать с этой любовью и просто сохраняешь ее в себе.
|
||||
</text>
|
||||
<text>
|
||||
Эльчин Сафарли
|
||||
</text>
|
||||
</textwrap>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str4').liMarquee({
|
||||
direction: 'up'
|
||||
});
|
||||
var newContent = '<p>new content new content new content new content new content new content new content new </p>'
|
||||
|
||||
$('.addContent').on('click',function(){
|
||||
$('.str_origin',$('.str4')).html( $('.str_origin',$('.str4')).html() + newContent);
|
||||
$('.str4').liMarquee('update');
|
||||
return false;
|
||||
})
|
||||
|
||||
$('.removeContent').on('click',function(){
|
||||
$('p',$('.str4')).eq(0).remove();
|
||||
$('.str4').liMarquee('update');
|
||||
return false;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Использование метода "update"</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
<div class="str4 str_wrap" style="height:200px;">
|
||||
<p>И с другом и с врагом ты должен быть хорош!</p>
|
||||
|
||||
</div>
|
||||
|
||||
<a class="addContent" href="">add content</a>
|
||||
<a class="removeContent" href="">remove content</a>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str4').liMarquee({
|
||||
direction: 'up'
|
||||
});
|
||||
|
||||
var newContent = '<p>new content new content new content new content new content new content new content new </p>'
|
||||
|
||||
$('.addContent').on('click',function(){
|
||||
$('.str_origin',$('.str4')).html( $('.str_origin',$('.str4')).html() + newContent);
|
||||
$('.str4').liMarquee('update')
|
||||
return false;
|
||||
})
|
||||
|
||||
$('.removeContent').on('click',function(){
|
||||
$('p',$('.str4')).eq(0).remove();
|
||||
$('.str4').liMarquee('update')
|
||||
return false;
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str4 str_wrap" style="height:200px;">
|
||||
<p>И с другом и с врагом ты должен быть хорош!</p>
|
||||
<p>Кто по натуре добр, в том злобы не найдешь.</p>
|
||||
<p>Обидишь друга — наживешь врага ты,</p>
|
||||
<p>Врага обнимешь — друга обретешь.</p>
|
||||
<p>Омар Хайям</p>
|
||||
</div>
|
||||
|
||||
<a class="addContent" href="">add content</a>
|
||||
<a class="removeContent" href="">remove content</a>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str4').liMarquee({
|
||||
direction: 'up'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>Движение по вертикали</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
<div class="str4 str_wrap" style="height:200px;">
|
||||
<p>И с другом и с врагом ты должен быть хорош!</p>
|
||||
<p>Кто по натуре <a href="#">добр</a>, в том злобы не найдешь.</p>
|
||||
<p>Обидишь друга — наживешь врага ты,</p>
|
||||
<p>Врага обнимешь — друга обретешь.</p>
|
||||
<p>Омар Хайям</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str4').liMarquee({
|
||||
direction: 'up'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str4 str_wrap" style="height:200px;">
|
||||
<p>И с другом и с врагом ты должен быть хорош!</p>
|
||||
<p>Кто по натуре добр, в том злобы не найдешь.</p>
|
||||
<p>Обидишь друга — наживешь врага ты,</p>
|
||||
<p>Врага обнимешь — друга обретешь.</p>
|
||||
<p>Омар Хайям</p>
|
||||
</div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>liMarquee</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str7').liMarquee({
|
||||
xml:'text.xml'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="conteiner">
|
||||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||||
<div class="navPr">
|
||||
<a href="index.html">Демо</a>
|
||||
<span>XML</span>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Результат</legend>
|
||||
|
||||
<div class="str7 str_wrap"></div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Подключаемые файлы</legend>
|
||||
<pre><xmp>
|
||||
<link rel="stylesheet" href="../css/liMarquee.css">
|
||||
<script src="js/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery.liMarquee.js"></script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Инициализация плагина</legend>
|
||||
<pre><xmp>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
$('.str7').liMarquee({
|
||||
xml:'text.xml' //путь к xml файлу
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Код HTML</legend>
|
||||
<pre><xmp>
|
||||
<div class="str7 str_wrap"></div>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Содержание файла text.xml</legend>
|
||||
<pre><xmp>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<textwrap>
|
||||
<text>
|
||||
В настоящей любви точки не бывает.
|
||||
</text>
|
||||
<text>
|
||||
Можно разойтись, разругаться, разочароваться — возможно абсолютно все.
|
||||
</text>
|
||||
<text>
|
||||
Но какие бы причины ни были, настоящая любовь все равно продолжает жить в сердце.
|
||||
</text>
|
||||
<text>
|
||||
Она отделяется от разума, живет вне происходящего.
|
||||
</text>
|
||||
<text>
|
||||
Ты ничего не можешь поделать с этой любовью и просто сохраняешь ее в себе.
|
||||
</text>
|
||||
<text>
|
||||
Эльчин Сафарли
|
||||
</text>
|
||||
</textwrap>
|
||||
</xmp></pre>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="autor">
|
||||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +0,0 @@
|
|||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,11
|
||||
[InternetShortcut]
|
||||
IDList=
|
||||
URL=https://www.cnblogs.com/wwqzbl/p/17047215.html
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,11
|
||||
[InternetShortcut]
|
||||
IDList=
|
||||
URL=https://www.jq22.com/yanshi13434
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,11
|
||||
[InternetShortcut]
|
||||
IDList=
|
||||
URL=https://www.jq22.com/yanshi4125
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,11
|
||||
[InternetShortcut]
|
||||
IDList=
|
||||
URL=https://www.dowebok.com/188.html
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>轻量级jquery数字动画插件</title>
|
||||
|
||||
<style type="text/css">
|
||||
body{background-color: #222222; color: #fff}
|
||||
.container { margin:150px auto; max-width:480px;}
|
||||
h2,h3 { text-align:center;}
|
||||
.demo { text-align:center; margin-top:1000px;}
|
||||
span.counter { display: block; margin: 20px auto; font-size: 64px; font-family: Arial; font-weight: bold; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="htmleaf-container">
|
||||
|
||||
<div class="container">
|
||||
<h2>jQuery Countup.js Plugin Demo</h2>
|
||||
<h3>向下滚动页面 ↓</h3>
|
||||
<div class="demo">
|
||||
<span class="counter">1,498,547.00</span>
|
||||
<span class="counter">99.99</span>
|
||||
<span class="counter">1234567</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||||
<script src="js/jquery.waypoints.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$('.counter').countUp();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,88 +0,0 @@
|
|||
/*!
|
||||
* jquery.countup.js 1.0.3
|
||||
*
|
||||
* Copyright 2016, Adrián Guerra Marrero http://agmstudio.io @AGMStudio_io
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Date: Oct 27, 2016
|
||||
*/
|
||||
(function( $ ){
|
||||
"use strict";
|
||||
|
||||
$.fn.countUp = function( options ) {
|
||||
|
||||
// Defaults
|
||||
var settings = $.extend({
|
||||
'time': 2000,
|
||||
'delay': 10
|
||||
}, options);
|
||||
|
||||
return this.each(function(){
|
||||
|
||||
// Store the object
|
||||
var $this = $(this);
|
||||
var $settings = settings;
|
||||
|
||||
var counterUpper = function() {
|
||||
if(!$this.data('counterupTo')) {
|
||||
$this.data('counterupTo',$this.text());
|
||||
}
|
||||
var time = parseInt($this.data("counter-time")) > 0 ? parseInt($this.data("counter-time")) : $settings.time;
|
||||
var delay = parseInt($this.data("counter-delay")) > 0 ? parseInt($this.data("counter-delay")) : $settings.delay;
|
||||
var divisions = time / delay;
|
||||
var num = $this.data('counterupTo');
|
||||
var nums = [num];
|
||||
var isComma = /[0-9]+,[0-9]+/.test(num);
|
||||
num = num.replace(/,/g, '');
|
||||
var isInt = /^[0-9]+$/.test(num);
|
||||
var isFloat = /^[0-9]+\.[0-9]+$/.test(num);
|
||||
var decimalPlaces = isFloat ? (num.split('.')[1] || []).length : 0;
|
||||
|
||||
// Generate list of incremental numbers to display
|
||||
for (var i = divisions; i >= 1; i--) {
|
||||
|
||||
// Preserve as int if input was int
|
||||
var newNum = parseInt(Math.round(num / divisions * i));
|
||||
|
||||
// Preserve float if input was float
|
||||
if (isFloat) {
|
||||
newNum = parseFloat(num / divisions * i).toFixed(decimalPlaces);
|
||||
}
|
||||
|
||||
// Preserve commas if input had commas
|
||||
if (isComma) {
|
||||
while (/(\d+)(\d{3})/.test(newNum.toString())) {
|
||||
newNum = newNum.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
|
||||
}
|
||||
}
|
||||
|
||||
nums.unshift(newNum);
|
||||
}
|
||||
|
||||
$this.data('counterup-nums', nums);
|
||||
$this.text('0');
|
||||
|
||||
// Updates the number until we're done
|
||||
var f = function() {
|
||||
$this.text($this.data('counterup-nums').shift());
|
||||
if ($this.data('counterup-nums').length) {
|
||||
setTimeout($this.data('counterup-func'),delay);
|
||||
} else {
|
||||
delete $this.data('counterup-nums');
|
||||
$this.data('counterup-nums', null);
|
||||
$this.data('counterup-func', null);
|
||||
}
|
||||
};
|
||||
$this.data('counterup-func', f);
|
||||
|
||||
// Start the count up
|
||||
setTimeout($this.data('counterup-func'),delay);
|
||||
};
|
||||
|
||||
// Perform counts when the element gets into view
|
||||
$this.waypoint(counterUpper, { offset: '100%', triggerOnce: true });
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})( jQuery );
|
||||
|
|
@ -1 +0,0 @@
|
|||
!function(t){"use strict";t.fn.countUp=function(e){var a=t.extend({time:2e3,delay:10},e);return this.each(function(){var e=t(this),n=a,u=function(){e.data("counterupTo")||e.data("counterupTo",e.text());var t=parseInt(e.data("counter-time"))>0?parseInt(e.data("counter-time")):n.time,a=parseInt(e.data("counter-delay"))>0?parseInt(e.data("counter-delay")):n.delay,u=t/a,r=e.data("counterupTo"),o=[r],c=/[0-9]+,[0-9]+/.test(r);r=r.replace(/,/g,"");for(var d=(/^[0-9]+$/.test(r),/^[0-9]+\.[0-9]+$/.test(r)),s=d?(r.split(".")[1]||[]).length:0,i=u;i>=1;i--){var p=parseInt(Math.round(r/u*i));if(d&&(p=parseFloat(r/u*i).toFixed(s)),c)for(;/(\d+)(\d{3})/.test(p.toString());)p=p.toString().replace(/(\d+)(\d{3})/,"$1,$2");o.unshift(p)}e.data("counterup-nums",o),e.text("0");var f=function(){e.text(e.data("counterup-nums").shift()),e.data("counterup-nums").length?setTimeout(e.data("counterup-func"),a):(delete e.data("counterup-nums"),e.data("counterup-nums",null),e.data("counterup-func",null))};e.data("counterup-func",f),setTimeout(e.data("counterup-func"),a)};e.waypoint(u,{offset:"100%",triggerOnce:!0})})}}(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
/*! layer mobile-v2.0.0 Web 通用弹出层组件 MIT License */
|
||||
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 701 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
|
|
@ -1 +0,0 @@
|
|||
html #layui_layer_skinmoonstylecss{display:none;position:absolute;width:1989px}body .layer-ext-moon[type=dialog]{min-width:320px}body .layer-ext-moon-msg[type=dialog]{min-width:200px}body .layer-ext-moon .layui-layer-title{background:#f6f6f6;color:#212a31;font-size:16px;font-weight:700;height:46px;line-height:46px;border-bottom:1px solid #D5D5D5}body .layer-ext-moon .layui-layer-content .layui-layer-ico{height:32px;width:32px;top:18.5px}body .layer-ext-moon .layui-layer-ico0{background:url(default.png) -96px 0 no-repeat}body .layer-ext-moon .layui-layer-ico1{background:url(default.png) -224px 0 no-repeat}body .layer-ext-moon .layui-layer-ico2{background:url(default.png) -192px 0 no-repeat}body .layer-ext-moon .layui-layer-ico3{background:url(default.png) -160px 0 no-repeat}body .layer-ext-moon .layui-layer-ico4{background:url(default.png) -320px 0 no-repeat}body .layer-ext-moon .layui-layer-ico5{background:url(default.png) -288px 0 no-repeat}body .layer-ext-moon .layui-layer-ico6{background:url(default.png) -256px 0}body .layer-ext-moon .layui-layer-ico7{background:url(default.png) -128px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin{top:15px;right:15px}body .layer-ext-moon .layui-layer-setwin a{width:16px;height:16px}body .layer-ext-moon .layui-layer-setwin .layui-layer-min cite:hover{background-color:#56abe4}body .layer-ext-moon .layui-layer-setwin .layui-layer-max{background:url(default.png) -80px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-max:hover{background:url(default.png) -64px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin{background:url(default.png) -32px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin:hover{background:url(default.png) -16px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-close1,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2{background:url(default.png)}body .layer-ext-moon .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover{background:url(default.png) -48px 0}body .layer-ext-moon .layui-layer-padding{padding-top:24px}body .layer-ext-moon .layui-layer-btn{text-align:center;padding-top:15px;padding-bottom:15px;background:#f0f4f7;border-top:1px #c7c7c7 solid}body .layer-ext-moon .layui-layer-btn a{font-size:12px;font-weight:400;margin:0 7px;padding:6px 20px;color:#fff;border:1px solid #0064b6;background:no-repeat #0071ce;border-radius:3px;display:inline-block;height:20px;line-height:20px;text-align:center;vertical-align:middle;text-decoration:none;outline:0}body .layer-ext-moon .layui-layer-btn .layui-layer-btn0{background:#0071ce}body .layer-ext-moon .layui-layer-btn .layui-layer-btn1{background:#fff;color:#404a58;border:1px solid #c0c4cd;border-radius:3px}body .layer-ext-moon .layui-layer-btn .layui-layer-btn2{background:#f60;color:#fff;border:1px solid #f60;border-radius:3px}body .layer-ext-moon .layui-layer-btn .layui-layer-btn3{background:red;color:#fff;border:1px solid red;border-radius:3px}body .layer-ext-moon .layui-layer-title span.layui-layer-tabnow{height:47px}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,32 +0,0 @@
|
|||
/**
|
||||
* code
|
||||
*/
|
||||
|
||||
/* 加载就绪标志 */
|
||||
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
|
||||
|
||||
/* 默认风格 */
|
||||
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
|
||||
.layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
|
||||
.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #B7B7B7;}
|
||||
.layui-code-about > a{padding-left: 10px;}
|
||||
.layui-code-view > .layui-code-ol,
|
||||
.layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
|
||||
.layui-code-view > .layui-code-ol > li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
|
||||
.layui-code-view > .layui-code-ol > li:first-child,
|
||||
.layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
|
||||
.layui-code-view > .layui-code-ol > li:last-child,
|
||||
.layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
|
||||
.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px; list-style-type: none; *list-style-type: none; background-color: #fff;}
|
||||
.layui-code-view pre{margin: 0;}
|
||||
|
||||
/* 深色风格 */
|
||||
.layui-code-dark{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
|
||||
.layui-code-dark > .layui-code-title{border-bottom: none;}
|
||||
.layui-code-dark > .layui-code-ol > li,
|
||||
.layui-code-dark > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
|
||||
.layui-code-dark > .layui-code-ul > li{margin-left: 6px;}
|
||||
|
||||
/* 代码预览 */
|
||||
.layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;}
|
||||
.layui-code-demo .layui-tab-content{padding: 15px; border-top: none}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
/** 图标字体 **/
|
||||
@font-face {font-family: 'laydate-icon';
|
||||
src: url('./font/iconfont.eot');
|
||||
src: url('./font/iconfont.eot#iefix') format('embedded-opentype'),
|
||||
url('./font/iconfont.svg#iconfont') format('svg'),
|
||||
url('./font/iconfont.woff') format('woff'),
|
||||
url('./font/iconfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.laydate-icon{
|
||||
font-family:"laydate-icon" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
/**
|
||||
|
||||
@Name: laydata
|
||||
|
||||
**/
|
||||
|
||||
|
||||
html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||
|
||||
/* 初始化 */
|
||||
.layui-laydate *{margin: 0; padding: 0;}
|
||||
|
||||
/* 主体结构 */
|
||||
.layui-laydate, .layui-laydate *{box-sizing: border-box;}
|
||||
.layui-laydate{position: absolute; z-index: 66666666; margin: 5px 0; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
|
||||
.layui-laydate-main{width: 272px;}
|
||||
.layui-laydate-header *,
|
||||
.layui-laydate-content td,
|
||||
.layui-laydate-list li{transition-duration: .3s; -webkit-transition-duration: .3s;}
|
||||
|
||||
/* 微微往下滑入 */
|
||||
@keyframes laydate-downbit {
|
||||
0% {opacity: 0.3; transform: translate3d(0, -5px, 0);}
|
||||
100% {opacity: 1; transform: translate3d(0, 0, 0);}
|
||||
}
|
||||
|
||||
.layui-laydate{animation-name: laydate-downbit;}
|
||||
.layui-laydate-static{ position: relative; z-index: 0; display: inline-block; margin: 0; -webkit-animation: none; animation: none;}
|
||||
|
||||
/* 展开年月列表时 */
|
||||
.laydate-ym-show .laydate-prev-m,
|
||||
.laydate-ym-show .laydate-next-m{display: none !important;}
|
||||
.laydate-ym-show .laydate-prev-y,
|
||||
.laydate-ym-show .laydate-next-y{display: inline-block !important;}
|
||||
.laydate-ym-show .laydate-set-ym span[lay-type="month"]{display: none !important;}
|
||||
|
||||
/* 展开时间列表时 */
|
||||
.laydate-time-show .layui-laydate-header .layui-icon,
|
||||
.laydate-time-show .laydate-set-ym span[lay-type="year"],
|
||||
.laydate-time-show .laydate-set-ym span[lay-type="month"]{display: none !important;}
|
||||
|
||||
/* 头部结构 */
|
||||
.layui-laydate-header{position: relative; line-height:30px; padding: 10px 70px 5px;}
|
||||
.layui-laydate-header *{display: inline-block; vertical-align: bottom;}
|
||||
.layui-laydate-header i{position: absolute; top: 10px; padding: 0 5px; color: #999; font-size: 18px; cursor: pointer;}
|
||||
.layui-laydate-header i.laydate-prev-y{left: 15px;}
|
||||
.layui-laydate-header i.laydate-prev-m{left: 45px;}
|
||||
.layui-laydate-header i.laydate-next-y{right: 15px;}
|
||||
.layui-laydate-header i.laydate-next-m{right: 45px;}
|
||||
.laydate-set-ym{width: 100%; text-align: center; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
.laydate-set-ym span{padding: 0 10px; cursor: pointer;}
|
||||
.laydate-time-text{cursor: default !important;}
|
||||
|
||||
/* 主体结构 */
|
||||
.layui-laydate-content{position: relative; padding: 10px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
.layui-laydate-content table{border-collapse: collapse; border-spacing: 0;}
|
||||
.layui-laydate-content th,
|
||||
.layui-laydate-content td{width: 36px; height: 30px; padding: 5px; text-align: center;}
|
||||
.layui-laydate-content th{font-weight: 400;}
|
||||
.layui-laydate-content td{position: relative; cursor: pointer;}
|
||||
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
|
||||
.laydate-day-mark::after{position: absolute; content:''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;}
|
||||
.laydate-day-holidays:before{position: absolute; left: 0; top: 0; font-size: 12px; transform: scale(.7);}
|
||||
.laydate-day-holidays:before{content:'\4F11'; color: #FF5722;}
|
||||
.laydate-day-holidays[type="work"]:before{content:'\73ED'; color: inherit;}
|
||||
.layui-laydate .layui-this .laydate-day-holidays:before{color: #fff;}
|
||||
|
||||
/* 底部结构 */
|
||||
.layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px;}
|
||||
.layui-laydate-footer span{display: inline-block; vertical-align: top; height: 26px; line-height: 24px; padding: 0 10px; border: 1px solid #C9C9C9; border-radius: 2px; background-color: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .3s;}
|
||||
.layui-laydate-footer span:hover{color: #5FB878;}
|
||||
.layui-laydate-footer span.layui-laydate-preview{cursor: default; border-color: transparent !important;}
|
||||
.layui-laydate-footer span.layui-laydate-preview:hover{color: #666;}
|
||||
.layui-laydate-footer span:first-child.layui-laydate-preview{padding-left: 0;}
|
||||
.laydate-footer-btns{position: absolute; right: 10px; top: 10px;}
|
||||
.laydate-footer-btns span{margin: 0 0 0 -1px;}
|
||||
|
||||
/* 年月列表 */
|
||||
.layui-laydate-list{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-color: #fff;}
|
||||
.layui-laydate-list>li{position: relative; display: inline-block; width: 33.3%; height: 36px; line-height: 36px; margin: 3px 0; vertical-align: middle; text-align: center; cursor: pointer;}
|
||||
.laydate-month-list>li{width: 25%; margin: 17px 0;}
|
||||
.laydate-time-list{}
|
||||
.laydate-time-list>li{height: 100%; margin: 0; line-height: normal; cursor: default;}
|
||||
.laydate-time-list p{position: relative; top: -4px; line-height: 29px;}
|
||||
.laydate-time-list ol{height: 181px; overflow: hidden;}
|
||||
.laydate-time-list>li:hover ol{overflow-y: auto;}
|
||||
.laydate-time-list ol li{width: 130%; padding-left: 33px; height: 30px; line-height: 30px; text-align: left; cursor: pointer;}
|
||||
|
||||
/* 提示 */
|
||||
.layui-laydate-hint{position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
|
||||
|
||||
|
||||
/* 双日历 */
|
||||
.layui-laydate-range{width: 546px;}
|
||||
.layui-laydate-range .layui-laydate-main{display: inline-block; vertical-align: middle;}
|
||||
.layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
|
||||
.layui-laydate-range .laydate-main-list-1 .layui-laydate-content{border-left: 1px solid #e2e2e2;}
|
||||
|
||||
|
||||
/* 默认简约主题 */
|
||||
.layui-laydate, .layui-laydate-hint{border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0,0,0,.12); background-color: #fff; color: #666;}
|
||||
.layui-laydate-header{border-bottom: 1px solid #e2e2e2;}
|
||||
.layui-laydate-header i:hover,
|
||||
.layui-laydate-header span:hover{color: #5FB878;}
|
||||
.layui-laydate-content{border-top: none 0; border-bottom: none 0;}
|
||||
.layui-laydate-content th{color: #333;}
|
||||
.layui-laydate-content td{color: #666;}
|
||||
.layui-laydate-content td.laydate-selected{background-color: #B5FFF8;}
|
||||
.laydate-selected:hover{background-color: #00F7DE !important;}
|
||||
.layui-laydate-content td:hover,
|
||||
.layui-laydate-list li:hover{background-color: #eee; color: #333;}
|
||||
.laydate-time-list li ol{margin: 0; padding: 0; border: 1px solid #e2e2e2; border-left-width: 0;}
|
||||
.laydate-time-list li:first-child ol{border-left-width: 1px;}
|
||||
.laydate-time-list>li:hover{background: none;}
|
||||
.layui-laydate-content .laydate-day-prev,
|
||||
.layui-laydate-content .laydate-day-next{color: #d2d2d2;}
|
||||
.laydate-selected.laydate-day-prev,
|
||||
.laydate-selected.laydate-day-next{background-color: #f8f8f8 !important;}
|
||||
.layui-laydate-footer{border-top: 1px solid #e2e2e2;}
|
||||
.layui-laydate-hint{color: #FF5722;}
|
||||
.laydate-day-mark::after{background-color: #5FB878;}
|
||||
.layui-laydate-content td.layui-this .laydate-day-mark::after{display: none;}
|
||||
.layui-laydate-footer span[lay-type="date"]{color: #5FB878;}
|
||||
.layui-laydate .layui-this{background-color: #009688 !important; color: #fff !important;}
|
||||
.layui-laydate .laydate-disabled,
|
||||
.layui-laydate .laydate-disabled:hover{background:none !important; color: #d2d2d2 !important; cursor: not-allowed !important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
|
||||
/* 墨绿/自定义背景色主题 */
|
||||
.laydate-theme-molv{border: none;}
|
||||
.laydate-theme-molv.layui-laydate-range{width: 548px}
|
||||
.laydate-theme-molv .layui-laydate-main{width: 274px;}
|
||||
.laydate-theme-molv .layui-laydate-header{border: none; background-color: #009688;}
|
||||
.laydate-theme-molv .layui-laydate-header i,
|
||||
.laydate-theme-molv .layui-laydate-header span{color: #f6f6f6;}
|
||||
.laydate-theme-molv .layui-laydate-header i:hover,
|
||||
.laydate-theme-molv .layui-laydate-header span:hover{color: #fff;}
|
||||
.laydate-theme-molv .layui-laydate-content{border: 1px solid #e2e2e2; border-top: none; border-bottom: none;}
|
||||
.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content{border-left: none;}
|
||||
.laydate-theme-molv .layui-laydate-footer{border: 1px solid #e2e2e2;}
|
||||
|
||||
/* 格子主题 */
|
||||
.laydate-theme-grid .layui-laydate-content td,
|
||||
.laydate-theme-grid .layui-laydate-content thead,
|
||||
.laydate-theme-grid .laydate-year-list>li,
|
||||
.laydate-theme-grid .laydate-month-list>li{border: 1px solid #e2e2e2;}
|
||||
.laydate-theme-grid .laydate-selected,
|
||||
.laydate-theme-grid .laydate-selected:hover{background-color: #f2f2f2 !important; color: #009688 !important;}
|
||||
.laydate-theme-grid .laydate-selected.laydate-day-prev,
|
||||
.laydate-theme-grid .laydate-selected.laydate-day-next{color: #d2d2d2 !important;}
|
||||
.laydate-theme-grid .laydate-year-list,
|
||||
.laydate-theme-grid .laydate-month-list{margin: 1px 0 0 1px;}
|
||||
.laydate-theme-grid .laydate-year-list>li,
|
||||
.laydate-theme-grid .laydate-month-list>li{margin: 0 -1px -1px 0;}
|
||||
.laydate-theme-grid .laydate-year-list>li{height: 43px; line-height: 43px;}
|
||||
.laydate-theme-grid .laydate-month-list>li{height: 71px; line-height: 71px;}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue