jQueryで要素を追加する

jQueryで要素を追加する場合や、特定の要素を囲うには下記のように記述します。

▼append
appendは指定した要素の最後にHTMLを追加します。

▼prepend
prependは指定した要素の最初にHTMLを追加します。

▼before
beforeは指定した要素の前にHTMLを追加します。

▼after
afterは指定した要素の後ろにHTMLを追加します。

▼wrap
wrapは指定した要素をHTMLで包み込みます。

参考:
https://2inc.org/blog/2013/03/07/3027/
http://www.re-creators.jp/blog/2008/12/09_167.html

メインビジュアルの背景を動画にする

自社のサイトリニューアルの際に、メインビジュアルで動画を流すことになったので、
html5のvideoタグと、再生を制御するjavascriptについて解説します。

■HTMLソース

■css

今回は、動画をフェードインさせる必要があったので、video要素の直前にカバー画像用のdivを作りました。
video自体をjQueryでフェードインさせると、処理が重たくなり再生がスムーズにされなかったので、
フェードイン効果はcss3で実装しています。

■javascript

タブ切り替え

簡単なタブによるコンテンツの表示切替を実装するコードです。

◆jQuery

◆HTML

◆Javascript

参考:http://www.finefinefine.jp/jquery/kiji422/

JS:class付与とスムーススクロール

jqueryを使ってclass付与と同時にアンカー要素にスムーススクロールを実装します。
最初、class付与の処理にreturn false;を書いていたので、処理が通らずスムーススクロールが実行されませんでした。
こういったイベントのバブリング(伝播)について簡単にまとめると、

・クリックなどのイベントは、子要素から親要素へと伝播される(バブリング)
・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。
・return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルする。

引用元:http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html

JS:telリンクをスマホの時だけ有効化

レスポンシブサイトで、スマホ表示のときだけtelリンクを有効化したいとき、cssでやるのもいいですがソースが汚れるだけなので、おとなしくscriptで実現しましょう。

あ、当然jQueryの本体は読み込んでいるものとして書きますので、あしからず。

で、こんな感じでソースを書きますね。

あとはお好みでcssを書いちゃってください。以上。

Javascriptを使ってカーソルが触れると画像を変更する。

今回は通信販売サイトでよくある商品詳細ページでサムネイル画像にカーソルがきた時に
メインの大きな画像を切り替えていく動きをJavascriptで再現したいと思います!

■イメージ図
js_over01

■使用したHTMLのコードはこちら

tableの上段にnameにitemImageと指定したメイン画像を置き、
下段にはtdにあるサムネイル画像にマウスカーソルを合わせるとonmouseoverでmyChgPicに大きな画像のurlを指定します。

■使用したjavascriptのコードはこちら

HTMLで指定したmyChgPicに対して
tdの上段で指定したname=itemImageの画像のURLを
document.imagesで書き換えるという
3行のシンプルなコードで完成!

■下記は実際動かしたDEMOです。