Jquery控制滚动显示欢迎字幕v2
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的更多相关文章
- Jquery实现滚动显示欢迎字幕效果
Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...
- jquery 上下滚动显示隐藏
function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...
- jQuery控制元素显示、隐藏、切换、滑动的方法
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
- jquery页面滚动显示浮动菜单栏锚点定位效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JQuery 控制元素显示隐藏
JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...
- jQuery控制TR显示隐藏
参考链接:http://www.jb51.net/article/51221.htm 通过jQuery的hide和show方法即可.
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery控制css的display(控制元素的显示与隐藏)
使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...
- jquery控制左右箭头滚动图片列表
jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
随机推荐
- 数组、ArraryList和List三者的区别
在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. ...
- maven 的 scope的含义
依赖范围控制哪些依赖在哪些classpath 中可用,哪些依赖包含在一个应用中.让我们详细看一下每一种范围: compile (编译范围) compile是默认的范围:如果没有提供一个范围,那该依赖的 ...
- Entity Framework使用Sqlite时的一些配置
前段时间试着用Entity Framework for Sqlite环境,发现了一些坑坑洼洼,记录一下. 同时试了一下配置多种数据库,包括Sqlite.Sql Server.Sql Server Lo ...
- C#实现 Eval
主要是使用 CSharpCodeProvider,动态调用来进行返回. 首先会拼接成一个类的一个方法,然后返回这个方法的值.不过,因为还是使用反射,所以效率不高. public static clas ...
- A.Kaw矩阵代数初步学习笔记 4. Unary Matrix Operations
“矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...
- selenium 基本的键盘方法
今晚不想加班,于是赶紧回来看看书: 1.下了selenium的小工具:FireBug/FirePath. 2.确定了看书顺序,我觉得难度低点开始比较好,所以我还是先看基于Python的selenium ...
- Linux命令:简单函数调用
脚本编程之函数: function: 功能 结构化编程,不能独立运行,需要调用时执行,可以被多次调用 1.定义一个函数:function FUNCNAME { command} FUNC ...
- 2015年10月份经常使用的linux命令。
ps -ef |grep 服务名 详细的介绍可以参考此篇博客http://www.cnblogs.com/wangkangluo1/archive/2011/09/23/218593 ...
- STM8L --- External interrupt
note 1: Several interrupts can be pending at the same time. When an interrupt request is not servic ...
- Fix failed to start session in Ubuntu
When you are at login, press Ctrl+Alt+F1. It will take you to command line interface from the GUI. I ...