$(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 公告从左往右滚动的更多相关文章

  1. 文字自动自左向右滚动的js代码

    重要的一点,就是scrollLeft一直在变化.对象一直在移动,参照物没有动. 代码: css: #div1{display:black;width:110px;height:50px;line-he ...

  2. 【Android】Android开发可以手动进行控制的跑马灯效果,包括从左到右,以及从右到左,

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  3. jQuery实现公告文字左右滚动

    jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  4. jquery垂直公告滚动实现代码

    公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...

  5. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  6. css3动画 一行字鼠标触发 hover 从左到右颜色渐变

    偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画  这个好像不能放视频 我就简单的描述一 ...

  7. sencha touch TabPanel 加入导航按钮(向左向右按钮) 以及Carousel插件(2014-11-7)

    Carousel插件代码: /* * TabPanel的Carousel功能插件 * 取至 * https://github.com/VinylFox/Ext.ux.touch.SwipeTabs * ...

  8. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  9. jQuery带控制按钮向上和向下滚动文本列表

    效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. linux android ndk

    Android调用so库, so库是c语言编写, 在linux 64位系统+ndk(32位)生成 lib*.so (32位) 1. 所需软件环境: 1)so库开发环境 操作系统: Redhat Ser ...

  2. Qt Library 链接库

    官方教程:http://wiki.qt.io/How_to_create_a_library_with_Qt_and_use_it_in_an_application http://qimo601.i ...

  3. (原)caffe中通过图像生成lmdb格式的数据

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5909121.html 参考网址: http://www.cnblogs.com/wangxiaocvp ...

  4. CF 13E Holes 【块状链表】

    题目描述: 一条直线上n个点,每个点有个“弹力”,可以把当前位置x上面的ball弹到x+a[x]上面. 两种操作 0. 修改a处的弹力值,编程b 1. 询问a点的ball经过多少次能跳出n个点外(就是 ...

  5. 使用JavaScript判断图片是否加载完成的三种实现方式

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> ...

  6. C# 连接 数据库的时候 出现 程序出现异常"尝试读取或写入受保护的内存这通常指示其他内存已损坏" 错误

    今天调试程序的时候出现了毫无征兆的就出现了如标题所述 的错误,我之前的程序 都运行的好好的,网上 找了 好多帖子 ,都是没有找到解决方案,最后 一个问一个同事 不知道他在哪儿找到了一个解决方案,说是 ...

  7. HTML5简单入门系列(八)

    前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...

  8. NASM mode for Emacs

    NASM mode for Emacs   Quick post for those Emacs users out there.   The common assembler used on GNU ...

  9. cf475B Strongly Connected City

    B. Strongly Connected City time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  10. C# Switch is Type

    常规用法: Type t = sender.GetType(); if (t == typeof(Button)) { var realObj = (Button)sender; // Do Some ...