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. tyvj2018 小猫爬山

    之前做过一道题"破锣摇滚乐队",把猫都编了号,每辆车只能装一些编号递增的猫,而且前一辆车的猫编号都比后一辆车小.那道题的DP状态是:f[i][j]表示装了前i只猫,使用了j辆车时第 ...

  2. FUSE 简介

    编译别人改过的一个 OpenWRT ,发现用到了一个叫 FUSE 的包.感兴趣了解一下. FUSE 是 Filesystem in USErspace 的简称.对于文件系统,经常安装系统.格式化 U ...

  3. PHP扩展——C扩展实现滚动记录日志

    前言 万事开头难,没错就是这样!! 在没有真正开发PHP扩展之前,一直觉得PHP扩展开发对我来说是一个很遥远的事情,虽然自己有些C\C++基础,但是看PHP源码的时候还是很吃力,现在看来主要还是没有下 ...

  4. JSONArray的使用

    用的是fastjson.jar包 1. jsonarray,jsonobject 使用正确代码如下:(这种getJSONObject 函数形成jsonobj 的方式非常好,可以避免循环引用或jsono ...

  5. JVM性能优化入门指南

    兵器谱 jps 列出正在运行的虚拟机进程,用法如下: jps [-option] [hostid] 选项 作用 q 只输出LVMID,省略主类的名称 m 输出main method的参数 l 输出完全 ...

  6. iOS - 如何自动播放H5中的音频

    场景:iOS端设备,App页面跳转到H5产品介绍,背景音乐无法播放.(为什么不能自动播放,因该是iPhone人性化设定吧~) 加载H5用UIWebView空间: 代码: CGRect rect = s ...

  7. [转]图片中的字符分割提取(基于opencv)

    http://blog.csdn.net/anqing715/article/details/16883863 源图片 像这些图片的字符就比较好操作,每个字符都独立,不连在一起,所以轮廓检测最好了.所 ...

  8. SPL--spl_autoload_register

    spl_autoload_register() : 调用未定义类时,系统会按顺序调用注册到spl_autoload_register()函数的所有函数,而不是调用__autoload函数. 解决问题: ...

  9. 事务环境下的CombGuid

    一直使用osharp,osharp3使用的是combguid,代码如下 /// <summary> /// 返回Guid用于数据库操作,特定的时间代码可以提高检索效率 /// </s ...

  10. EF批量插入 扩展

    https://efbulkinsert.codeplex.com/ https://github.com/loresoft/EntityFramework.Extended