【问题标题】:Need to call this function in javascript onload需要在javascript onload中调用这个函数
【发布时间】:2012-11-19 02:21:34
【问题描述】:

如何调用这个函数 onLoad 到一个 url?

function fadeLoop() {

    var counter = 0,
        divs = $('.fader').hide(),
        dur = 500;

    function showDiv() {
        divs.fadeOut(dur) // hide all divs
            .filter(function(index) {
                return index == counter % divs.length;
            }) // figure out correct div to show
            .delay(dur) // delay until fadeout is finished
            .fadeIn(dur); // and show it
        counter++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    return setInterval(function() {
        showDiv(); // show next div
    }, 5 * 1000); // do this every 5 seconds     };

$(function() {
    var interval;

    $("#start").click(function() {
        if (interval == undefined){
            interval = fadeLoop();
            $(this).val("Stop");
        }
        else{
            clearInterval(interval);
            $(this).val("Start");
            interval = undefined;
        }
    }); });​

此功能激活我的交互式工具提示;但是,我不知道如何调用它,而且我需要将它放在标题或页面中吗?脚本在页面上,链接在标题上...想法?

提前致谢。

克里斯

【问题讨论】:

    标签: javascript html css function call


    【解决方案1】:

    感谢大家的帮助。这是完整的工作代码,享受!

    </script>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    fadeLoop()
    function fadeLoop() {
    
        var counter = 0,
            divs = $('.fader').hide(),
            dur = 300;
    
        function showDiv() {
            $("div.fader").fadeOut(dur) // hide all divs
                .filter(function(index) {
                    return index == counter % divs.length;
                }) // figure out correct div to show
                .delay(dur) // delay until fadeout is finished
                .fadeIn(dur); // and show it
            counter++;
        }; // function to loop through divs and show correct div
        showDiv(); // show first div    
        return setInterval(function() {
            showDiv(); // show next div
        }, 7 * 1000); // do this every 5 seconds    
    };
    
    $(function() {
        var interval;
    
        $("#start").click(function() {
            if (interval == undefined){
                interval = fadeLoop();
                $(this).val("Stop");
            }
            else{
                clearInterval(interval);
                $(this).val("Start");
                interval = undefined;
            }
        });
    });
    });
    </script>
    <!--#include file="header.asp"-->
    <% if Request("interactive") = "on" then %>
    <form name="tutorial">
    
    <div class="fader"><div class="arrow-w arrowlocation1" style="font-size:1em;" ></div><div id="tutorial1" class="tutorial createquestion1">Start by creating a title and selecting a folder for your question to be stored in.</div></div>
    
    <div class="fader"><div class="arrow-w arrowlocation2" style="font-size:1em;" ></div>
    <div id="tutorial2" class="tutorial createquestion2">Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.</div></div>
    
    <div class="fader"><div class="arrow-w arrowlocation3" style="font-size:1em;" ></div>
    <div id="tutorial3" class="tutorial createquestion3">Select your options and/or upload an attachment (file, video or audio).</div></div>
    
    <div class="fader"><div class="quicktiptitle quicktiplocation4">QUICK TIP</div><div class="arrow-n arrowlocation4" style="font-size:1em;" ></div>
    <div id="tutorial4" class="quicktip createquestion4">To create questions easier update your question preferences in your account area options.</div></div>
    
    <div class="fader"><div class="arrow-w arrowlocation5" style="font-size:1em;" ></div>
    <div id="tutorial5" class="tutorial createquestion5">Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.</div></div>
    
    <div class="fader"><div class="arrow-e arrowlocation6" style="font-size:1em;" ></div>
    <div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.</div></div>
    
    <div class="fader"><div class="arrow-w arrowlocation7" style="font-size:1em;" ></div>
    <div class="quicktiptitle quicktiplocation7">QUICK TIP</div>
    <div id="tutorial7" class="quicktip createquestion7"> Click on this icon to open and close sections that you don't use. These will remain closed whenever you visit this page until you open them again.</div></div></form>
    
    
    <% end if %>
    

    【讨论】:

      【解决方案2】:

      jQuery.

      function fadeLoop() {
          ....
      });​
      
      $(window).on('load', fadeLoop);
      

      【讨论】:

      • 是的,但是第一个答案更容易接受,只是尝试找出那里出了什么问题,可能是一些语法问题
      【解决方案3】:

      这样调用函数:

      $(document).ready(function(){
      fadeLoop()
      });
      
      
      Edit
      

      看起来该功能被点击事件激活了?为什么不把上面的改成:

      $(document).ready(function(){
             $('#start').trigger('click');
          });
      

      【讨论】:

      • 对不起,我不明白。你能解释一下吗?
      • 该函数在页面完全加载时触发。
      • 好的,开始起作用了;但是,现在所有页面内容以及我想要出现的 div 都消失了。如何更改功能以仅隐藏工具提示内容?
      • 你用这个 divs.fadeOut(dur) 隐藏所有 div 将它更改为你想要隐藏的工具提示。
      • 所以如果我只想用 class="fader" 隐藏 div,我该怎么写呢?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-04-18
      • 1970-01-01
      • 2012-04-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多