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. hdu 1757 矩阵

    用矩阵表示状态,矩阵乘法的就是状态之间的变换 作一个vector: 要求的就是一个矩阵A,使得上面那个vector乘以A之后变成 解得A= [不知道用逆矩阵能不能直接求出A Ref:http://bl ...

  2. hdu5187 奇怪题

    本来很水的,答案就是(2^n)-2,但是写坑了QAQ 因为原题要求答案要mod P,一开始我是这么干的: LL ans=pow_mod(,N,P); ans=(ans-)%P; ) ans=%P; p ...

  3. Android——组件简介

    开发android应用程序,需要理解View.Activity.Fragment.Intent .ContentProvider.Service.AndroidManifest.xml文件和AVD. ...

  4. List<List<String>>

    package list; import java.util.ArrayList; import java.util.List; public class MyList { public static ...

  5. MVC5-3 Result分析

    众多的Result 使用MVC进行开发,可以看到有ActionResult.ContentReuslt.JsonResult..等,今天对这些Result进行背后分析.它到底是如何做到的 Action ...

  6. CentOS加载U盘

    概述: 把CentOS设置成了启动进入命令行,结果不知道在哪儿找U盘了,于是搜集了一些命令. 1. 查看分区信息,以确定那个是U盘 使用root执行fdisk -l,确定U盘是sdb1 2. 挂载U盘 ...

  7. CentOS下vsftp安装、配置、卸载(转载)

    看过多个教程,只有这个能完整成功配置: http://www.centoscn.com/image-text/config/2015/0122/4543.html

  8. JDBC编程的方式

    JDBC编程的方式,我们以一个简单的查询为例,使用JDBC编程,如下: 从上面可以看出JDBC编程一般要如下步骤: 1. 加载数据库驱动 2. 创建并获取数据库连接 3. 创建jdbc stateme ...

  9. css属性设置

    css在线编辑工具地址:http://tool.chinaz.com/Tools/CssDesigner.aspx 案例详情: http://dongtianee.sinaapp.com/index. ...

  10. BZOJ2208: [Jsoi2010]连通数

    tarjan缩点后拓扑排序,每一个点用一个bitset记录哪些点能到达它. PS:数据太水,暴力能过. #include<bits/stdc++.h> using namespace st ...