ログイン
英会話| 婚活| 北海道専門学校| 東北専門学校| 東海専門学校| 沖縄専門学校| ホームページ制作| 2万円HP制作|

ブログテンプレート制作目録

面白かったので追加しました

現在の位置:TOP >  Javascript / jQuery >  面白かったので追加しました

面白かったので、又、jQueryを追加してみました。

 

一番下まで行くと横からスライドしてくるコンテンツ

 

設置箇所はトップページのみ。

 

説明しているサイト

http://www.webopixel.net/javascript/538.html

ソース(jQuery)

 

jquery-1.7.1.js

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>

最新版の呼び出し↓
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

要素をスライドさせる(無くても可能)↓
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>

 

<script type="text/javascript">
$(function() {
    var winWidth = $('body').outerWidth(true);
    var lower = $('#lower');
    var slide = $('#slide');
    //画面下位置を取得
    var bottomPos = $(document).height() - $(window).height() -300;
    var showFlug = false;
    //slideを画面右外へ配置
    $('#slide').css('margin-left', winWidth+'px');
    $(window).scroll(function () {
        if ($(this).scrollTop() >= bottomPos) {
            if (showFlug == false) {
                showFlug = true;
                slide.stop().animate({'marginLeft' : '0px'}, 200);/*多分speed*/
            }
        } else {
            if (showFlug) {
                showFlug = false;
                slide.stop().animate({'marginLeft' : winWidth+'px'}, 200);/*多分speed*/
            }
        }
    });
    //閉じるボタン
    $('#close').click(function(){
        lower.hide();
    });
    //ウィンドウリサイズしたらwidth変更
    $(window).resize(function(){
        winWidth = $('body').outerWidth(true);
        bottomPos = $(document).height() - $(window).height() - 300;
    });
});
</script>

ページトップへ ページトップへ
ページボトムへ

制作してる人

profile
プロフィールは個別に作りたいと思うのは自分だけでしょうか?上の画像は訓練校に居た頃制作。デッサンしたことあるけど、これはただのラクガキです。ちょっとレイヤー効果追加。

ブログテンプレート量産中!・・・でも今はPHPとjQueryで遊んでるラボの人です。

最近はラボよりもWordPressやタウンネットブログのエンジンを使ってサイト制作(仕事)をやってます。

QRコード

ブログテンプレート制作目録

RSS

RSS1.0 RSS2.0