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>

  

参考图:

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

上一篇:WinForm开发,窗体显示和窗体传值相关知识总结


下一篇:C# 使用winForm的TreeView显示中国城镇四级联动