Ajax Finder [Ajax探索者] » 广告插件 http://ajaxfinder.com Ajax Finder Wed, 25 Nov 2009 14:27:39 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Image Rotator with Description (CSS/jQuery) http://ajaxfinder.com/10250/ http://ajaxfinder.com/10250/#comments Wed, 20 May 2009 08:12:13 +0000 Feng http://ajaxfinder.com/10250 imagerotator


An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

Pass:ajaxFinder.com

]]> http://ajaxfinder.com/10250/feed/ 1 一款很强的新闻广播插件 – Headlines http://ajaxfinder.com/9360/ http://ajaxfinder.com/9360/#comments Sun, 12 Apr 2009 14:15:29 +0000 Feng http://www.codeindex.cn/?p=9360 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>

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

]]> http://ajaxfinder.com/9360/feed/ 7 The Silky Smooth Marquee – jquery平滑滚动广告插件 http://ajaxfinder.com/931/ http://ajaxfinder.com/931/#comments Sat, 08 Nov 2008 18:46:47 +0000 Feng http://www.codeindex.cn/the-silky-smooth-marquee_931 jQuery-Marquee-Demo

As we abused the Internet back in the 90 with tags like blink and marquee the last 10 years have seen the gradual extinction of these proprietary tags until we did full circle and the marquee effect appears in CSS 3.
There’s actually a very strong business case and requirement for the marquee tag – since the only the alternative is often a hacky solution (I feel) that shifts the CSS left position which, depending on your browser, will begin to eat away at your CPU.
Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it’s built directly in to the browser). So let’s solve this with JavaScript.

]]> http://ajaxfinder.com/931/feed/ 5 TickerTape News Component – 内容滚动广告,新闻组件 http://ajaxfinder.com/876/ http://ajaxfinder.com/876/#comments Fri, 06 Jun 2008 15:46:00 +0000 Feng http://www.codeindex.cn/tickertape-news-component-%e5%86%85%e5%ae%b9%e6%bb%9a%e5%8a%a8%e5%b9%bf%e5%91%8a%e6%96%b0%e9%97%bb%e7%bb%84%e4%bb%b6_876 TickerTape-News-Componen

内容滚动广告组件，最新版已支持水平滚动。

]]> http://ajaxfinder.com/876/feed/ 0