当前位置:主页 > jquery插件 > UI >

jQuery模拟LED屏数字效果插件

栏目分类:UI   模板编号:JQ00083    发布日期:2017-09-01   来源:网络   浏览次数:次     在线预览
虽然不是那么简单易用! 不过展示除了的样式还是不错的!喜欢可以研究下!

jQuery实现led数字效果

引入JS

<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/jquery.uled.js"></script>

引入CSS

body {background:url(images/img/bg.gif) repeat; margin:0; padding:0;}
.title {background-color:rgba(0,0,0,0.56); text-align:center; width:100%; position:fixed; top:0; left:0; padding:5px 0; z-index:99999;}
.title a {color:#FFF; text-decoration:none; font-size:16px; font-weight:bolder; line-height:24px;}
#wrapper {width:760px; margin:54px auto; background: none repeat scroll 0 0 #FFF; border-radius: 5px 5px 5px 5px; padding:30px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);}
.autosize {font-size:0; background: #000; display: table;}

DEMO代码段

<div id="wrapper">
  <div>
		<div>
		  <p>示例一:倒计时</p>
		  <div id="led0" class="autosize" style="background:#333"></div>
		  <p>示例二:随机显示数字</p>
		  <div id="led1" class="autosize" style="background:#333"></div>
		  <p>实力三:显示时间(格式 - hh:mm)</p>
		  <div id="led2" class="autosize"></div>
		  <p>示例四:显示时间(格式 - hh:mm:ss)</p>
		  <div id="led3" class="autosize"></div>    
		</div>
	</div>
</div>

JS代码段

<script type="text/javascript">
		$(document).ready(function() {
			var l0 = new uLED({
				id : "led0",
				type : "countdown",
				format : "ddd:hh:mm:ss",
				color : "#eee",
				bgcolor : "#000",
				size : 5,
				rounded : 1,
				led : "font1"
			});
			var l1 = new uLED({
				id : "led1",
				type : "random",
				length : 7,
				color : "#af0",
				bgcolor : "#101a10",
				size : 10,
				rounded : 6
			});
			var l2 = new uLED({
				id : "led2",
				type : "time",
				format : "hh:mm",
				color : "#f0a",
				bgcolor : "#222",
				size : 22,
				rounded : 4
			});
			var l3 = new uLED({
				id : "led3",
				type : "time",
				format : "hh:mm:ss",
				hourformat : 12,
				color : "#fa0",
				bgcolor : "#222",
				size : 12,
				rounded : 0
			});
		});
	</script>


在线演示 立即下载
打赏本站
云盘密码:1xga

标签: LED LED数字

相关下载
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载