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

之前做的那个比较适合测试环境，但要套入到网站中，有两个按钮在那摆着，还是不太好看。后面对代码进行了修改，如下：

参考代码：

<html>

<head>

<title>Colin-Welcome</title>

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

<meta charset="utf-8" />

<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">

html, body {margin: 0;padding: 0;height: 100%;overflow-y: hidden;overflow-x: auto;}

#mainFrame { min-width:1000px; }

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

#welcome{position:absolute;bottom:30px;width: 100%;height: 100px;}

#welcome_text{opacity: 0.7;color:#fff;line-height: 100px;font-size:70px;}

#int_text{position:absolute;width:350px;left:100px;top:0px;background: #F3F7FA;opacity:0.9;padding:3px;}

#hotclick {width: 100px;height: 100px;position: absolute;left: 0;right:0;border: 1px solid #ccc;display: block;cursor:pointer;}

</style>

<script type="text/javascript">

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

$(document).ready(function(){

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

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

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

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

        if($("#welcome").css("display")=="none"){$("#welcome").show();}

        else{$("#welcome").hide();}

    });

    $("#hotclick").dblclick(function () {

        //双击事件的执行代码

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

          else{$("#int_text").hide();}

    });

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

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

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

        if(int_text==""){

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

        }

        else{

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

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

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

        }

    });

});

</script>

</head>

<body>

<!--控制区-->

<div id="hotclick" ></div>

<!--设定框-->

<div 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 id="welcome">

<marquee bgcolor="red"  scrollamount="20" id="welcome_text">欢迎参观XXXXX公司</marquee>

</div>

<iframe src="http://www.baidu.com" height="100%" width="100%" id="mainFrame" frameborder="no">

</iframe>

</body>

</html>

　　

参考图：

Jquery控制滚动显示欢迎字幕v2的更多相关文章

  1. Jquery实现滚动显示欢迎字幕效果

    Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...

  2. jquery 上下滚动显示隐藏

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

  3. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

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

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

  5. JQuery 控制元素显示隐藏

    JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...

  6. jQuery控制TR显示隐藏

    参考链接:http://www.jb51.net/article/51221.htm 通过jQuery的hide和show方法即可.

  7. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  9. jquery控制左右箭头滚动图片列表

    jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

随机推荐

  1. PHP守护进程

    php也是可以直接进行守护进程的启动与终止的,相对于shell来说会简单很多,理解更方便,当然了php的守护进程要实现自动重启还是要依赖于shell的crontab日程表,每隔一段时间去执行一次脚本看 ...

  2. 配置ASP.NET Web应用程序, 使之运行在medium trust

    这文章会向你展示, 怎么配置ASP.NET Web应用程序, 使之运行在medium trust.   如果你的服务器有多个应用程序, 你可以使用code access security和medium ...

  3. 解决centos7中python-pip模块不存在的问题

    centos 7中python-pip模块不存在,是因为像centos这类衍生的发行版,源跟新滞后,或者不存在.即使使用yum去search python-pip也找不到软件包. 为了使用安装滞后或源 ...

  4. 机器学习笔记----- ID3算法的python实战

    本文申明:本文原创,如有转载请申明.数据代码来自实验数据都是来自[美]Peter Harrington 写的<Machine Learning in Action>这本书,侵删. Hell ...

  5. mysql user administration

    1. 为数据库databasename创建web用户 1.1 创建数据库 mysql> create database databasename; 1.2 为数据库创建用户 mysql> ...

  6. redis理解

    1. Redis是什么 redis是nosql的一种. 这个问题的结果影响了我们怎么用Redis.如果你认为Redis是一个key value store, 那可能会用它来代替MySQL:如果认为它是 ...

  7. Objective-C学习笔记之NSData、NSDate

    NSData和NSMutableData存储的是二进制数据,在文件操作,网络,以及核心图形图像中使用较广泛.NSData创建后不可以再修改,NSMutableData可以再次修 NSString *s ...

  8. spark操作elasticsearch数据的限制

    对于复杂的数据类型,比如IP和GeoPoint,只是在elasticsearch中有效,用spark读取时会转换成常用的String类型. Geo types. It is worth mention ...

  9. JavaScript学习笔记——对象基础

    javascript对象基础 一.名词解释: 1.基于对象 一切皆对象,以对象的概念来编程. 2.面向对象编程(oop Object oriented programming) A.对象 就是人们要研 ...

  10. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【八】——Web Api的安全性

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 这一篇文章我们主要来探讨一下Web Api的安全性,到目前为止所有的请求都是走的Http协议 ...