結果からいうとencodeURIComponentをかける範囲によって挙動不審な動きをしてしまったという。

失敗例

まずは共通のhtmlとしてボタンを設置します。
今回はFacebook、Twitterと最近増えてるLINEのボタンを。

<div id="sns-area">
<a class="Facebook" href="#" target="_blank">シェア</i></a>
<a class="Twitter" href="#" target="_blank">ツイートする</a>
<a class="Line" href="#" target="_blank">LINEで送る</a>
</div>

そしてすぐ後などにjavascriptを記述します。

<script>
var text = encodeURIComponent("SNSに投稿する文字列をURIエンコードしたときのメモ)");
var pageurl = "http://lettuce-eater.com/blog/?p=364";
var Facebook_url = encodeURIComponent("http://www.facebook.com/sharer.php?u=" + pageurl + "&t=" + text);
var Twitter_url = encodeURIComponent("http://twitter.com/share?text=" + text + "&url=" + pageurl);
var Line_url = encodeURIComponent("http://line.me/R/msg/text/?" + text + " " + pageurl);
$('.Facebook').attr('href', Facebook_url);
$('.Twitter').attr('href', Twitter_url);
$('.Line').attr('href', Line_url);
</script>

→失敗例のDEMO

テキストとページのURLを用意し、各共有用のURLにくっつけたものを encodeURIComponent でURIエンコードして準備完了。
jQueryでaタグのhref属性に入れたら完了、のはずでした。

開発者ツールとかで書き換えられたhref属性を見てみても正しくエンコードされたURLが記述されているのに、クリックするとこのページのURLが頭に差し込まれてわけのわからないアドレスになりNot Foundに。

成功例

先ほどのjavascript部分を修正します。

<script>
var text = encodeURIComponent("SNSに投稿する文字列をURIエンコードしたときのメモ");
var pageurl = "http://lettuce-eater.com/blog/?p=364";
$('.Facebook').attr('href',("http://www.facebook.com/sharer.php?u=" + pageurl + "&t=" + text));
$('.Twitter').attr('href', ("http://twitter.com/share?text=" + text + "&url=" + pageurl));
$('.Line').attr('href', ("http://line.me/R/msg/text/?" + text + " " + pageurl));
</script>

→成功例のDEMO

変更点としては入込み前の完成文言にencodeURIComponentをかけるのではなく、日本語の部分にのみ先にencodeURIComponentをかけたところです。

詳しい人はすんなりわかりそうですがハマってしまった自分としてはBLOGネタとしてメモでした。

利用したのは下記プラグイン
jQuery Slider2
スライダー機能を実装します。実際動いているスライダー内の download ボタンからダウンロード。
TouchSwipe
スワイプ機能の実装。Latest TouchSwipe on github download からダウンロード。

【html header】
jquery本体と、DLした3つのcssとjsを読み込みます。

<link rel="stylesheet" href="jquery.slider.css">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.slider.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

jQuery Sliderの設定

<script type="text/javascript">
$(function(){
	$('#slideArea').slider({    　//コンテンツを内包する要素の設定
		autoplay: true,     　//自動再生
		showPosition: true, 　//現在の表示
		hoverPause: true,   　//マウスオーバーで停止
		wait: 3000,         　//停止時間
		fade: 500,          　//スライド時間
		direction: "left"   　//スライド方向
	});
});
</script>

【javascript】
ここで、スワイプするとスライダーが動くように先ほど読み込んだ jquery.slider.min.js に記述を追加します。
インデントが削除してあって見づらいですが、コード最後のほうにある ”_init();” で改行して下記4行を記述します。

～～～～_init();
//スワイプ用ここから
$(this).swipe({
	swipeLeft:function(eventfingerCount){_next();},  //左にスワイプ
	swipeRight:function(eventfingerCount){_prev();}  //右にスワイプ
});
//スワイプ用ここまで
};})(jQuery);

【html body】
slideAreaを設定した中にコンテンツを記述します。

<div id="slideArea">
	<div class="item">
		<h3 class="title">SLIDE1</h3>
		<div><img src="image1.jpg"></div>
	</div>
	<div class="item">
		<h3 class="title">SLIDE2</h3>
		<div><img src="image2.jpg"></div>
	</div>
	<div class="item">
		<h3 class="title">SLIDE3</h3>
		<div><img src="image3.jpg"></div>
	</div>
</div>

これで、PCでもスマホでもスワイプしてスライダーの制御ができます。

→DEMO

下記サイト様のサンプル等を参考にさせて頂きました。
JavaScriptでdiv要素をさくっとスライド!「jQuery Slider2」
「TouchSwipe」スワイプイベント実装用のjQueryプラグイン

下記サイトのDownload the plugin from githubからプラグイン一式をダウンロード
jQuery scroll parallax plugin

基本、サンプルを踏襲しつつ進めていきます。

→DEMO1

【html header内】
以下3つのjsを読み込みます。

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/jquery.scrollParallax.min.js"></script>

<script type="text/javascript">
$(function(){
	$('.s_02').scrollParallax({'speed': -0.2});
	：
	$('.s02').scrollParallax({'speed': 0.2});
	：
});
</script>

サンプルでは各要素に個別にスピードの設定をしてありましたが、
ここではスピード用のクラスごとにscrollParallaxのスピードを設定して使用しています。

【html body内】

<ul class="items">
	<li class="item item1 s_02">
		<div class="inner inner1_1 s_06"></div>
		<div class="inner inner1_2 s_14"></div>
		<div class="inner inner1_3 s_20"></div>
		<div class="content">テキストコンテンツエリア1<br>ダミー画像</div>
	</li>
	<li class="item item2 s_02">
		<div class="inner inner2_1 s02"></div>
		<div class="inner inner2_2 s04"></div>
		<div class="inner inner2_3 s06"></div>
		<div class="content">テキストコンテンツエリア2<br>雲</div>
	</li>
	<li class="item item3 s_02">
		<div class="inner inner3_1 s_04"></div>
		<div class="inner inner3_2 s_02"></div>
		<div class="inner inner3_3 s_08"></div>
		<div class="content">テキストコンテンツエリア3<br>泡</div>
	</li>
</ul>

【css内】

.item1{background: black url(http://dummyimage.com/1024x768/1576bd/2a88ce.jpg&text=背景画像) 0px 0px fixed no-repeat;}
.inner1_1{background: url(http://dummyimage.com/200x200/bbb/ccc.jpg&text=innerimage1) 400px 200px fixed no-repeat;}
:

( li .item ) 1ブロックごと
( li .item+数字 ) cssで背景画像を指定
( li .inner ) 各小さいアイテム
( li .inner+数字 ) 各小さいアイテムにcssで背景画像と基本表示位置を指定

→DEMO1

【応用】以下はページ内リンクとスクロールのイージング追加版です

<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.easie.js"></script>

<script type="text/javascript">
    $(function(){
	/* page's scroll */
	$('a[href^=#]').click(function() {
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
    
    /* mousewheel easing */
	var scrolly = 0;
	var speed = 100;
	$('html').mousewheel(function(event, mov) {
		if(jQuery.browser.webkit){
			if (mov > 0) scrolly =  $('body').scrollTop() - speed;
			else if (mov < 0) scrolly =  $('body').scrollTop() + speed;
		} else {
			if (mov > 0) scrolly =  $('html').scrollTop() - speed;
			else if (mov < 0) scrolly =  $('html').scrollTop() + speed;
		}
		$('html,body')
			.stop()
			.animate({scrollTop: scrolly}, 'slow',$.easie(0,0,0,1));
			//イージングプラグイン使わない場合
			//.animate({ scrollTop: scrolly }, 'normal');
		return false;
	});
</script>

http://dummyimage.com/1024x768/333333/cccccc.jpg&text=ダミー画像