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. JavaScript碰到的几个方法

    =>isNaN() 函数用于检查其参数|是否|是|非数字值. 绕吧,我给它断个句,别一不小心看叉了 百度百科告诉我们,NaN,是Not a Number的缩写 所以, alert(isNaN(1 ...

  2. HDU 5920 Ugly Problem

    说起这道题, 真是一把辛酸泪. 题意 将一个正整数 \(n(\le 10^{1000})\) 分解成不超过50个回文数的和. 做法 构造. 队友UHC提出的一种构造方法, 写起来比较方便一些, 而且比 ...

  3. 第一章、欢迎进入C#编程世界

    1.GUI:图形用户界面. 2.在C#中,所有可执行代码都必须在方法中定义,而方法必须从属于类或结构. 3.程序集中可能包含多个命名空间的类,而一个命名空间可能跨越多个程序集. 4.解决方案文件使用. ...

  4. git实习笔记

    一.查找文件目录 二.添加上传文件 三.提交文件,描述信息 四.登录

  5. 正则表达式：Pattern类与Matcher类详解

    一.捕获组的概念 捕获组可以通过从左到右计算其开括号来编号,编号是从1 开始的.例如,在表达式((A)(B(C)))中,存在四个这样的组: 1     ((A)(B(C))) 2     (A) 3  ...

  6. Saltstack 介绍、安装、配置（一）

    Slatstack 介绍 官网:https://saltstack.com/ 官方源:http://repo.saltstack.com/  (介绍各操作系统安装方法) http://repo.sal ...

  7. JS-结合html综合练习js的对象——班级成绩表制作

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>对 ...

  8. JS获取select选中的值，所有option值

    <select name="myselect" id="myselect"> <option value="2042"&g ...

  9. Socket通信的理解

    1.Socket(套接字) 是支持TCP/IP通信的基本操作单元.包含通信的五种必须信息:通信使用的协议,本机IP和端口,远程IP和端口. 2. 1.TCP连接 手机能够使用联网功能是因为手机底层实现 ...

  10. Windows7、8无法访问其他计算机共享盘

    Windows7.8无法访问其他计算机共享盘 WIN7 访问共享的时候提示用户名和密码不正确,在XP系统上可以正常访问 一.win+r   gpedit.msc    进行组策略如图所示 二.wind ...