[美化修改] 超實用 discuz x2.5 滾動公告效果 DIY程式碼

byadmin 發表於 2013-8-9 21:41:56 , 4410人已閱讀 , 0人回應

筆者最喜歡使用DISCUZ的地方莫過於, 強大的DIY系統 , 它已經將所有動態的程式碼都寫成代碼 , 因此可以很簡單將這些動態的程式碼整合各種前端效果來豐富網站 ! 今天分享一個筆者覺得非常萬用的滾動公告DIY模塊程式碼, 先來看一下效果吧：

ＤＩＹ程式碼如下：

<style type="text/css">
.effshadow
{
position: relative;
}
.effshadow:after
{
z-index: -1;
position: absolute;
content: "";
top: 15px;
left: 8px;
right: auto;
width: 50%;
height: 10%;
bottom: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(183deg);
-moz-transform: rotate(183deg);
-o-transform: rotate(183deg);
-ms-transform: rotate(183deg);
transform: rotate(183deg);
}
.effbox h1{
text-align:left;
height:25px;
line-height:25px;
position:relative;
top:0px;
color:#009ad9;
font:20px/1.5 Tahoma,'Microsoft Yahei','Simsun';
float:left;
margin:0px;
}
.effbox h3{
text-align:center;
position:relative;
font:12px/1.5 Tahoma,'Microsoft Yahei','Simsun';
margin:0px;
height:30px;
}
.effbox {
width:319px;
height:37px;
background:#FFF;
}
.shadowcon { width:100%; height:25px; margin:6px 5px 6px 10px; overflow:hidden;}
#rollBox{ height:25px; width:255px; overflow:hidden;list-style:none; margin:0; padding:0; position:relative; padding-left:5px; margin:50px auto; background:#FFf; cursor:pointer;}
.shadowcon li { list-style:none; line-height:25px; text-align:left;}
</style>
<div class="effbox">
<div class="effbox effshadow">
<div class="shadowcon">
<h1>公告</h1>
<h3>
<ul style="margin:5px 0 0 0;" id="rollBox">
[loop]
<li><a href="{url}" title="{title}"{target}>{title}（{starttime}）</a></li>
[/loop]
</ul>
</h3></div></div></div>
<script type="text/javascript">
var rollText={
go:null,
oParentUl:null,
oUlH:null,
liArr:null,
childNode:null,
timeout:null,
run:function(id,delay){
var oLiFirst=this.liArr[0];
var liMarTop = oLiFirst.style.marginTop;
var liTopNum=parseInt(liMarTop);
var c = Math.abs(liTopNum);
if(c< parseInt(this.oUlH)){
c++;
oLiFirst.style.marginTop ='-' + c + 'px';
}else if(Math.abs(liTopNum)== parseInt(this.oUlH)){
clearInterval(this.go);
this.oParentUl.removeChild(oLiFirst);
this.oParentUl.appendChild(oLiFirst);
this.liArr[this.liArr.length-1].style.marginTop='0px';
this.timeout=setTimeout(function(obj,id,childtags,delay){return function(){obj.start(id,childtags,delay);};}(this,id,this.childNode,delay),delay);
}
},
start:function(id,childtags,delay){
this.childNode=childtags;
this.oParentUl=document.getElementById(id);
this.oUlH=this.oParentUl.currentStyle?this.oParentUl.currentStyle['height']:window.getComputedStyle(this.oParentUl,null)['height'];
this.liArr=this.oParentUl.getElementsByTagName(childtags);
for(var i=0;i<this.liArr.length;i++){
this.liArr[i].style.cssText +=';margin-top:0;height:'+this.oUlH+';line-height:'+this.oUlH+';display:block; width:100%;';
}
this.go =setInterval(
function(obj,id,delay){
return function(){obj.run(id,delay)}
}(this,id,delay),10);
this.oParentUl.onmouseover=function(obj){return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}(this);
this.oParentUl.onmouseout=function(obj){return function(){obj.go =setInterval(function(obj,id,delay){return function(){obj.run(id,delay)};}(obj,id,delay),10);};}(this);
}
}
rollText.start('rollBox','li',3000);
function clone(){};
clone.prototype= rollText;
</script>