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. [NOIP2014] 提高组 洛谷P1941 飞扬的小鸟

    题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便 ...

  2. glibc resolv/res_send.c getaddrinfo() buffer stack smash when dealing malformation big DNS Response Package

    catalogue . 漏洞简述 . 调试环境搭建 . 漏洞利用 . 漏洞分析 . 缓解修复方案 1. 漏洞简述 0x1: 函数调用顺序 getaddrinfo (getaddrinfo.c) -&g ...

  3. dedecms /member/myfriend_group.php SQL Injection Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Dedecms会员中心注入漏洞 Relevant Link http:/ ...

  4. Unity 联网小测试（WWW）

    研究了很多联网的方式,甚至把TCP/IP,shock,HTTP的关系都搞清楚了,终于弄明白怎么在Unity中用GET或POST的方式通信了,还是有点小激动的,但是不排除有更好的方式,听说Unity还是 ...

  5. django redis操作

    from utils.redis.connect import redis_cache as rr.flushdb() 列表操作 r.lpush("name", xxxx) or ...

  6. 【Phylab2.0】Alpha版本发布说明

    新版本特性 更多的实验 Part Phylab2.0[Alpha] Phylab1.0 1011 1010113 缺失 1011 1010212 缺失 1021 1020113 1021 102021 ...

  7. 【Beta】第三次任务发布

    后端(补做) #86 了解社区新建文章.添加评论(回复)的机制.整理成API文档,包括如何请求新建文章.新建评论(回复).如何获取文章内容和评论内容. 验收条件:文档PM要能看懂. 前端(补做) #8 ...

  8. linux 学习基础7之脚本的练习

    练习:传递一个用户名参数给脚本,判断此用户的用户名跟其基本组的组名是否一致,并将结果显示出来.写一个脚本:#!/bin/bashUSER=$1if [ !  $# -eq 1 ];then  echo ...

  9. json的解释

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易 ...

  10. HBase Shell 常用命令及例子

    下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如下: 名称 命令表达式 创建表 create '表名称', '列名称1','列名称2','列名称N ...