投稿 フォームにある現在地を示すステップナビゲーション は CodingMania に最初に表示されました。
]]>
<div class="Stepnav">
<ol>
<li class="current">１<span>．製品情報入力</span></li>
<li>２<span>．問合せ情報入力</span></li>
<li>３<span>．お客様情報入力</span></li>
<li>４<span>．確認</span></li>
<li>５<span>．送信完了</span></li>
</ol>
<!-- /.Stepnav --></div>
/* Stepnav
-----------------------------------------*/
.Stepnav ol {
margin-top: 40px;
display: table;
table-layout: fixed;
width: 100%;
box-sizing: border-box;
height: 48px;
border-left: solid 1px #cccccc;
border-right: solid 1px #cccccc;
}
.Stepnav ol li {
position: relative;
display: table-cell;
box-sizing: border-box;
padding-left: 25px;
text-align: center;
vertical-align: middle;
color: #2196f3;
font-size: 14px;
background-color: #f9f9f9;
font-weight: bold;
border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.Stepnav ol li:first-child {
padding-left: 0;
}
@media screen and (max-width: 960px) {
.Stepnav ol li {
font-size: 12px;
}
}
.Stepnav ol li.current {
background-color: #2196f3;
color: #FFF;
}
@media screen and (max-width: 960px) {
.Stepnav ol li span {
display: none;
}
}
.Stepnav ol li:before {
content: "";
position: absolute;
top: -1px;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
border-left: 24px solid #cccccc;
z-index: 99;
}
.Stepnav ol li:nth-child(5):before {
display: none;
}
.Stepnav ol li:after {
content: "";
position: absolute;
top: -1px;
right: -24px;
bottom: 0;
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
border-left: 24px solid #f9f9f9;
z-index: 99;
}
.Stepnav ol li:last-child:after {
display: none;
}
.Stepnav ol li.current {
border-top: solid 1px #2196f3;
border-bottom: solid 1px #2196f3;
}
.Stepnav ol li.current:after {
border-left: 24px solid #2196f3;
}
投稿 フォームにある現在地を示すステップナビゲーション は CodingMania に最初に表示されました。
]]>投稿 ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script>
(function($) {
function setimage(){
(function($) {
function setimage(){
// 設定
var height =$(window).height(); // 高さ
var width =$(window).width(); // 幅
var win_ratio = width / height;
$(".Opening").css({"height":height});
$(".Opening ul li").css({"height":height});
if (win_ratio > 1.5){ //画像の比率が大きかったら
$(".Opening ul li img.Opening__img").css({"width":"100%","height":"auto","margin-left":0});
var winwidth = $(".Opening").width();
var imgheight = winwidth*0.66;
var winheight = $(".Opening").height();
var imgtopmargin = (imgheight-winheight)/2;
$(".Opening ul li img.Opening__img").css({"margin-top":-imgtopmargin});
}else if (win_ratio < 1.5){ //画像の比率が小さかったら
var imgwidth = ((height/800))*1200;
var winwidth = $(".Opening").width();
var imgmargin = (winwidth-imgwidth)/2;
$(".Opening ul li img.Opening__img").css({"width":imgwidth,"height":height,"margin-left":imgmargin,"margin-top":0});
}
}
//slide
$(function(){
setimage();
var interval = 4000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 2000; // フェード処理の早さ（ミリ秒）
$(".Opening ul li").hide().css({"position":"absolute","top":0,"left":0});
$(".Opening ul li:first").addClass("active").show();
$(".Opening ul li:first img.Opening__img").animate({paddingRight:0.1},{
duration:5000,
step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
setInterval(function(){
var $active = $(".Opening ul li.active");
var $activeafter = $(".Opening ul li.active:after");
var $next = $active.next("li").length?$active.next("li"):$(".Opening ul li:first");
//$active.fadeOut(fade_speed,function(){$active.removeClass("active");});
$active.fadeOut(fade_speed);
$active.removeClass("active");
$next.fadeIn(fade_speed).addClass("active");
$(".Opening ul li.active img.Opening__img").animate({paddingRight:0.1},{
duration:5000,
step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
},interval);
});
//resi
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
console.log('resized');
setimage();
}, 200);
});
})(jQuery);
<div class="Opening"> <ul> <li><span><img class="Opening__img" src="img/1_drtftgyuhij.jpg" alt=""></span><img class="Opening__text" src="img/tite_01.png" alt=""></li> <li><span><img class="Opening__img" src="img/2_HIRO95_yuubaenokage.jpg" alt=""></span><img class="Opening__text" src="img/tite_02.png" alt=""></li> <li><span><img class="Opening__img" src="img/3_adsfagsrethdter.jpg" alt=""></span><img class="Opening__text" src="img/tite_03.png" alt=""></li> </ul> <!-- /.Opening --></div>
/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
}
.Opening ul li{
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
}
.Opening ul li img.Opening__text{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening__img{
max-width: inherit;
width: 100%;
height: auto;
}
投稿 ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます は CodingMania に最初に表示されました。
]]>投稿 slick[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="slick/slick.css" type="text/css" media="all" /> <script type="text/javascript" src="slick/slick.js"></script> <script type="text/javascript" src="js/main.js"></script>
$(function() {
//slick
$(".slider-for01").slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
//arrows: false,
fade: true,
adaptiveHeight: true,
asNavFor: '.slider-nav01'
});
$(".slider-nav01").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: '.slider-for01',
//centerMode: true,
focusOnSelect: true
});
$(".slider-for02").slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
//arrows: false,
fade: true,
adaptiveHeight: true,
asNavFor: '.slider-nav02'
});
$(".slider-nav02").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: '.slider-for02',
//centerMode: true,
focusOnSelect: true
});
$(".slider-for03").slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
//arrows: false,
fade: true,
adaptiveHeight: true,
asNavFor: '.slider-nav03'
});
$(".slider-nav03").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: '.slider-for03',
//centerMode: true,
focusOnSelect: true
});
//枚数がカルーセルに満たない場合
$(function() {
$(".mod_slide").each(function() {
var slidepak = $(this);
var image = $(slidepak).find(".mod_slide_img");
var num = $(slidepak).find(".mod_slide_img img").length;
var dots = $(slidepak).find(".slick-dots li");
var navimglast = $(slidepak).find("div.mod_slide_nav div.slick-track>div.slick-slide:last-child");
var prevbtn = $(slidepak).find("button.slick-prev");
var nextbtn = $(slidepak).find("button.slick-next");
var slidernav = $(slidepak).find(".mod_slide_nav .slick-track>div");
//
if (num < 8) {
$(dots).click(function() {
$(slidernav).removeClass("slick-current");
var indexnum = $(dots).index(this) + 1;
var checkimg = $(slidepak).find(".mod_slide_nav .slick-track>div:nth-child(" + indexnum + ")");
$(checkimg).addClass("slick-current");
});
function currmove() {
$(slidernav).removeClass("slick-current");
var curr = $(slidepak).find(".slick-dots li.slick-active");
var currIndex = $(dots).index(curr) + 1;
var btncheckimg = $(slidepak).find(".mod_slide_nav .slick-track>div:nth-child(" + currIndex + ")");
$(btncheckimg).addClass("slick-current");
}
$(prevbtn).click(function() {
currmove();
});
$(nextbtn).click(function() {
currmove();
});
// On swipe event
$(image).on('swipe', function(event, slick, direction) {
currmove();
// left
});
}
});
});
});
<div class="mod_slide"> <div class="mod_slide_img slider-for01"> <div><img src="img/01.jpg" /></div> <div><img src="img/02.jpg" /></div> <div><img src="img/03.jpg" /></div> <div><img src="img/04.jpg" /></div> <div><img src="img/05.jpg" /></div> <div><img src="img/06.jpg" /></div> <div><img src="img/07.jpg" /></div> <div><img src="img/08.jpg" /></div> <div><img src="img/09.jpg" /></div> </div> <div class="mod_slide_nav slider-nav01"> <div><img src="img/01.jpg" /></div> <div><img src="img/02.jpg" /></div> <div><img src="img/03.jpg" /></div> <div><img src="img/04.jpg" /></div> <div><img src="img/05.jpg" /></div> <div><img src="img/06.jpg" /></div> <div><img src="img/07.jpg" /></div> <div><img src="img/08.jpg" /></div> <div><img src="img/09.jpg" /></div> </div> <!-- //mod_slide --></div>
@charset "utf-8";
/* mod_body
-----------------------------------------*/
.mod_body{
margin: 0 auto;
width: 967px;
margin-top: 50px;
}
.mod_body p{
margin: 20px 0 20px 0;
}
/* mod_slide
-----------------------------------------*/
.mod_slide{
margin:0 auto;
width:706px;
margin-bottom: 50px;
}
.mod_slide .mod_slide_nav .slick-slide{
margin:5px;
}
.mod_slide .mod_slide_nav .slick-slide img{
width:100%;
height:auto;
box-sizing:border-box;
border:solid 2px #FFF;
cursor: pointer;
}
.mod_slide .mod_slide_nav .slick-slide.slick-current img{
border:solid 2px #f5a711;
}
.slick-initialized .slick-slide {
overflow:hidden;
}
/* slick-list */
.mod_slide_nav .slick-list {
margin: 0 30px 0 30px;
}
/* slick-dots */
.slick-dots {
margin-top: 10px;
display: block;
list-style: outside none none;
padding: 0;
text-align: center;
width: 100%;
}
.slick-dots li {
cursor: pointer;
display: inline-block;
height: 20px;
margin: 0 5px;
padding: 0;
position: relative;
width: 15px;
}
.slick-dots li button {
background: transparent none repeat scroll 0 0;
border: 0 none;
color: transparent;
cursor: pointer;
display: block;
font-size: 0;
height: 20px;
line-height: 0;
outline: medium none;
padding: 5px;
width: 20px;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: medium none;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {
opacity: 1;
}
.slick-dots li button::before {
color: black;
content: "●";
font-size: 28px;
height: 20px;
left: 0;
line-height: 20px;
opacity: 0.25;
position: absolute;
text-align: center;
top: 0;
width: 15px;
}
.slick-dots li.slick-active button::before {
color: black;
opacity: 0.55;
font-size: 34px;
}
/* */
.slick-prev, .slick-next {
background: transparent none repeat scroll 0 0;
border: medium none;
color: transparent;
cursor: pointer;
display: block;
font-size: 0;
height: 20px;
line-height: 0;
margin-top: -30px;
outline: medium none;
padding: 0;
position: absolute;
top: 50%;
width: 20px;
z-index:9;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
background: transparent none repeat scroll 0 0;
color: transparent;
outline: medium none;
}
.slick-prev:hover::before, .slick-prev:focus::before, .slick-next:hover::before, .slick-next:focus::before {
opacity: 1;
}
.slick-prev.slick-disabled::before, .slick-next.slick-disabled::before {
opacity: 0.25;
}
.slick-prev::before, .slick-next::before {
color: #666;
font-size: 20px;
line-height: 1;
opacity: 0.75;
}
.slick-prev {
left: 0px;
}
[dir="rtl"] .slick-prev {
left: auto;
right: 0px;
}
.slick-prev::before {
content: " \f053";
font-family: FontAwesome;
}
[dir="rtl"] .slick-prev::before {
content: " \f054";
font-family: FontAwesome;
}
.slick-next {
right: 0px;
}
[dir="rtl"] .slick-next {
left: 0px;
right: auto;
}
.slick-next::before {
content: " \f054";
font-family: FontAwesome;
}
[dir="rtl"] .slick-next::before {
content: " \f053";
font-family: FontAwesome;
}
投稿 slick[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー は CodingMania に最初に表示されました。
]]>投稿 サムネイルの画像をクリックで拡大・切り替え・表示します！[キャプション付] は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/swapimage.js"></script>
// JavaScript Document
$(function() {
$(".mod_thumlist").each(function() {
var click_flg = false;
var photoH = $(this).find(".mod_thumlist_photo_entry img").innerHeight();
var captionH = $(this).find(".mod_thumlist_photo_entry p").innerHeight();
$(this).find(".mod_thumlist_photo").css("height", photoH + captionH + "px");
var linkbtn = $(this).find("ul li a");
var bigimgwrap = $(this).find(".mod_thumlist_photo");
$(linkbtn).click(function() {
if (click_flg == false) {
click_flg = true;
$(bigimgwrap).prepend("<div class=\"mod_thumlist_photo_entry\"><img src='" + $(this).attr("href") + "' alt='" + $(this).attr("title") + "'><p>" + $(this).attr("title") + "</p>");
var removeimg = $(bigimgwrap).find(".mod_thumlist_photo_entry:eq(1)");
$(removeimg).stop(true, false).fadeOut("fast", function() {
$(this).remove();
click_flg = false;
});
click_flg = false;
return false;
} else {
return false;
}
});
});
});
<div class="mod_thumlist"> <ul class="ex_clearfix"> <li><a href="img/image01.jpg" title="オレンジのキャプション"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li> <li><a href="img/image02.jpg" title="グリーンのキャプション"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li> <li><a href="img/image03.jpg" title="ピンクのキャプション"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li> <li><a href="img/image04.jpg" title="ブルーのキャプション"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li> </ul> <div class="mod_thumlist_photo"> <div class="mod_thumlist_photo_entry"> <img src="img/image01.jpg" alt="orange" width="700" height="350"> <p>オレンジのキャプション</p> <!-- / .mod_thumlist_photo_entry --></div> <!-- / .mod_thumlist_photo --></div> <!-- / .mod_thumlist --></div>
/*
-----------------------------------------*/
.mod_thumlist li{
width:60px;
height:60px;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.mod_thumlist li a{
display:block;
}
.mod_thumlist li a:link {}
.mod_thumlist li a:visited {}
.mod_thumlist li a:hover {opacity:0.8;}
.mod_thumlist li a:active {opacity:0.8;}
/* IE—p «*/
.mod_thumlist li a:hover img {filter:alpha(opacity=80);}
.mod_thumlist_photo{
}
.mod_thumlist_photo_entry{
position:absolute;
width:700px;
}
投稿 サムネイルの画像をクリックで拡大・切り替え・表示します！[キャプション付] は CodingMania に最初に表示されました。
]]>投稿 クリックで表示する吹き出し型ドロップダウンメニュー は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="js/dropdown.js"></script>
$(function(){
//global nav
var btn = $(".mod_dropnavi ul li.parent");
var submenu = $(".mod_dropnavi_child");
var submenulink = $(".mod_dropnavi_child ul li a");
//click
$(btn).bind("click", "focus", function(event){
var shownav = $(this).find(".mod_dropnavi_child");
if($(shownav).css("display")=="none"){
$(shownav).slideDown("fast");
}else{
$(shownav).slideUp("fast");
}
});
//hover
$(btn).hover(function () {
},
function () {
$(submenu).slideUp("fast");
});
});
<div class="mod_dropnavi ex_clearfix"> <ul> <li><a href="#">Menu01</a></li> <li class="parent"><a href="javascript:void(0)">Menu02</a> <div class="mod_dropnavi_child"> <ul> <li><a href="#">Menu02_Aのタイトルが長い場合</a></li> <li><a href="#">Menu02_B</a></li> <li><a href="#">Menu02_C</a></li> </ul> <!-- /mod_dropnavi_child --></div> </li> <li><a href="#">Menu03</a></li> <li class="parent"><a href="javascript:void(0)">Menu04</a> <div class="mod_dropnavi_child"> <ul> <li><a href="#">Menu04_A</a></li> <li><a href="#">Menu04_B</a></li> <li><a href="#">Menu04_C</a></li> <li><a href="#">Menu04_D</a></li> </ul> <!-- /mod_dropnavi_child --></div> </li> </ul> <!--mod_dropnavi_end --></div>
/* drop down
-----------------------------------------*/
/* link */
.mod_dropnavi ul li a{
transition-property: border;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mod_dropnavi ul li a:link {text-decoration:none;}
.mod_dropnavi ul li a:visited {text-decoration:none;}
.mod_dropnavi ul li a:hover {text-decoration:none;}
.mod_dropnavi ul li a:active {text-decoration:none;}
/* mod_dropnavi */
.mod_dropnavi>ul{
width:920px;
height:45px;
border-bottom:solid 3px #003700;
background-color:#336600;
}
.mod_dropnavi>ul>li{
width:150px;
float:left;
position:relative;
text-align:center;
line-height:45px;
border-right:solid 1px #003700;
}
.mod_dropnavi>ul>li>a{
display:block;
color:#FFFFFF;
font-weight:bold;
border-bottom:solid 3px #003700;
}
.mod_dropnavi>ul>li>a:hover {border-bottom:solid 3px #336600;}
.mod_dropnavi>ul>li>a:active {border-bottom:solid 3px #336600;}
/* mod_dropnavi_child */
.mod_dropnavi .mod_dropnavi_child{
display:none;
position:absolute;
top:48px;
left:0px;
z-index:99;
padding:12px 0 0 0!important;
background:transparent url('img/icon_arrow_01.png') no-repeat 10px 0px!important;
}
.mod_dropnavi .mod_dropnavi_child ul{
padding:4px 27px 16px 27px!important;
background-color:#003700;
}
.mod_dropnavi .mod_dropnavi_child ul li{
font-size:90%;
line-height:1.3;
text-align:left;
margin:12px 0 0 0!important;
white-space:nowrap;
}
.mod_dropnavi .mod_dropnavi_child ul li a{
padding:0 0 0 12px!important;
display:inline-block;
background:transparent url('img/icon_arrow_02.png') no-repeat left 5px!important;
}
.mod_dropnavi .mod_dropnavi_child ul li a:link {color:#FFF; text-decoration:none;}
.mod_dropnavi .mod_dropnavi_child ul li a:visited {color:#FFF; text-decoration:none;}
.mod_dropnavi .mod_dropnavi_child ul li a:hover {color:#FFF; text-decoration:underline;}
.mod_dropnavi .mod_dropnavi_child ul li a:active {color:#FFF; text-decoration:underline;}
投稿 クリックで表示する吹き出し型ドロップダウンメニュー は CodingMania に最初に表示されました。
]]>投稿 jQueryで簡単にページ送りを自動で表示します。 は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="js/pagenav.js"></script>
$(function(){
// pagenav current
$(function(){
var id = $(".mod_pagenav").attr("id");
var current = $(".mod_pagenav ul li."+id);
//var prev =$();
$(current).addClass("active");
if($(current.next("li")).size()){
var nextlist = current.next("li");
var nextlink = nextlist.find("a").attr("href");
$(".mod_pagenav ul.linearNav li.linearNum").before('<li class="linearNext"><a href="'+nextlink+'">次のページへ>></a></li>');
}
if($(current.prev("li")).size()){
var prevlist = current.prev("li");
var prevlink = prevlist.find("a").attr("href");
$(".mod_pagenav ul.linearNav").prepend('<li class="linearPrev"><a href="'+prevlink+'"><<前のページへ</a></li>');
}
});
});
var pagenav ='<ul class="linearNav">'+ '<li class="linearNum">'+ '<ul>'+ '<li class="page01"><a href="index.html">1</a></li>'+ '<li class="page02"><a href="02.html">2</a></li>'+ '<li class="page03"><a href="03.html">3</a></li>'+ '<li class="page04"><a href="04.html">4</a></li>'+ '<li class="page05"><a href="05.html">5</a></li>'+ '<li class="page06"><a href="06.html">6</a></li>'+ '<li class="page07"><a href="07.html">7</a></li>'+ '</li>'+ '</ul>' '</ul>'; document.write(pagenav);
<div class="mod_pagenav" id="page01"> <script type="text/javascript" src="js/pagenavlist.js"></script> <!-- //mod_pagenav --></div>
/* mod_pagenav */
.mod_pagenav{
margin:0 auto;
width:960px;
margin:20px 0 20px 0!important;
}
.mod_pagenav ul{
position:relative;
text-align:center;
}
.mod_pagenav ul li.linearNum ul li{
display:inline-block;
border:1px solid #e5e5e5;
margin:0 5px 0 5px;
}
.mod_pagenav ul li.linearNum ul li.active,
.mod_pagenav ul li.linearNum ul li a:focus{
background-color:#f2f2f2;
font-weight:bold;
}
.mod_pagenav ul li a{
text-align:center;
display:block;
width:25px;
padding:2px 0 3px 0;
text-decoration:none!important;
}
.mod_pagenav ul li.linearPrev a,
.mod_pagenav ul li.linearNext a{
width:auto;
}
.mod_pagenav ul li.linearPrev{
position:absolute;
top:0;
left:0px;
z-index:9999;
}
.mod_pagenav ul li.linearNext{
position:absolute;
top:0;
right:0px;
z-index:9999;
}
投稿 jQueryで簡単にページ送りを自動で表示します。 は CodingMania に最初に表示されました。
]]>投稿 jqueryでxmlを読み込んでコンテンツを表示します。 は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="js/xmldata.js"></script>
$(function(){
function fresh(){
var dlbody = $("#news");
$.ajax({
type: 'GET',
url: 'list.xml',
dataType: 'xml',
success: function(xml){
var newslist = $(xml);
newslist.find('item').each(function(i){
i = i + 1;
if(i == 6) {
return false;
}
var newsitem = $(this);
var newsitem_title = newsitem.find('title').text();
var newsitem_date = newsitem.find('date').text();
var newsitem_link = newsitem.find('link').text();
var dt = $('<dt />').text(newsitem_date);
//var ddlink = $('<a />').text(newsitem_link);
var dd = '<dd><a href="'+newsitem_link+'">'+newsitem_title+'</a></dd>';
dlbody.append(dt);
dlbody.append(dd);
});
}
});
}
fresh();
});
<div class="mod_news"> <dl id="news"> </dl> <!-- /mod_news --></div>
/* mod_news
-----------------------------------------*/
.mod_news{
margin:50px 0 0 0;
}
.mod_news dl{
position:relative;
overflow:hidden;
}
.mod_news dt{
float:left;
width:130px;
padding:15px 0 0 0;
}
.mod_news dd{
border-bottom:dotted 1px #CCCCCC;
padding:15px 0 10px 130px;
line-height:1.3;
}
投稿 jqueryでxmlを読み込んでコンテンツを表示します。 は CodingMania に最初に表示されました。
]]>投稿 サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。 は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/swapimage.js"></script>
$(function(){
$(".mod_thumbnail").each(function(){
var set = $(this);
var btn = set.find(".thumbnaillist li img");
var image = set.find(".mainimglist img");
// hover時
$(btn).hover(function(){
var imagesrc=$(this).attr("class");
$(image).attr("src","img/"+imagesrc+".jpg").fadeIn();
$(image).attr("alt",$(this).attr("title"));
});
});
});
<div class="mod_thumbnail"> <div class="thumbnaillist"> <ul class="ex_clearfix"> <li><a href="https://codingmania.net/" title="orange"><img class="image01" src="img/img01.jpg"></a></li> <li><a href="https://www.google.co.jp/" title="green"><img class="image02" src="img/img02.jpg"></a></li> <li><a href="http://www.yahoo.co.jp/" title="pink"><img class="image03" src="img/img03.jpg"></a></li> <li><a href="http://www.amazon.co.jp/" title="blue"><img class="image04" src="img/img04.jpg"></a></li> </ul> <!-- thumbnaillist_end --></div> <div class="mainimglist"> <img src="img/image01.jpg" alt="orange"> <!-- mainimglist_end --></div> <!-- mod_thumbnail_end --></div>
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
margin:10px 0 0 0;
}
.thumbnaillist ul{
}
.thumbnaillist li{
width:60px;
height:auto;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.thumbnaillist li img{
width:60px;
height:auto;
}
.thumbnaillist li a{
display:block;
}
.thumbnaillist li a:link {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover {opacity:0.8;}
.thumbnaillist li a:active {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}
/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
width:700px;
height:350px;
margin:0 0 0 0;
}
.mainimglist img{
}
/* clearfix：float解除＆親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}
.ex_clearfix {
min-height: 1px;
}
* html .ex_clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
投稿 サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。 は CodingMania に最初に表示されました。
]]>投稿 [キャプション付き]サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/swapimage.js"></script>
$(function(){
$(".mod_thumbnail").each(function(){
var set = $(this);
var btn = set.find(".thumbnaillist li a");
var image = set.find(".mainimglist img");
var cap = set.find(".mainimglist p");
// hover時
$(btn).hover(function(){
$(image).attr("src",$(this).attr("href")).fadeIn();
$(image).attr("alt",$(this).attr("title"));
$(cap).text($(this).attr("title"));
});
//クリック時
$(".thumbnaillist a").click(function(){
return false;
});
});
});
<div class="mod_thumbnail"> <div class="thumbnaillist"> <ul class="ex_clearfix"> <li><a href="img/image01.jpg" title="オレンジ画像のキャプション"><img src="img/thumbnail01.jpg" width="60" height="60" alt=""></a></li> <li><a href="img/image02.jpg" title="グリーン画像のキャプション"><img src="img/thumbnail02.jpg" width="60" height="60" alt=""></a></li> <li><a href="img/image03.jpg" title="ピンク画像のキャプション"><img src="img/thumbnail03.jpg" width="60" height="60" alt=""></a></li> <li><a href="img/image04.jpg" title="ブルー画像のキャプション"><img src="img/thumbnail04.jpg" width="60" height="60" alt=""></a></li> </ul> <!-- thumbnaillist_end --></div>
/* mod_thumbnail
--------------------------------------------*/
.mod_thumbnail{
margin:0 0 30px 0;
}
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
}
.thumbnaillist ul{
}
.thumbnaillist li{
width:60px;
height:60px;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.thumbnaillist li a{
display:block;
}
.thumbnaillist li a:link {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover {opacity:0.8;}
.thumbnaillist li a:active {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}
/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
width:700px;
height:350px;
margin:20px 0 0 0;
}
.mainimglist img{
}
投稿 [キャプション付き]サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ は CodingMania に最初に表示されました。
]]>投稿 carouFredSel[jquery]を使ってサムネイルが付いたスライドショー は CodingMania に最初に表示されました。
]]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script>
<script>
$(function() {
$('.mod_carousel ul').carouFredSel({
auto : 4000,
items: 1,
scroll: {
items : 1,
//easing : "swing",
fx : "crossfade",
duration : 800
},
pagination: {
container: '.mod_pager',
anchorBuilder: function( nr ) {
var src = $("a img",this).attr('src');
return '<a href="#" class="new_thumb' + nr + '"><img src="' + src + '" width="150px" /><span></span></a>';
}
}
});
});
</script>
<div class="mod_mainslide"> <div class="mod_carousel"> <ul> <li><a href="#"><img src="img/slide_01.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_02.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_03.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_04.jpg" width="960" height="350" alt="" /></a></li> <li><a href="#"><img src="img/slide_05.jpg" width="960" height="350" alt="" /></a></li> </ul> <!-- /new_carousel --></div> <div class="mod_pager"></div> <!-- /mod_mainslide --></div>
.mod_mainslide {
width:960px;
margin:50px auto 0 auto;
}
.mod_carousel ul{
height:350px;
overflow:hidden;
}
.mod_carousel li {
width:960px;
display: block;
float: left;
}
.mod_pager{
margin:10px 0 0 0;
text-align:center;
}
.mod_pager a{
margin:0 5px 0 5px;
border:solid 1px #999;
display:inline-block;
}
.mod_pager a.selected{
border:solid 1px #333;
}
投稿 carouFredSel[jquery]を使ってサムネイルが付いたスライドショー は CodingMania に最初に表示されました。
]]>