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. Android成长日记-ContextMenu实现上下文菜单

    一. ContextMenu的组成 标题以及标题图标 菜单内容 菜单内容的点击事件 二. ContextMenu与OptionMenu的区别 OptionMenu对应的是activity,一个acti ...

  2. Non Lasting Storage File System、procfs、sysfs

    catalog . 引言 . proc文件系统 . 简单的文件系统 . sysfs 0. 引言 传统上,文件系统用于在块设备上持久存储数据,但也可以使用文件系统来组织.提供.交换并不存储在块设备上的信 ...

  3. 【翻译自nikic大神】PHP中原生类型的方法

    引言 第一次,翻译别人的文章,用四级英语的水平来翻译~~囧,可能有很多不太恰当的地方,尽管拍砖(有些地方实在想不到恰当的翻译,我同时贴出了原文和自己很low的翻译). 翻译这篇文章用了我3个晚上一个中 ...

  4. MVC5-10 ModleBinder那点事

    模型绑定器 之前或多或少也提到过模型绑定器,方法的形参就是由模型绑定器把参数绑定上去的,今天就说说ModuleBingder那点事 在MVC中有一个接口叫IModuleBinder // // 摘要: ...

  5. soapUI使用-DataSource获取oracle库中的参数

    soapUI使用-DataSource获取oracle库中的参数 下载mysql和oracle驱动包:http://pan.baidu.com/s/1i3sy1MH 放在Program Files\S ...

  6. Ajax 简述

    说到Ajax大家一定不陌生,但是真要具体说说它是什么?估计给出完整定义的人应该不多. W3C上给Ajax的具体定义为: AJAX = Asynchronous JavaScript and XML(异 ...

  7. BZOJ1004: [HNOI2008]Cards

    三维01背包算出在每一个置换下不变的染色方案数,Burnside引理计算答案. PS:数据太水所以只算恒等置换也是可以过的. #include<bits/stdc++.h> using n ...

  8. 【原】react中如何使用jquery插件

    react的思想是虚拟dom,提倡最好较少dom的操作,可是我们在写网页的时候,有些复杂的交互还是离不开jquery插件的.而且当你把jquery直接拿来用的时候,你会发觉会报错,要么是找不到那个插件 ...

  9. nginx访问日志获取访问前10的url

    在ELK里面获取top10的url在日志量非常大的情况下是非常消耗内存的,所以写了一个脚本用来快速获取. 配置文件 log.conf [log] log_file = /data/logs/nginx ...

  10. PHP责任链设计模式

    <?php //责任链设计模式 /** * 每个对象,储存着对自己上级的引用, * 如果自己处理不了,交给上一级. */ class board{ protected $power=1; pro ...