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的更多相关文章

  1. Jquery实现滚动显示欢迎字幕效果

    Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...

  2. jquery 上下滚动显示隐藏

      function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...

  3. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

  4. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. JQuery 控制元素显示隐藏

    JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...

  6. jQuery控制TR显示隐藏

    参考链接:http://www.jb51.net/article/51221.htm 通过jQuery的hide和show方法即可.

  7. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  9. jquery控制左右箭头滚动图片列表

    jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

随机推荐

  1. xudyh的gcd模板

    hdu 5019 #include <cstdlib> #include <cctype> #include <cstring> #include <cstd ...

  2. bzoj2765[JLOI2010]铁人双项比赛

    题意:铁人双项比赛由长跑和骑自行车组成,参赛选手必须先完成k公里的长跑,然后完成r公里的骑车,才能到达终点.参赛选手有的擅长长跑,有的擅长骑车. 如果总赛程s=k+r一定,那么K越大,对擅长长跑的选手 ...

  3. 单向关系中的JoinColumn

    1.person与address的一对一单向关系: 在address中没有特殊的注解. 在Person中对应到数据库里面就有一个指向Address的外键. 我们也可以增加注释指定外键的列的名字,如下: ...

  4. .net图片验证码生成、点击刷新及验证输入是否正确

    ①创建ValidateCode.aspx,在ValidateCode.aspx.cs中加入如下代码.生成验证码图片,在页面上输出,输出jpeg格式. protected void Page_Load( ...

  5. CentOs安装Scrapy出现error: Setup script exited with error: command ‘gcc’ failed with exit status 1错误解决方案

    按照 http://www.1207.me/archives/209.html 的教程安装Scrapy出现了上述错误,但是本身机器已经有了gcc,所以应该是安装包的问题 百度又看到了同博客里的解决方案 ...

  6. Mysql备份还原数据库之mysqldump实例及参数详细说明

    [root@localhost myexport]# mysqldump -h211.100.75.204 -uroot -p@^#coopen -P5029 --single-transaction ...

  7. NOIp 0904 出题报告

    T1 huajitree 纯模拟,把S拆成二进制查一下有多少个1,然后把这个数和N*M求一下gcd,除一下输出就好了.说求期望值可能对新高一不太友好…. //huajitree //2016.8.22 ...

  8. MooseFs-分布式文件系统系列（四）之简单聊聊MFS的日常维护

    回顾 文件或目录的额外属性(noower,noattracache和noentrycache),可以通过MFS提供的命令(mfsgeteattr,mfsseteattr,mfsdeleattr等)检查 ...

  9. JavaScriptCore框架介绍

    http://www.cocoachina.com/ios/20140409/8127.html 这个框架其实只是基于webkit中以C/C++实现的JavaScriptCore的一个包装,在旧版本i ...

  10. Unicode 与 UTF 字符标准

    Unicode 国际字符标准(UCS)是一个字符编码系统,它被设计用来支持世界各国不同语言书面文体之间的数据交换.处理以及显示.        Unicode用两个字节表示一个字符.前127个字符与A ...