複数のコンテンツエリアを後ろから前へ回転表示してみます。 1．CSSの記述例 （以下は調整してみて下さい） <style type="text/css" media="all"...
...jquery.vortex.js：後ろから前へコンテンツエリアを回転表示
マウスオーバー（mouseenter）とマウスアウト（mouseleave）を使ってimgタグのsrc要素を入れ替え表示
jQueryのmouseenterとmouseleaveを使って画像タグのsrc要素を入替え表示してみます。 1．CSSの記述例 以下は任意です。 <style> .clWrap{ width:700px; ...
...指定のタグをループ（setTimeout）で動かし続ける仕組み
ページ内の任意のタグをsplitで指定し、setTimeoutでループで数px指定したタグをランダムに動かしてみました。 1．JavaScriptの記述例 <script language="javasc...
...ページ内にあるURL（http、httpsから始まる文字）をjQueryを使ってリンク化
ページ内にあるURL（http、httpsから始まる文字）をリンク化（href）します 1．とCSSの記述例 <style> .clWrapSub{ width:500px; margin:0 auto; t...
...DOMDocument：xmlファイルデータを読込んで出力するphp
phpでxmlファイルデータを読込んで出力してみます。 1．xmlファイルの例 （今回はdata.xmlを読込んで出力します） ＜?xml version="1.0" encoding="U...
...リスト（liタグ）の情報を1行ずつ切替えて1行ニュースの様に表示する方法
リスト（liタグ）の情報を1行ずつ切替えて、1行ニュースの様に表示させます。 1．CSSの記述例 <style type="text/css"> <!-- #idNews{ bord...
...jquery.champagne.js：liタグ要素をランダムにフェードイン表示できるJs
ページ表示の際やクリック時に複数のliタグ要素をランダムにフェードイン表示してみます。 1．読込むCSS・JsファイルとJavaScriptの記述例 <link rel="stylesheet"...
...jquery.roundabout.js、jquery.roundabout-shapes.js：リストタグの要素を色々な種類の回転方法で表示してみる
リストタグ（li）系のスライダーって結構色々種類がありますが、このjsで色々な種類の回転表示が可能な様です。 1．CSSの記述例 以下は調整してみて下さい。 <style type="text/css&q...
...jQuery UIのdraggable・droppableを使用しボックスをドラック＆ドロップしてみる
jQuery UIのdraggable・droppableを使用して、ドラッグ＆ドロップを実装してみました。 WordPress管理画面のウィジェット機能みたいな感じです。 1．CSSの記述例 <style typ...
...attr.replace：マウスオーバー時の画像切替を簡単に実現する記述
マウスオーバーでページ内の画像をファイル名を変更する方法です。 1．読込むJsとJavaScriptの記述例 ページ内の画像ファイル名にある文字列「_off」を「_ov」に差換え表示します。 <script typ...
...