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

参考代码：

<!DOCTYPE html>

<html>

<head>

<title>Colin Marquee Welcome</title>

<meta name="description" content=" Colin Marquee Welcome" />

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

/*Colin最后更新于2015-09-15*/

$(document).ready(function(){

/*未加载成功时不显示*/

$("#int_text").hide();

$("#marquee_set").click(function(){

if($("#int_text").css("display")=="none"){

$("#int_text").show();

        }

        else{

$("#int_text").hide();

}

});

/*提交设置内容后判断并显示*/

$("#int_text").find("input").click(function(){

$("#int_text").hide();

int_text=$("#int_text").find("textarea").val();

        if(int_text==""){

        alert("显示内容不能为空！")

}

        else{

        $("div").find("marquee").text(int_text);

$("div").find("marquee").show();

}

});

/*显示隐藏按钮*/

$("#marquee_show").click(function(){$("div").find("marquee").show();});

$("#marquee_hide").click(function(){$("div").find("marquee").hide();});

});

</script>

<style type="text/css">

html,body{margin: 0;padding:0;}

.marquee_hint input{padding: 3px 8px;}

</style>

</head>

<body>

<div class="marquee_hint" style="position:absolute;width:100%;bottom:50px;">

<!--设定框-->

<div style="position:absolute;right: 0;bottom:138px;width:350px;background: #F7F7F7;margin:5px 0;padding: 10px;" 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 style="height: 100px;margin-bottom: 5px;">

<marquee bgcolor="red" scrollamount="20" style="color:#fff;line-height: 100px;font-size:70px;">欢迎参观xxxx公司，全体同事热忱欢迎你们。</marquee>

</div>

<div style="clear: both;"></div><!--清除浮动-->

<!--控制按钮-->

<div style="float:right;padding-right: 5px;">

<input type="button" value="显示" id="marquee_show" >

<input type="button" value="隐藏" id="marquee_hide" >

<input type="button" value="设置显示" id="marquee_set" >

</div>

</div>

</body>

</html>

　　

效果参考截图：

效果演示：（左上角区域单击控制显示隐藏，双击打开设置画面）

http://www.feikk.com/demo/welcome.html

Jquery实现滚动显示欢迎字幕效果的更多相关文章

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

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

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

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

  3. jquery 上下滚动显示隐藏

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

  4. jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...

  5. jquery渐渐的显示、隐藏效果

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  6. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  7. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  8. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  9. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

随机推荐

  1. 洛谷P1288 取数游戏II

    题目描述 有一个取数的游戏.初始时,给出一个环,环上的每条边上都有一个非负整数.这些整数中至少有一个0.然后,将一枚硬币放在环上的一个节点上.两个玩家就是以这个放硬币的节点为起点开始这个游戏,两人轮流 ...

  2. TCP/IP详解 笔记十一

    域名服务系统(DNS) DNS:名字到IP转换:电子邮件选路信息:分布式数据库 解析器:是通过gethostbyname(3)和gethostbyaddr(3)来实现的 最常用的名字服务器是BIND ...

  3. TypeScript 素描 - 泛型、枚举

    /* 泛型,好处多多的功能.不过这里最基本的就不打算说了,仅准备说一些 和C#不同的地方 */ /* 泛型接口 GenericIdentityFn 定义了方法的描述等 identity方法则是它的实现 ...

  4. 加州大学伯克利分校Stat2.3x Inference 统计推断学习笔记: FINAL

    Stat2.3x Inference(统计推断)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...

  5. LaTeX test

    \begin{equation} x^2+1=2 \end{equation} \begin{equation} x^2+y=3 \end{equation} $\dfrac{2\pi}{N}$

  6. 系统配置 之：远程桌面连接（win7系统）

    本文包括两部分: 1.配置远程桌面连接 2.解决[远程桌面连接不上] 一.远程桌面连接设置 [远程桌面连接配置] Win7系统下的远程桌面连接设置,如果是其他系统或 Win8 及其以上系统,也可作为参 ...

  7. chmod权限设置

    一.其语法格式为:chmod [who] [opt] [mode] 文件/目录名 1.其中who表示对象,是以下字母中的一个或组合: u:表示文件所有者 g:表示同组用户 o:表示其它用户 a:表示所 ...

  8. Linux爆新漏洞，长按回车键70秒即可获得root权限

    漏洞来源这个安全问题来源于Cryptsetup存在的一个漏洞(CVE-2016-4484).Cryptsetup是在Linux统一密钥设置(Linux Unified Key Setup, LUKS) ...

  9. matlab和C/C++混合编程--Mex

    最近的项目需要matlab和C的混合编程,经过一番努力终于完成了项目要解决的问题.现在就将Mex的一些经验总结一下,当然只是刚刚开始,以后随着学习的深入继续添加.首先讲讲写Mex的一些常规规定,然后我 ...

  10. IEquatable 的Equals 代替 object 的Equals

    struct Point2 : IEquatable<Point2> { public int X { get; set; } public int Y { get; set; } pub ...