jQuery

jQUery メモ hover btn 表示 & 画像入れ替え

<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 まとめ 2017 11 memo

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.…

WP メニュー から コンテンツへ スクロールアニメーション JS

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'); -----…

jQUery メニュー スマホ 

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>

スマホ スライドボタン JS

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…

jQuery デバイス 判別

<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…

wordpress メモリンク

・高さをそろえる 参考 [jQuery] レスポンシブ:複数横並びdiv枠の高さを取得、最大値に揃える | ジュウロクデザイン www.webantena.net ---------- ・home.php に固定ページ出力 [WordPress]特定の固定ページの内容を取得して表示する | ホームページ制作 W…

jQuery アニメーション メモ

<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>

JS メモ web

<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…

jQuery パララックス下地

<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>

jQuery 2月メモ 01

<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>

ajax xml 取得 表示 

<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>

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

<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>

jQuery animate hover メモ

<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>

Jquery hover メモ

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>

jQuery memo_03 hover

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>

jQuery memo_02

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>

jQuery memo_01

$(function(){ // SNSボタン $('.social-icon').hover( function(){ $(this).children('span').animate({ 'font-size':'30px' }, 300); }, function(){ $(this).children('span').animate({ 'font-size':'24px' }, 300); } ); // トップへ戻るボタン $('#top…