友人から、リンクをクリックしたときに背景が1回だけ変わるWebページを設定するように頼まれました。私はこのサイトで与えられたいくつかの例を試し、グーグルでいくつか見ましたが、それらはほとんどすべてギャラリースタイルの周期的な変化です。たぶん私はただイライラしていて、森の木々を見ていません...
ページは@mysite/julieです。画像は@mysite/ julie / images/blogbka.pngと/images/blogbk.pngです。
以下にあるソリューションを使用しました（https://stackoverflow.com/a/11362465/1506620）
よろしくお願いします。
var is=true;
document.body.onclick = function( e ) {
if ( e.target.tagName === 'A' ) {
if(is){
document.body.style.background='url(http://adultdave.co.uk/julie/images/blogbka.png)';is=false;}
}
};
これがあなたの望むもの、つまり一度だけ画像を変更することを願っています。そうでない場合は、教えてください。
var ischange=true;
document.onclick=function(e){
if( e.target.tagName === 'A' &&ischange)
{
document.body.style.background='url(/*Image url*/)';
ischange=false;
}
}
ここでは、各ページの読み込み時に変数ischangeがtrueに初期化され、リンクがクリックされると、背景が変更され、ischangeがfalseに設定されるため、これ以上背景を変更することはできません。
1つのアプローチは、別の関数をラップする関数を使用し、最初に呼び出されたときにのみ内部関数を実行することです。これは、そのようなかなり一般的なバージョンです。
var once = function(fn, thisObj) {
var called = false;
var val;
return function() {
if (called) {return val;}
called = true;
val = fn.apply(thisObj || null, arguments);
return val;
};
};
次に、MooToolsイベントリスナーをへの呼び出し内にラップしてonce()、それが1回だけ呼び出されることを知ることができます。これは、このような問題に対するかなり洗練された解決策になる可能性があります。
jQueryを使用して各リンクをクリックするとページの背景をランダムに変更するためのビンを作成しました。したがって、次の手順に従ってください。
1）ヘッダーに最新のJqueryjavaスクリプトファイルを含めます。
2）HTML：
<div>
<p>
When you click on following paragraph link, every time it will be changed random background of the page
</p>
<p>
You have a present that was really memorable. It could have been given for an
<a href="#">
important occasion
</a>
or just for no reason at all. Tell us about the present and why it was memorable. Include the reason it was given, a
<a href="#">
description
</a>
of it, and how you felt when you got it.
The objective is to write a
<a href="#">
narrative essay
</a>
about this present you were given
The subject is a
<a href="#">
memorable present
</a>
The three main subtopics are:
<ul>
<li>
<a href="#">
the reason it was given
</a>
</li>
<li>
<a href="#">
a description of it and
</a>
</li>
<li>
<a href="#">
how you felt when you got it
</a>
</li>
</ul>
</p>
</div>
CSS：
body{
background:url("http://www.freeppt.net/background/modern-pink-floral-backgrounds-for-powerpoint.jpg");
}
JQuery：
var items = new Array();
items[0] = "http://www.publicdomainpictures.net/pictures/10000/nahled/abstract-orange-background-29541280675430Trj9.jpg";
items[1] = "http://www.psdgraphics.com/wp-content/uploads/2011/03/red-flowing-background.jpg";
items[2] = "http://www.dvd-ppt-slideshow.com/images/ppt-background/background-3.jpg";
items[3] = "http://www.purplebackgrounds.net/wp-content/uploads/2011/10/purple-heart-background-680x544.jpg";
items[4] = "http://www.freeppt.net/background/beautiful-on-green-backgrounds-for-powerpoint.jpg";
$(function() {
var bg_img = '',
last_bg = '';
$("a").click(function() {
bg_img = items[Math.floor(Math.random() * items.length)];
if (last_bg == bg_img) bg_img = items[Math.floor(Math.random() * items.length)];
last_bg = bg_img;
$("body").css('backgroundImage', 'url(' + bg_img + ')');
});
});
http://codebins.com/codes/home/4ldqpbcでDEMOをお試しください
私が見ているように、ページ上のすべてのアンカータグのクリックイベントを噛み砕いて追跡するために、ユーザーのブラウザにCookieを提供する必要があります。あなたは次のようなことをすることができます：
モックHTML
<ul id="ActionLinks">
<li><a href="#" class="tracked-click">Click Me!</a></li>
<li><a href="#" class="action-clear-cookie">Clear Cookie!</a></li>
</ul>
jQueryコード
<script type="text/javascript">
$(document).ready(function () {
// Array to store options
var settings = {
getRadomImage: function () {
//Update this with your different images.
var items = [
"http://adultdave.co.uk/julie/images/blogbka.png",
"http://adultdave.co.uk/julie/images/blogbka.png",
"http://adultdave.co.uk/julie/images/blogbka.png",
];
var img = items[Math.floor(Math.random() * items.length)];
return img;
},
cookieName: "tracker",
cookieOpts: { expires: 1} //cookie plug-in options
}
//Capture all tracked clicks
$(".tracked-click").click(function (e) {
//Check to see if there is a cookie for the user.
if ($.cookie(settings.cookieName) != "true") {
var img = document.createElement('img');
img.src = settings.getRadomImage();
//Load up the new image and show it once it's loaded.
img.onload = function () {
//Fade out the body and fade back
/*
$("body").fadeOut(function() {
$(this).css({ 'background-image': 'url(' + img.src + ')' }).fadeIn(4000);
});
*/
$("body").css({ 'background-image': 'url(' + img.src + ')' });
};
//Set the cookie for the client for tracking.
$.cookie(settings.cookieName, true);
}
});
//Action for clearing cookie.
$(".action-clear-cookie").click(function () {
$.cookie(settings.cookieName, null)
});
});
</script>
コードリファレンス
jQueryスクリプトを設定します。
$("a").click(function(evt) {
$('body').css("background-image", "url(/myimage.jpg)");
}
ページ間で変更する場合は、セッションCookieを使用します（「より単純な」関数を使用しました。（これ）を参照してください。[http://jquery-howto.blogspot.fr/2010/09/jquery-cookies-getsetdelete-plugin .html]たとえば）：
if (getCookie('isAlreadyVisited') == 1) {
$('body').css("background-image", "url(/myimage.jpg)");
}
setCookie('isAlreadyVisited', 1);
サーバー側でCookieを設定し、ボディにクラスを追加して背景を変更することでこれを処理することもできます（この方法では、Flash of Unstylesコンテンツは使用できません）。
body {
background-image: url(img1.jpg);
}
body.visited {
background-image: url(img2.jpg);
}