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. WINDBUG常用命令

    配置: File->Symbol path-> SRV*C:\symbols*http://msdl.microsoft.com/download/symbols 载入sos.dll  执 ...

  2. DOM参考手册及事件参考手册

    给全局HTML DOM元素增加函数的方法 HTMLElement.prototype.hasClass = function (className) { return new RegExp(" ...

  3. BZOJ2186: [Sdoi2008]沙拉公主的困惑

    传送门 常规数论题,利用欧拉函数的相关性质. 题求$[1,N!]$中与$M!$互质的数的个数,且$M \leq N$.然后根据欧拉函数的相关性质很容易得出这道题的答案为$\frac{\phi (M!) ...

  4. Altium Designer 15 --- PCB 3D View

    press 3 key to swith to 3D view, and press shift key and dont' loose your grip, hold the right mouse ...

  5. BZOJ4446: [Scoi2015]小凸玩密室

    用ui,j表示走完i的子树后走到i的深度为j的祖先的兄弟的最小代价: 用vi,j表示走完i的子树后走到i的深度为j的祖先的最小代价,用u算出v. 枚举起点,计算答案. #include<bits ...

  6. JQuery------$.getJSON()方法的使用

    html(../Home/Index.cshtml) <body> <button class="Btn">按钮</button> </b ...

  7. Java数据结构——双向链表

    //================================================= // File Name : DoublyLinked_demo //------------- ...

  8. MySQL学习笔记——存储过程

  9. System类

    System类是一些与系统相关属性和方法的集合,而且System类中所有的属性都是静态的,要想引用这些属性和方法,直接使用System类调用即可. //======================== ...

  10. delphi---控件使用

    1.TBitBtn控件 属性:Glyph,指定要显示的位图:    Layout ,设置位图在按钮的位置:Kind,要想用自设位图,这个属性要设置bkCustom; 2.TTreeView TTree ...