Jquery控制滚动显示欢迎字幕v2

Jquery控制滚动显示欢迎字幕v2:

之前做的那个比较适合测试环境，但要套入到网站中，有两个按钮在那摆着，还是不太好看。后面对代码进行了修改，如下：

参考代码：

<html>
<head>
<title>Colin-Welcome</title>
<meta name="description" content="Colin-Welcome" />
<meta charset="utf-8" />
<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
html, body {margin: 0;padding: 0;height: 100%;overflow-y: hidden;overflow-x: auto;}
#mainFrame { min-width:1000px; }
.marquee_hint input{padding: 3px 8px;}
#welcome{position:absolute;bottom:30px;width: 100%;height: 100px;}
#welcome_text{opacity: 0.7;color:#fff;line-height: 100px;font-size:70px;}
#int_text{position:absolute;width:350px;left:100px;top:0px;background: #F3F7FA;opacity:0.9;padding:3px;}
#hotclick {width: 100px;height: 100px;position: absolute;left: 0;right:0;border: 1px solid #ccc;display: block;cursor:pointer;}
</style>

<script type="text/javascript">
/*Colin最后更新于2015-09-18*/
$(document).ready(function(){
    /*未加载成功时不显示*/
    $("#int_text").hide();
    $("#welcome").hide();

    $("#hotclick").click(function () {
        if($("#welcome").css("display")=="none"){$("#welcome").show();}
        else{$("#welcome").hide();}
    });

    $("#hotclick").dblclick(function () {
        //双击事件的执行代码
          if($("#int_text").css("display")=="none"){$("#int_text").show();}
          else{$("#int_text").hide();}
    });
    /*提交设置内容后判断并显示*/    
    $("#int_text").find("input").click(function(){
        int_text=$("#int_text").find("textarea").val();
        if(int_text==""){
        alert("显示内容不能为空！")
        }
        else{
        $("#int_text").hide();
        $("div").find("marquee").text(int_text);
        $("#welcome").show();
        }
    });
});
</script>
</head>
<body>

<!--控制区-->
<div id="hotclick" ></div>

<!--设定框-->
<div id="int_text">
<p>输入你要显示的文字内容，然后点击确定！</p>
<textarea style="width:98%;height:100px;font-size:16px;margin-bottom: 5px;"></textarea>
<input type="button" value="提交并显示" style="float: right;">
</div>

<!--滚动字幕-->
<div id="welcome">
<marquee bgcolor="red"  scrollamount="20" id="welcome_text">欢迎参观XXXXX公司</marquee>
</div>

<iframe src="http://www.baidu.com" height="100%" width="100%" id="mainFrame" frameborder="no">
</iframe>
</body>
</html>

　　

 

参考图：

posted @ 2015-09-18 09:34  Colin.liu  阅读(454)  评论(0)  编辑  收藏  举报