一款很强的新闻广播插件 – Headlines

April 12, 2009 广告插件

headlines

网站滚动新闻插件。
同样来自“templateplazza.net”，看样手痒痒啊，呵呵，那就不客气了，弄下来一起享用吧。

首先引入必要文件在HEAD部份

1
2
3

<script type="text/javascript" src="files/mootools.js"></script>
<link rel="stylesheet" type="text/css" href="files/tpnewsticker.css" title="default" />
<script type="text/javascript" src="files/tpnewsticker.js"></script>

在HEAD部份加入JS定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
  slides: 'tpnewstickerli',
  duration: 600,  //特效延时
  delay: 600,  //间隔
  auto:true,  //自动播放
 
  direction: 'v',  //滚动方向 v垂直,h水平
  vScroll: 'top', //弹出方向，top上到下；bottom下到上
 
  buttons: {next:'go-next1288118721',prev:'go-prev1288118721',play:'play1288118721',stop:'stop1288118721'},
 
  transition:Fx.Transitions.Quart.easeIn
}
var scroller = new QScroller('tpnewsticker1288118721',opt);
scroller.load();
});
//-->
</script>

CSS

1
2
3
4
5
6
7

<style type="text/css">
#tpnewsticker1288118721 {
	position: relative;
	width:400px;
	height:16px;
}
</style>

下面是HTML

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="tpndefwrp">
    <div class="tpnewsticker_nav">
        <strong>Headlines : </strong> 	  
        <a id="go-prev1288118721" href="javascript:void(0)">
        <img src="files/b-prev00.png" alt="Previous" border="0" width="14" height="13" />
        </a>
        <a id="play1288118721" href="javascript:void(0)">
        <img src="files/b-play00.png" alt="Play" border="0" width="12" height="13" />
        </a>
        <a id="stop1288118721" href="javascript:void(0)">
        <img src="files/b-pause0.png" alt="Pause" border="0" width="13" height="13"/>
        </a>
        <a id="go-next1288118721" href="javascript:void(0)">
        <img src="files/b-next00.png" alt="Next" border="0" width="14" height="13"/>
        </a>
    </div>
 
    <div id="tpnewsticker1288118721" class="tpnewsticker"></div>
    <div class="hide">
            <div class="tpnewstickerli">
                09/12/08:&nbsp; <a href="#">TP News Ticker </a>
            </div>
            <div class="tpnewstickerli">
                04/12/08:&nbsp; <a href="#">Typography </a>
            </div>
            <div class="tpnewstickerli">
                04/12/08:&nbsp; <a href="#">Module Positions </a>
            </div>
            <div class="tpnewstickerli">
                04/12/08:&nbsp; <a href="#">Design Variations </a>
            </div>
            <div class="tpnewstickerli">
                04/12/08:&nbsp; <a href="#">Mootips </a>
            </div>
    </div>
</div>

其中

1
2
3

<div class="tpnewstickerli">
      04/12/08:&nbsp; <a href="#">Mootips </a>
</div>

是添加新闻条目的格式，前面是日期，后面是标题.
要添加一条时直接复制后修改日期和标题即可。
更多请参考示例，两个示例演示了两种不同的滚动方式，水平和垂直。

Tags:

Comments (7)

 

  1. LAONB says:
    April 13, 2009 at 9:05 pm

    一天没来了，今天为了设置固定链接换主机，烦恼了一天 :cry:

    [Reply]

  2. LAONB says:
    April 14, 2009 at 7:29 pm

    1288118721代表什么

    [Reply]

    • Feng says:
      April 16th, 2009 at 1:27 am

      目的是为了让ID绝对唯一.

      [Reply]

  3. simaopig says:
    April 14, 2009 at 10:51 pm

    你真勤劳，向你致敬~，呵。

    [Reply]

  4. bolo says:
    April 16, 2009 at 1:22 pm

    效果是不错，但更换链接比较麻烦。

    [Reply]

  5. yooyooh says:
    April 16, 2009 at 6:53 pm

    这个joomla内有免费的模块，是News Highlighter GK1 。当然，你的是源码，适用于嵌入自己网站；也能开发成不同系统的组件。

    [Reply]

  6. LAONB says:
    April 16, 2009 at 11:24 pm

    这个比较简单，我已经用了，可惜跟MENU.JS冲突，而且自动播放的时候FLASH会卡，暂时把他关闭了，打算放到我主页的最上方（当时留了一条黑色背景） :smile:

    [Reply]

Leave a Reply