您的位置：首页 > Web前端 > JQuery

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

2015-09-18 09:34 567 查看

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>

　　

参考图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航