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. Sender

    多个对象用同一个方法的时候,想对多个对象分别操作的话就用Sender.  BackGroundWorker worker1 = sender as BackGroundWork.  分别去取当前的对象 ...

  2. 360doc的文章不能复制的解决办法

    按F12打开控制台,执行: document.body.oncopy=null;

  3. Newton-Raphson算法简介及其R实现

    本文简要介绍了Newton-Raphson方法及其R语言实现并给出几道练习题供参考使用. 下载PDF格式文档(Academia.edu) Newton-Raphson Method Let $f(x) ...

  4. 常见linux命令释义（第六天）——shell环境变量

    太懒了,这几天好像得了懒癌,一点都不想写博客.后来想想,知识嘛,还是分享出来的好.第一治自己的懒癌:第二顺便巩固下自己的知识. Linux的变量分为两种,一种是系统变量,是系统一经启动,就写进内存中的 ...

  5. Jsonp类

    public class JsonpResult : JsonResult { public JsonpResult() { this.Callback = "callback"; ...

  6. WinForm------弹出MessageBox窗口的同时隐藏当前窗口

    private void Btn_OK_Click(object sender, EventArgs e) { this.Hide(); //隐藏当前窗口 MessageBox.Show(" ...

  7. 最好的vim教程莫过于vimtutor

    最好的vim教程莫过于vimtutor 直接运行vimtutor即可

  8. centos 查看是32位还是64位

    查看linux机器是32位还是64位的方法: file /sbin/init 或者 file /bin/ls/sbin/init: ELF 64-bit LSB executable, x86-64, ...

  9. oracle表字段为汉字，依据拼音排序

    在order by后面使用NLSSORT函数转化汉字列,如下 select * from student order by NLSSORT(name,'NLS_SORT=SCHINESE_PINYIN ...

  10. 在 docker中 运行 mono /jexus server 并部署asp.net mvc站点

    http://linuxdot.net/bbsfile-3988 1.  安装 docker:      // docker 1.7 新版 安装非常容易,理论上说,在主流的任意linux发行版上都可以 ...