javascript - 使用 CSS 或 JavaScript 更改背景图像一次

Question

一位朋友要求我设置一个网页，其背景仅在单击任何链接时更改一次。我尝试了这个网站上给出的一些例子，并在谷歌上查看了一些例子，但它们几乎都是画廊式的周期性变化。也许我只是很沮丧，没有看到森林的树木......

页面是@mysite/julie 图片是@mysite/julie/images/blogbka.png 和/images/blogbk.png

我使用了下面的解决方案（https://stackoverflow.com/a/11362465/1506620）

谢谢大家的帮助。

Answer 1

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;}
}
};

Answer 2

我希望这是你想要的，即只改变一次图像。如果没有，请告诉我。

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，因此不允许再进行背景更改。

Answer 3

一种方法是使用包装另一个函数的函数，仅在第一次调用时执行内部函数。这是一个相当通用的版本：

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()并且知道它只会被调用一次。对于此类问题，这可能是一个相当优雅的解决方案。

Answer 4

我已经完成了使用 jQuery 单击每个链接时随机更改页面背景的垃圾箱。因此，请按照以下步骤操作：

1) 在标题中包含最新的 Jquery java 脚本文件。

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");
}

查询：

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

Answer 5

正如我所看到的，您需要为用户的浏览器提供一个 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>

代码参考

• https://github.com/carhartl/jquery-cookie

Answer 6

设置一个 jQuery 脚本：

$("a").click(function(evt) {
  $('body').css("background-image", "url(/myimage.jpg)");
}

如果您希望它在页面之间更改，请使用会话 cookie（我使用“更简单”的功能，请参阅（this）[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 并为您的主体添加一个类来处理此问题，这会改变背景（您不会以这种方式获得 Unstyles 内容的 Flash）。

body {
   background-image: url(img1.jpg);
}

body.visited {
   background-image: url(img2.jpg);
}