js怎么实现标题跑马灯功能？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js怎么实现标题跑马灯功能？相关的知识，希望对你有一定的参考价值。
参考技术A 这边百度了一个代码，供参考<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js跑马灯效果</title>
</head>
<body>
<div id="txt" style="color: white;background-color: red;text-align: center;font-size: 50px;">欢迎您的来访！</div>
<script type="text/javascript">
setInterval(function ()//通过定时器重复动作
var oTxt = document.getElementById('txt'); //获取标签
var txt = oTxt.innerText; //获取标签文本内容
var first_i = txt[0]; //字符串索引取值
var last_i = txt.slice(1,txt.length);//字符串切片
var new_txt = last_i + first_i;//字符串拼接
oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容
,300)
</script>
</body>
</html>
跑马灯抽奖的简单实现
默认写死的中奖号码，不怎么会写后台没有取，简单的实现功能，很多地方还需要完善
基本实现思路更改 设置运动圈数，根据圈数改变速度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta user-scalable="no"> <title></title> <style> #lottery { width: 570px; height: 510px; margin: 0px auto; border: 4px solid #ba1809; position: relative; } #lottery table { background-color: yellow; } #lottery table td { position: relative; width: 190px; height: 170px; text-align: center; color: #333; font-index: -999 } #lottery table td img { display: block; width: 190px; height: 170px; } #lottery table td a { width: 190px; height: 170px; display: block; text-decoration: none; background: rgba(233, 233, 233, .1) no-repeat top center; } #lottery table td a:hover { background: rgba(0, 0, 0, .2); } #lottery table td.active .mask { display: block; } .mask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(252, 211, 4, 0.5); display: none; } .integral { position: absolute; left: -140px; bottom: 10px; color: #000; height: 60px; border: 2px solid #399; min-width: 60px; text-align: center; line-height: 60px; font-size: 20px; } </style> </head> <body class="keBody"> <!--效果html开始--> <div id="lottery"> <span class="integral"></span> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="prize prize-0"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914k2kzk3j23zs511k3.jpg"> <div class="mask"></div> </td> <td class="prize prize-1"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914u53gnv0w3t2ks42s.jpg"> <div class="mask"></div> </td> <td class="prize prize-2"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914fdzsfan2n23r3ady.jpg"> <div class="mask"></div> </td> </tr> <tr> <td class="prize prize-7"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914jo004r5okr44rre0.jpg"> <div class="mask"></div> </td> <td> <a href="#" id="btn"></a> </td> <td class="prize prize-3"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914n3vci3x30u720x03.jpg"> <div class="mask"></div> </td> </tr> <tr> <td class="prize prize-6"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914n3vci3x30u720x03.jpg"> <div class="mask"></div> </td> <td class="prize prize-5"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914fdzsfan2n23r3ady.jpg"> <div class="mask"></div> </td> <td class="prize prize-4"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914k2kzk3j23zs511k3.jpg"> <div class="mask"></div> </td> </tr> </table> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function Lottery(id) { this.index = -1; //当前位置索引 this.count = 0; //总共位置 this.timer = null; // this.speed = 60; //初始转动速度 this.times = 0; //转动次数 this.cycle = 30; //转动基本次数：即至少需要转动多少次再进入抽奖环节 this.prize = 3; //中奖位 this.id = id; //盒子id this.obj = $("#" + this.id); this.units = this.obj.find(".prize"); this.count = this.units.length; this.isClick = false; this.drain = 100; //积分 } Lottery.prototype = { //当前状态 setState: function() { if(this.count > 0) { this.obj.find(".prize-" + this.index).addClass("active"); } }, //索引改变 changeIndex: function() { this.units.removeClass(‘active‘); this.index++; if(this.index > this.count - 1) { this.index = 0; } this.setState(); }, //运动 rotate: function() { var that = this; clearTimeout(that.timer); if(typeof(that.rotate) == ‘function‘) { that.timer = setTimeout(function() { that.rotate(); }, that.speed); } that.changeIndex(); that.times++; that.judge(); }, //判断加减速和是否停止 judge: function() { // 完成 if(this.times > this.cycle && this.index == this.prize) { var that = this; clearTimeout(that.timer); that.timer = null; this.times = 0; this.speed = 60; this.index = -1; clearTimeout(that.click); that.click = setTimeout(function() { that.alertPrize(that.prize); }, 100); } //快接近 减速 if(this.times > this.cycle && ((this.prize == 1 && this.index == 5) || this.prize == this.index + 3)) { this.speed += 180; } else { this.speed += 3; } }, //成功提示信息 alertPrize: function(prize) { var that = this, alertTxt; switch(prize) { case 3: that.isClick = false; alert(‘恭喜获得。。。。‘); break; } }, //中奖礼品 getPrize: function(url, json) { var that = this; $.ajax({ url: url, data: json, dataType: ‘json‘, type: ‘post‘, success: function(res) { }, error: function() { } }) }, click: function() { var btn = $(‘#btn‘), that = this, integralbox = $(‘.integral‘); var integral = $.trim(integralbox.text()); //积分 integral = 200; integralbox.text(integral); btn.on(‘click‘, function() { if(that.isClick) return; that.isClick = true; if(integral < that.drain) { alert(‘您的积分不足‘); that.isClick = false; return; } else { integral -= that.drain; integralbox.text(integral); // that.getPrize(); that.rotate(); } }) }, init: function() { this.setState(); this.click(); } }; $(function() { var lottery = new Lottery(‘lottery‘); lottery.init(); }); </script> </body> </html>
以上是关于js怎么实现标题跑马灯功能？的主要内容，如果未能解决你的问题，请参考以下文章