Q&A
jQueryを使って縦にスクロールすると別の画像に切り替わるサイトを作りたいと思っています。
よくサイトとかでスクロールするごとに画像が切り替わっていくようなものがあるかと思いますが
どうすればできますでしょうか？
どなたかサンプルコード教えていただけますでしょうか？
回答1件
0
ベストアンサー
サンプルコードです。
lang
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 7<style> 8body { 9 margin: 0; 10 padding:0; 11 height: 2000;x; 12} 13#b1 { background: url(‘sample.jpg’) no-repeat; } 14</style> 15</head> 16<body> 17<div id="b1" class="box"></div> 18<div id="b2" class="box"></div> 19<script> 20$(function() { 21 $(window).scroll(function() { 22 var d = $(this).scrollTop(); 23 console.log(dy); 24 25 //y方向にずらす。 26 $('#b1').css('background-position', '0 '+d+'px'); 27 }); 28 </script> 29 </body> 30 </html>
これは、scrollTopを使って動作させています。
scrollTopについては以下を参考にしてみてください。
http://semooh.jp/jquery/api/css/scrollTop/_/
投稿2014/11/03 13:37
総合スコア40
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。