用jquery做超酷的垂直滚动友情链接原创

首先在你的网页的<head></head>之间插入如下代码调用jquery

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js?ver=3.3.1‘></script>

然后插入插件的代码,我这里直接插入代码(也可以调用插件)

<script type=”text/javascript”>

/*
	Totem Ticker Plugin
	Copyright (c) 2011 Zach Dunn / www.buildinternet.com
	Released under MIT License
	--------------------------
	Structure based on Doug Neiner's jQuery plugin blueprint: http://starter.pixelgraphics.us/
*/
(function( $ ){

	if(!$.omr){
		$.omr = new Object();
	};

	$.omr.totemticker = function(el, options ) {

	  	var base = this;

		//Define the DOM elements
	  	base.el = el;
	  	base.$el = $(el);

	  	// Add a reverse reference to the DOM object
        base.$el.data("omr.totemticker", base);

	  	base.init = function(){
            base.options = $.extend({},$.omr.totemticker.defaultOptions, options);

            //Define the ticker object
           	base.ticker;

			//Adjust the height of ticker if specified
			base.format_ticker();

			//Setup navigation links (if specified)
			base.setup_nav();

			//Start the ticker
			base.start_interval();

			//Debugging info in console
			//base.debug_info();
        };

		base.start_interval = function(){

			//Clear out any existing interval
			clearInterval(base.ticker);

	    	base.ticker = setInterval(function() {

	    		base.$el.find('li:first').animate({
	            	marginTop: '-' + base.options.row_height,
	            }, base.options.speed, function() {
	                $(this).detach().css('marginTop', '0').appendTo(base.$el);
	            });

	    	}, base.options.interval);
	    }

	    base.reset_interval = function(){
	    	clearInterval(base.ticker);
	    	base.start_interval();
	    }

	    base.stop_interval = function(){
	    	clearInterval(base.ticker);
	    }

		base.format_ticker = function(){

			if(typeof(base.options.max_items) != "undefined" && base.options.max_items != null) {

				//Remove units of measurement (Should expand to cover EM and % later)
				var stripped_height = base.options.row_height.replace(/px/i, '');
				var ticker_height = stripped_height * base.options.max_items;

				base.$el.css({
					height		: ticker_height + 'px',
					overflow	: 'hidden',
				});

			}else{
				//No heights were specified, so just doublecheck overflow = hidden
				base.$el.css({
					overflow	: 'hidden',
				})
			}

		}

		base.setup_nav = function(){

			//Stop Button
			if (typeof(base.options.stop) != "undefined"  && base.options.stop != null){
				$(base.options.stop).click(function(){
					base.stop_interval();
					return false;
				});
			}

			//Start Button
			if (typeof(base.options.start) != "undefined"  && base.options.start != null){
				$(base.options.start).click(function(){
					base.start_interval();
					return false;
				});
			}

			//Previous Button
			if (typeof(base.options.previous) != "undefined"  && base.options.previous != null){
				$(base.options.previous).click(function(){
					base.$el.find('li:last').detach().prependTo(base.$el).css('marginTop', '-' + base.options.row_height);
					base.$el.find('li:first').animate({
				        marginTop: '0px',
				    }, base.options.speed, function () {
				        base.reset_interval();
				    });
				    return false;
				});
			}

			//Next Button
			if (typeof(base.options.next) != "undefined" && base.options.next != null){
				$(base.options.next).click(function(){
					base.$el.find('li:first').animate({
						marginTop: '-' + base.options.row_height,
			        }, base.options.speed, function() {
			            $(this).detach().css('marginTop', '0px').appendTo(base.$el);
			            base.reset_interval();
			        });
			        return false;
				});
			}

			//Stop on mouse hover
			if (typeof(base.options.mousestop) != "undefined" && base.options.mousestop === true) {
				base.$el.mouseenter(function(){
					base.stop_interval();
				}).mouseleave(function(){
					base.start_interval();
				});
			}

			/*
				TO DO List
				----------------
				Add a continuous scrolling mode
			*/

		}

		base.debug_info = function()
		{
			//Dump options into console
			console.log(base.options);
		}

		//Make it go!
		base.init();
  };

  $.omr.totemticker.defaultOptions = {
  		message		:	'Ticker Loaded',	/* Disregard */
  		next		:	null,		/* ID of next button or link */
  		previous	:	null,		/* ID of previous button or link */
  		stop		:	null,		/* ID of stop button or link */
  		start		:	null,		/* ID of start button or link */
  		row_height	:	'100px',	/* Height of each ticker row in PX. Should be uniform. */
  		speed		:	800,		/* Speed of transition animation in milliseconds */
  		interval	:	4000,		/* Time between change in milliseconds */
		max_items	: 	null, 		/* Integer for how many items to display at once. Resizes height accordingly (OPTIONAL) */
  };

  $.fn.totemticker = function( options ){
    return this.each(function(){
    	(new $.omr.totemticker(this, options));
  	});
  };

})( jQuery );

$(function(){
$(‘#vertical-ticker’).totemticker({
row_height : ‘100px’,
next : ‘#ticker-next’,
previous : ‘#ticker-previous’,
stop : ‘#stop’,
start : ‘#start’,
mousestop : true,
});
});
</script>

接下来我们插入css代码

<style>
#vertical-ticker{
	height:400px;
	overflow:hidden;
	margin:0; padding:0;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0, .4);
}

	#vertical-ticker li{
		padding:35px 20px;
		display:block;
		background:#efefef;
		color:#333;
		border-bottom:1px solid #ddd;
		text-align:center;
		font-size:25px;
		font-weight:bold;
		font-family: Helvetica Neue, times, serif;
	}
</style>

最后在<body></body>之间设置你的html代码

<ul id=”vertical-ticker”>
<li><a href=”http://www.onbno.com/soft-skill/2746.html” >One Time</a></li>
<li><a href=”http://www.onbno.com/soft-skill/2746.html” >Baby</a></li>
<li><a href=”http://www.onbno.com/soft-skill/2746.html” >One Less Lonely Girl</a></li>
<li><a href=”http://www.onbno.com/soft-skill/2746.html” >Somebody to Love</a></li>
<li><a href=”http://www.onbno.com/soft-skill/2746.html” >Eenie Meenie</a></li>
<li><a href=”http://www.onbno.com/soft-skill/2746.html” >Never Say Never</a></li>
<li><a href=”http://www.onbno.com/soft-skill/2746.html” >U Smile</a></li>
</ul>

 » 本站地址:http://www.gomoth.com
  • 您可能感兴趣的相关文章