shoken0x · November 4, 2013 10:07
diff --git a/news-ticker b/news-ticker
 <html>
 <head>
 <style>
 <！--
 .ticker {
 	margin: 0 auto;
 	padding: 10px;
 	width: 600px;
 	text-align: left;
 	border: #ccc 1px solid;
 	position: relative;
 	overflow: hidden;
 }

 .ticker ul {
 	width: 100%;
 	position: relative;
 }

 .ticker ul li {
 	width: 100%;
 	display: none;
 }
 -->
 </style>
 </head>
 <body>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(function(){
 	$(window).load(function(){
 		var $setElm = $('.ticker');
 		var effectSpeed = 1000;
 		var switchDelay = 3000;
 		var easing = 'swing';

 		$setElm.each(function(){
 			var effectFilter = $(this).attr('rel');

 			var $targetObj = $(this);
 			var $targetUl = $targetObj.children('ul');
 			var $targetLi = $targetObj.find('li');
 			var $setList = $targetObj.find('li:first');

 			var ulWidth = $targetUl.width();
 			var listHeight = $targetLi.height();
 			$targetObj.css({height:(listHeight)});
 			$targetLi.css({top:'0',left:'0',position:'absolute'});

 			$setList.css({top:'3em',display:'block',opacity:'0',zIndex:'98'}).stop().animate({top:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');
 			setInterval(function(){
 				var $activeShow = $targetObj.find('.showlist');
 				$activeShow.animate({top:'-3em',opacity:'0'},effectSpeed,easing).next().css({top:'3em',display:'block',opacity:'0',zIndex:'99'}).animate({top:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
 			},switchDelay);
 		});
 	});
 });
 </script>

 <div class="ticker" rel="roll">
  <ul>
    <li><a href="#1">新着ニュースその1</a></li>
    <li><a href="#2">新着ニュースその2</a></li>
    <li><a href="#3">新着ニュースその3</a></li>
    <li><a href="#4">新着ニュースその4</a></li>
    <li><a href="#5">新着ニュースその5</a></li>
  </ul>
 </div>
 <!--/.ticker-->
 </body>
 </html>
	<html>
	<head>
	<style>
	<！--
	.ticker {
	margin: 0 auto;
	padding: 10px;
	width: 600px;
	text-align: left;
	border: #ccc 1px solid;
	position: relative;
	overflow: hidden;
	}

	.ticker ul {
	width: 100%;
	position: relative;
	}

	.ticker ul li {
	width: 100%;
	display: none;
	}
	-->
	</style>
	</head>
	<body>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
	$(function(){
	$(window).load(function(){
	var $setElm = $('.ticker');
	var effectSpeed = 1000;
	var switchDelay = 3000;
	var easing = 'swing';

	$setElm.each(function(){
	var effectFilter = $(this).attr('rel');

	var $targetObj = $(this);
	var $targetUl = $targetObj.children('ul');
	var $targetLi = $targetObj.find('li');
	var $setList = $targetObj.find('li:first');

	var ulWidth = $targetUl.width();
	var listHeight = $targetLi.height();
	$targetObj.css({height:(listHeight)});
	$targetLi.css({top:'0',left:'0',position:'absolute'});

	$setList.css({top:'3em',display:'block',opacity:'0',zIndex:'98'}).stop().animate({top:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');
	setInterval(function(){
	var $activeShow = $targetObj.find('.showlist');
	$activeShow.animate({top:'-3em',opacity:'0'},effectSpeed,easing).next().css({top:'3em',display:'block',opacity:'0',zIndex:'99'}).animate({top:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
	},switchDelay);
	});
	});
	});
	</script>

	<div class="ticker" rel="roll">
	<ul>
	<li><a href="#1">新着ニュースその1</a></li>
	<li><a href="#2">新着ニュースその2</a></li>
	<li><a href="#3">新着ニュースその3</a></li>
	<li><a href="#4">新着ニュースその4</a></li>
	<li><a href="#5">新着ニュースその5</a></li>
	</ul>
	</div>
	<!--/.ticker-->
	</body>
	</html>