jQuery + css 公告从左往右滚动
$(function() {
// 公告滚动
$(".notice-content").textScroll();
});
/**
* 从右往左滚动文字
* @returns {undefined}
*/
$.fn.textScroll = function() {
// 滚动步长(步长越大速度越快)
var step_len = 60;
var this_obj = $(this);
var child = this_obj.children();
var this_width = this_obj.width();
var child_width = child.width();
var continue_speed = undefined;// 暂停后恢复动画速度
// 初始文字位置
child.css({
left: this_width
});
// 初始动画速度speed
var init_speed = (child_width + this_width) / step_len * 1000;
// 滚动动画
function scroll_run(continue_speed) {
var speed = (continue_speed == undefined ? init_speed : continue_speed);
child.animate({
left: -child_width
}, speed, "linear", function() {
$(this).css({
left: this_width
});
scroll_run();
});
}
// 鼠标动作
child.on({
mouseenter: function() {
var current_left = $(this).position().left;
$(this).stop();
continue_speed = (-(-child_width - current_left) / step_len) * 1000;
},
mouseleave: function() {
scroll_run(continue_speed);
continue_speed = undefined;
}
});
// 启动滚动
scroll_run();
};
<div class="notice-title">公告:</div>
<div class="notice-content">
<div class="notice-text"><span>公告内容</span></div>
</div>
.notice-title {
color: #fff;
}
.notice-content {
position: relative;
width: 800px;
height: 30px;
white-space: nowrap;
overflow: hidden;
float: left;
margin-left: 55px;
margin-top: -30px;
/*背景透明度
background-color: #fff;
filter:alpha(opacity=10);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
*/
}
.notice-text {
color: red;
font-size: 14px;
position: absolute;
}
jQuery + css 公告从左往右滚动的更多相关文章
- 文字自动自左向右滚动的js代码
重要的一点,就是scrollLeft一直在变化.对象一直在移动,参照物没有动. 代码: css: #div1{display:black;width:110px;height:50px;line-he ...
- 【Android】Android开发可以手动进行控制的跑马灯效果,包括从左到右,以及从右到左,
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
- jQuery实现公告文字左右滚动
jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- jquery垂直公告滚动实现代码
公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- css3动画 一行字鼠标触发 hover 从左到右颜色渐变
偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画 这个好像不能放视频 我就简单的描述一 ...
- sencha touch TabPanel 加入导航按钮(向左向右按钮) 以及Carousel插件(2014-11-7)
Carousel插件代码: /* * TabPanel的Carousel功能插件 * 取至 * https://github.com/VinylFox/Ext.ux.touch.SwipeTabs * ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- jQuery带控制按钮向上和向下滚动文本列表
效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...
随机推荐
- (转)最小二乘法拟合圆公式推导及vc实现[r]
(下文内容为转载,不过已经不清楚原创的是哪里了,特此说明) 转自: http://www.cnblogs.com/dotLive/archive/2006/10/09/524633.html 该网址下 ...
- [Leetcode] Longest Substring Without Repeating Characters (C++)
题目: Given a string, find the length of the longest substring without repeating characters. For examp ...
- 蘑菇街2015校招技术类笔试题A卷,回忆版(杭州站)
笔试时间:10月9号 下午 1.一串数据的最大递增序列,输出个数 例如 4,2, 6,3, 1,5, 最大递增序列为, 2,3, 5,输出3, 2.求两个整型数据集合的交集,尽可能少用时间. 假设两个 ...
- AJAX Data 传值 无效的JSON基元:AJAX jQuery的方法,用c#WEBMETHOD-c#,jquery.
我有这样的代码:I数据值,而不是连接字符串作为对象常量.为什么?看到这里 我的代码是这样的:- $.ajax({ url: "../Member/Home.aspx/SaveClient&q ...
- WCF不支持 ASP.NET 兼容性 解决办法
错 误提示:无法激活服务,因为它不支持 ASP.NET 兼容性.已为此应用程序启用了 ASP.NET 兼容性.请在 web.config 中关闭 ASP.NET 兼容性模式或将 AspNetCompa ...
- Linux vps无法发送邮件
首先安装sendmail软件...yum install sendmail /etc/init.d/php-fpm restart 来检查下sendmail是否正常运行 /etc/init.d/sen ...
- IClone地形编辑器结合T4M插件在Unity3D使用
通过IClone编辑器打造的地形,经过T4M插件的转化后,资源占用极少,比在Unity中自己刷出来的地形再通过T4M转化的要小的的多多了,非常适合用在手机上. IClone地形编辑器下载地址: 如果对 ...
- Android DatePickerDialog 只选择年月
//对EditText注册OnTouch事件etSscxNssbDate.setOnTouchListener(selectDateTouchListener); //选择日期 private OnT ...
- USB系列之四:向U盘上写数据
在<USB系列之三>中,我们实现了一系列的SCSI命令,在这个系列中,我们要实现向U盘上写扇区的命令,所以,本文相对比较容易,更多地是给出一个实现的源程序. 在<USB系列之三> ...
- Http响应报文
HTTP响应也由三个部分组成,分别是:状态行.消息报头.响应正文. 其中,HTTP-Version表示服务器HTTP协议的版本:Status-Code表示服务器发回的响应状态代码:Reason-Phr ...