JavaScript + Ajax 実践サンプル集 - スライダーでイメージを拡大・縮小する

スライダーでイメージを拡大・縮小する

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのSlider()プラグインを利用してイメージをリサイズします。サンプルのイメージの上部にスライダーが表示されていますのでドラッグして左右に移動します。そうするとイメージがリサイズされます。

$('.slider4').Slider(	{
  accept: '.indicator',
  opacity: 0.8,
  onSlide: function(cordx, cordy) {
    $('#imageHolder img').attr('width', 70 + 100 * cordx / 100);
  },
  values: [
    [290, 0]
  ]
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Coda Slider </title>
  <link href="jQuery/imageSlider/StyleSheet.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/imageSlider/jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jQuery/imageSlider/interface.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

$('.slider4').Slider(	{
	      accept: '.indicator',
	      opacity: 0.8,
	      onSlide: function(cordx, cordy) {
	        $('#imageHolder img').attr('width', 70 + 100 * cordx / 100);
	      },
	      values: [
			    [290, 0]
		    ]
	    });     
     
    });

</script>

</head>
<body>

</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
.slider4
{
  width: 300px;
  height: 20px;
  background-image: url(images/slider_resize_back.jpg);
  position: absolute;
  top: 50px;
  left: 100px;
  border: 0px hidden #000;
}
#indicator1
{
  background-color: #fff;
  border: 1px solid #ccc;
  height: 20px;
  width: 10px;
}
#imageHolder
{
  position: absolute;
  left: 100px;
  top: 100px;
  width: 650px;
  border: 1px solid #aaa;
  padding: 10px;
}
#imageHolder img
{
  margin: 10px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/imageSlider/StyleSheet.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/imageSlider/jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jQuery/imageSlider/interface.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

      $('.slider4').Slider(	{
	      accept: '.indicator',
	      opacity: 0.8,
	      onSlide: function(cordx, cordy) {
	        $('#imageHolder img').attr('width', 70 + 100 * cordx / 100);
	      },
	      values: [
			    [290, 0]
		    ]
	    });     
     
    });
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div class="slider4">
	<div class="indicator" id="indicator1"> </div>
</div>
<div id="imageHolder">
	<img src="jQuery/imageSlider/images/panda/Active.jpg" width="180" />
	<img src="jQuery/imageSlider/images/panda/Actual.jpg" width="180" />
	<img src="jQuery/imageSlider/images/panda/Climbing.jpg" width="180" />
	<img src="jQuery/imageSlider/images/panda/Dynamic.jpg" width="180" />
	<img src="jQuery/imageSlider/images/panda/Emotion.jpg" width="180" />
	<img src="jQuery/imageSlider/images/panda/Panda.jpg" width="180" />
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

スライダーでイメージを拡大・縮小する

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

スライダーでイメージを拡大・縮小する

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5