jq跑马灯效果
这几天公司产品有个无缝循环滚动的广告跑马灯要做，最开始想到的是<marquee>标签，但在PC端正常，在安卓广告屏上却怎么都跑不动，后来用的css3的animation，结果也是PC端及其他一些手机正常，但一到安卓广告屏上就跑不动了；后来领导找了个jQuery插件，经测试，完美运行。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动文字jquery插件</title>
/**
* author ormin
* http://www.cnblogs.com/kangaoxiaoshi/p/5431870.html
* http://www.cnblogs.com/yexiaochai/p/3759959.html
* http://www.cnblogs.com/axl234/p/5780432.html
*/
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.extend({
roll: function(options) {
var defaults = {
speed:1
};
var options = $.extend(defaults, options);
var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);
if ($(this) == null) return ;
var $container = $(this);
var $content = $("#content");
var init_left = $container.width();
$content.css({left:parseInt(init_left) + "px"});
var This = this;
var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装，这里调试了n久 $container.bind("mouseover",function()
{
clearInterval(time);
});
$container.bind("mouseout",function()
{
time = setInterval(function(){This.move($container,$content,speed);},20);
}); return this;
},
move:function($container,$content,speed){
var container_width = $container.width();
var content_width = $content.width();
if (parseInt($content.css("left")) + content_width > 0)
{
$content.css({left:parseInt($content.css("left")) - speed + "px"});
}
else
{
$content.css({left:parseInt(container_width) + "px"});
}
}
});
})(jQuery);
//插件的调用$("#yourId").roll({speed:#yourSpeed});
$(document).ready(
function(){
$("#container").roll({speed:8});
}
);
</script>
<style type="text/css">
#container{
background:#CCCCCC;
position:relative;
overflow:hidden; /*这个东西折腾了很久才弄出来*/
width:550px;
height:80px;
line-height:80px;
margin:100px;
} #content{
position:absolute;
left:0;
top:0;
white-space:nowrap; /*重要，不然文字显示效果不好*/
}
</style> </head> <body>
<div id="container">
<div id="content" style="color:red;font-size:80px;">This is a roll word test,created by Baidu FE.</div>
</div>
</body>
</html>
jQuery部分（使用时先引用jQuery插件）
(function($) {
$.fn.extend({
roll: function(options) {
var defaults = {
speed:1
};
var options = $.extend(defaults, options);
var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);
if ($(this) == null) return ;
var $container = $(this);
var $content = $("#content");
var init_left = $container.width();
$content.css({left:parseInt(init_left) + "px"});
var This = this;
var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装，这里调试了n久
$container.bind("mouseover",function()
{
clearInterval(time);
});
$container.bind("mouseout",function()
{
time = setInterval(function(){This.move($container,$content,speed);},20);
});
return this;
},
move:function($container,$content,speed){
var container_width = $container.width();
var content_width = $content.width();
if (parseInt($content.css("left")) + content_width > 0)
{
$content.css({left:parseInt($content.css("left")) - speed + "px"});
}
else
{
$content.css({left:parseInt(container_width) + "px"});
}
}
});
})(jQuery);
jq跑马灯效果的更多相关文章
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
- Android 实现多行文本跑马灯效果
Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...
- android:ellipsize实现跑马灯效果总结（转）
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
- flex 简单跑马灯效果（竖着显示）
<mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...
- Dom操作--跑马灯效果
这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...
- [Android1.5]TextView跑马灯效果
from: http://www.cnblogs.com/over140/archive/2010/08/20/1804770.html 前言 这个效果在两周前搜索过,网上倒是有转载,可恨的是转载之后 ...
- Android学习总结——TextView跑马灯效果
Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...
随机推荐
- Python中的多进程与多线程（一）
一.背景 最近在Azkaban的测试工作中,需要在测试环境下模拟线上的调度场景进行稳定性测试.故而重操python旧业,通过python编写脚本来构造类似线上的调度场景.在脚本编写过程中,碰到这样一个 ...
- .Net多线程编程—System.Threading.Tasks.Parallel
System.Threading.Tasks.Parallel类提供了Parallel.Invoke,Parallel.For,Parallel.ForEach这三个静态方法. 1 Parallel. ...
- android 使用Tabhost 发生could not create tab content because could not find view with id 错误
使用Tabhost的时候经常报:could not create tab content because could not find view with id 错误. 总结一下发生错误的原因,一般的 ...
- JavaScript正则表达式，你真的知道？
一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...
- 9、 Struts2验证(声明式验证、自定义验证器)
1. 什么是Struts2 验证器 一个健壮的 web 应用程序必须确保用户输入是合法.有效的. Struts2 的输入验证 基于 XWork Validation Framework 的声明式验证: ...
- input标签中button在iPhone中圆角的问题
1.问题 使用H5编写微信页面时,使用<input type="button"/>时,在Android手机中显示正常,但是在iPhone手机中则显示不正常,显示为圆角样 ...
- Oracle 数据库语句大全
Oracle数据库语句大全 ORACLE支持五种类型的完整性约束 NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值. CH ...
- C#通过NPOI操作Excel
参考页面: http://www.yuanjiaocheng.net/webapi/create-crud-api-1-post.html http://www.yuanjiaocheng.net/w ...
- 免费公开课，讲解强大的文档集成组件Aspose，现在可报名
课程①:Aspose.Total公开课内容:讲解全能型文档管理工具Aspose.Total主要功能及应用领域时间:2016-11-24 14:30 (暂定)报名地址:http://training.e ...
- Linux设备管理（一）_kobject, kset,ktype分析
Linux内核大量使用面向对象的设计思想,通过追踪源码,我们甚至可以使用面向对象语言常用的UML类图来分析Linux设备管理的"类"之间的关系.这里以4.8.5内核为例从kobje ...