Watch Star Fork

miaoqiyuan.cn / jQueryMarqueeJavaScript

加入码云
与超过 200 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
基于 jquery 实现的 marquee 无缝滚动插件,演示地址: http://www.miaoqiyuan.cn/products/jQuery.marquee/
克隆/下载
一键复制 编辑 原始数据 按行查看 历史
demo.html 7.50 KB mqycn 提交于 2017-03-24 01:46 . 演示代码,代码部分增加高亮演示功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQueryMarquee</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css" rel="stylesheet">
<style>
body{padding-top:70px;}
textarea.form-control{height:200px;}
.panel-code .panel-heading a{display:block;}
.panel-code .panel-heading a i,
.panel-code .panel-heading a span{color:#600;font-weight:400;font-size:0.8em;}
.panel-code .panel-heading a i{color:#AAA;}
.panel-code .panel-heading a:hover{text-decoration:none;}
.panel-code .panel-body{padding:1px;}
.syntaxhighlighter{margin:0!important;}
</style>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<script src="src/jQuery.marquee.ie8.min.js"></script>
<![endif]-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="src/jQuery.marquee.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
<script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js"></script>
<script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
<script src="demo/js/template.js"></script>
<script src="demo/js/main.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">jQueryMarquee 演示</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">jQueryMarquee 演示</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#basic">基本演示</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">自定义方向 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#direction_top">向上</a></li>
<li><a href="#direction_bottom">向下</a></li>
<li><a href="#direction_left">向左</a></li>
<li><a href="#direction_right">向右</a></li>
</ul>
</li>
<li><a href="#speed">移动速度</a></li>
<li><a href="#pixels">移动像素数</a></li>
<li><a href="#callback">回调函数</a></li>
<li><a href="#advanced">综合演示</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://git.oschina.net/mqycn/jQueryMarquee" target="_blank">最新版本</a></li>
<li><a href="http://www.miaoqiyuan.cn/" target="_blank">作者博客</a></li>
</ul>
</div>
</div>
</nav>
<div class="container container-body"></div>
<script>
$(function(){
//创建模板对象
var tpl = new Template('#template', '.container-body');
//设置模板
tpl.template_code_start = $("#template_code_start").html();
tpl.template_code_end = $("#template_code_end").html();
//代码注释
tpl.notes = function(data, language){
language = language.toLowerCase();
return function($0){
var notes = data.id.toLowerCase() + "." + language;
switch( language ){
case 'js':
return '//' + notes;
case 'css':
return '/* ' + notes + ' */';
case 'html':
return '<!-- ' + notes + ' -->';
default:
return '';
}
};
};
//替换回调函数
tpl.parseInit = function(data){
data.__CODE__ = data.html.replace(/(\<|\>)/g, function($0){
return $0 == '<' ? '&lt;' : '&gt';
}).replace(/\[(\/?)(html|css|js)\]/gi, function($0, $1, $2){
if( !$1 ){
return tpl.template_code_start
.replace(/\{language\}/g, $2.toLowerCase())
.replace(/\{LANGUAGE\}/g, $2.toUpperCase())
.replace(/\{notes\}/g, tpl.notes(data, $2));
}else{
return tpl.template_code_end;
}
}).replace(/\}, #TIME#\);/g, '});');
data.__CODE__ = this.replace(data, data.__CODE__);
data.html = data.html.replace(/\[(\/?)(html|css|js)\]/gi, function($0, $1, $2){
switch($2.toLowerCase()){
case "js":
case "css":
return '<' + $1 + ( $2 == 'js' ? 'script' : 'style') +'>';
default:
return "";
}
}).replace(/\$\(function/g, 'setTimeout(function').replace(/\}, #TIME#\);/g, '}, 100);');
};
//封装加载
tpl.add = function(id, title){
this.load({
id : id,
title : title,
resource : [
['html', 'demo/resource/' + id + '.html']
]
});
};
//加载项目
tpl.add('basic', '基本演示');
tpl.add('direction_top', '自定义方向:向上');
tpl.add('direction_bottom', '自定义方向:向下');
tpl.add('direction_left', '自定义方向:向左');
tpl.add('direction_right', '自定义方向:向右');
tpl.add('speed', '移动速度');
tpl.add('pixels', '移动像素数');
tpl.add('callback', '回掉函数');
tpl.add('advanced', '综合演示');
});
</script>
<script type="text/template" id="template">
<div id="{id}" class="panel panel-default">
<div class="panel-heading">
<strong>{title}</strong>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-5">
<div class="panel panel-default">
<div class="panel-heading">
<strong>效果演示</strong>
</div>
<div class="panel-body">
{html}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-7">
<div class="panel-group" id="{id}_code_parent" role="tablist" aria-multiselectable="true">
{__CODE__}
</div>
<script>SyntaxHighlighter.highlight();$('#{id}_code_js_link a').click();</script>
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="template_code_start">
<div class="panel panel-default panel-code" id="{id}_code_{language}">
<div class="panel-heading" role="tab" id="{id}_code_{language}_link">
<a role="button" data-toggle="collapse" data-parent="#{id}_code_parent" href="#{id}_code_{language}_body" aria-expanded="false" class="collapsed" aria-controls="{id}_code_{language}_body">
<strong>{LANGUAGE}代码</strong>
<i>/</i>
<span>{id}.{language}</span>
</a>
</div>
<div id="{id}_code_{language}_body" class="panel-body panel-body collapse" role="tabpanel" aria-expanded="false" aria-labelledby="{id}_code_{language}_link">
<pre class="brush:{language};">
{notes}
</script>
<script type="text/template" id="template_code_end">
</pre>
</div>
</div>
</script>
</body>
</html>

评论 ( 0 )

你可以在登录后,发表评论

8_float_left_people 8_float_left_close