jQuery
kanri-top.php ------- // ボタン <li class="target" id="button01"><a href="" class="navi">メニュー</a></li> // 呼び出す箇所 <div id="sample01"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#button01').click(functio…
HTML ---------- <div class="container"> <div class="inner"> <div class="ChangeElem_Btn_Content"> <button class="ChangeElem_Btn">厳選ご当地</button> <button class="ChangeElem_Btn">カタログギフト</button> <button class="ChangeElem_Btn">スイーツ・食品</button> <button class="ChangeElem_Btn">アレルギー対応食品</button> </div></div></div>
HTML ---------- <div> <img src="img/g-housoushi-03-thumb.jpg" alt="" class="thumbnail-3"> <span class="noshi-title">01 水玉（赤色系）</span> <div id="largeImg-3"><img width="800" src="img/g-housoushi-03.jpg"></div> </div> ----------- CSS .thumbnail-3 {width:80%;} #largeImg-3 {display: none;} .l…
動きはこんな感じです to 看護 jQueryのCDNは、 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> か <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> です。 ーーー html部分 <div id="contactWrap"> </div> に cssの 実際の動きはこちらで確認できます。 http://tokotoko66677…
<div class="message"><a href="#" class="btn1">個人の方</a><a href="#" class="btn2">業者の方</a></div> <style> .message {color: #fff;padding: 20px;background: #b2946c;position: relative;z-index: 10;font-weight:bold;font-size:20px;text-align:center;width: 300px;height: auto;left:65%;}.message:before {content:…
jQuery(function(){ jQuery(window).scroll(function(){ if(jQuery(window).scrollTop() > 900) { jQuery('.top-content').css('background-color', 'rgba(0,0,0,0.6)'); } else { jQuery('.top-content').css('background-color', 'rgba(255,255,255,0)'); }…
<html> <head> <style> nav { width: 312px; height: 100%; transition: all 0.2s; transform: translate(312px); position: fixed; top: 0; right: 0; z-index: 1000; background-color: #FFF; } nav.open { transform: translate(0); } </style> </head> <script> // jQueryは読み込み済み前提 $(func</html>…
<style> .box-1{width: 100%;}.box-1a{width: 44%;float: left;background-image:url(../images/kaiga_on.jpg);padding: 11em 5em;}.box-1b{width: 44%;float: left;margin: 0 3em;} .show{display: block;}.hide{display: none;}.btn{background: #328bda;color: #…
jQuery(function(){ var setArea = jQuery('.scrEvent'), showHeight = 200; setArea.css({display:'block',opacity: '0'}); jQuery(window).on('load scroll resize',function(){ setArea.each(function(){ var setThis = jQuery(this), areaTop = setThis.…
functions.php --------- // スクロールアニメーション jsfunction scrollTop_script(){ wp_enqueue_script('scrollTop-script', get_template_directory_uri().'/link.js', array('jquery'));}add_action('wp_enqueue_scripts', 'scrollTop_script'); -----…
index.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"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
nav.js jQuery(function(){ jQuery('#openbtn').click(function(){ jQuery('#mainmenu').slideToggle(); }); }); ---- functions.php // トグルbtn function navbtn_scripts() { wp_enqueue_script('navbtn-script', get_template_directory_uri() . '/nav.j…
<p><img src="img/p_sp.jp" class="switch"></p> <styel> .switch{visibility: hidden; } </style> var setImg = $('.switch') , namePc = '_pc' , // PC用 nameSp = '_sp' , // スマホ用 switchwidth = 767; // 判別 setImg.each(function(){ var selfImg = $(this); function switchImg() { if(window.innerWidth > swit…
・高さをそろえる 参考 [jQuery] レスポンシブ：複数横並びdiv枠の高さを取得、最大値に揃える | ジュウロクデザイン www.webantena.net ---------- ・home.php に固定ページ出力 [WordPress]特定の固定ページの内容を取得して表示する | ホームページ制作 W…
<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"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
<script type="text/javascript">/* 消し */$(document).ready(function(){jQuery("#got").delay(7000).fadeOut(1000);});</script> <script>/*-- 画面サイズ ピシャリ ---*/$(function(){ $(document).ready(function(){ hsize = $(window).height(); $("#to_img").css("height",hsize + "px"); }); $(window…
<section> <div class="scrEvent area1"><p>コンテンツエリア_1</p></div> <div class="scrEvent area2"><p>コンテンツエリア_2</p></div> <div class="scrEvent area3"><p>コンテンツエリア_3</p></div> <div class="scrEvent area4"><p>コンテンツエリア_4</p></div> <div class="scrEvent area5"><p>コンテンツエリア_5</p></div> </section>
<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"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></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"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></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"> </meta></meta></meta></head></html>
<html lang="ja"> <head> <meta charset="utf-8"> <title>Jquery メモ</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> </head> <body> <style>/*- fadeBTN フェードボタン hover*/ .fadeB…</body></html>
html ----- <html lang="ja"> <head> <meta charset="utf-8"> <title>ホバーで表示</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div class="col-4 gallery-item"> </div></body></html>
index.html ----- <html lang="ja"> <head> <meta charset="utf-8"> <title>ホバーで表示</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div class="col-4 gallery-item"> </div></body></html>
index.html --- <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>クリックで表示</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <body> <div id="read-more">もっと読む</div> <div id="more-text">…</div></body></html>
$(function(){ // SNSボタン $('.social-icon').hover( function(){ $(this).children('span').animate({ 'font-size':'30px' }, 300); }, function(){ $(this).children('span').animate({ 'font-size':'24px' }, 300); } ); // トップへ戻るボタン $('#top…
