jQuery アンカー先情報　ニュースティッカー

JavaScript jQuery design

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<title>jqery 2017/02/04</title>
</head>

<style>

.ttpShow {
display: none;
}

#ttpPanel {
width: 200px;
padding: 15px;
text-align:left;
display: none;
background: #fff;
border: #ccc solid 3px;
z-index: 100;
position: absolute;
color: #E85039;
}

</style>

<body>
<p>text,text,text,text<a href="#">今日は天気が良いみたいですね<span class="ttpShow">
最高気温は10℃に上がるようです</span></a>明日も晴れると良いな。365日中、4/3くらいは
晴れが良いな。
</p>

 

<style>

.ticker {
margin: o auto;
padding: 8px 16px;
text-align: left;
width: 500px;
background: #fff;
background: linear-gradient(to bottom, #fff 50%, #efefef 100%);
border: #ccc 2px solid;
border-radius: 25px;
position: relative;
overflow: hidden;
}

.ticker ul {
min-width: 100%;
min-height: 20px;
position: relative;
}

.ticker ul li {
top:0;
left: 0;
min-width: 100%;
min-height: 20px;
line-height: 20px;
display: none;
position: absolute;
}

.ticker ul li a {
text-decoration: none;
text-align:center;
font-size: 16.6px;
color: #01579B;
}

</style>

<!-- 2 html -->
<div class="ticker">
<ul>
<li><a href="#">2017/01/01 新年の始まり~~~~</a></li>
<li><a href="#">2017/01/21　親の誕生日</a></li>
<li><a href="#">2017/01/31　引っ越し完了</a></li>
<li><a href="#">2017/02/01　2月の始まり~~~~~</a></li>
<li><a href="#">2017/02/04 旧暦</a></li>
</ul>
</div>


<script>
/*-- 2 ニュースティッカー --*/
$(window).load(function(){
var thisTi = $('.ticker');
tiul = thisTi.find('ul');
tili = tiul.find('li');
liF = tiul.find('li:first');// 最初のli要素

liF.css({display:'block', opacity:'0',zIndex: '98'}).
stop().animate({opacity: '1'}, 1000, 'linear').
addClass('showlist');

setInterval(function(){
var showLi = thisTi.find('.showlist');
showLi.animate({opacity: '0'},1000, 'linear', function(){
$(this).next().css({display: 'block',opacity: '0',zIndex: '98'}).
animate({opacity: '1'},1000, 'swing').addClass('showlist').
end().appendTo(tiul).css({display:'none',
zIndex: '98'}).removeClass('showlist');
});
}, 7777);
});


/*---1 リンク 詳細表示　---*/
$(function(){
$('a:has(.ttpShow)').mouseover(function(e){
$('body').append('<div id="ttpPanel">' +
$(this).children('.ttpShow').html() + '</div>');
$('#ttpPanel').css({top:(e.pageY+10) + 'px',left:(e.pageX+10) + 'px'}).fadeIn('fast');

}).mousemove(function(e){
$('#ttpPanel').css({top:(e.pageY+10) + 'px',left:(e.pageX+10) + 'px'});

}).mouseout(function(){
$('#ttpPanel').remove();
});
});

</script>

</body>
</html>