$(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. [翻译] C++ STL容器参考手册(第二章 <deque>)

    返回总册 本章节原文:http://www.cplusplus.com/reference/deque/deque/ 1. std::deque template < class T, clas ...

  2. c++连接mysql数据库(使用mysql api方式,环境VS2013+MYSQL5.6)

    转载请注明出处,原文地址http://www.cnblogs.com/zenki-kong/p/4382657.html 刚开始写博客,博主还只是个大三汪,学艺不精,如有错误还请前辈指出(>^ω ...

  3. Tomcat学习笔记 - 错误日志 - Tomcat访问Manager apps出现401 Unauthorized错误

    原因是配置文件中未指定管理员身份. 打开tomcat>conf>tomcat-user.xml文件,添加如下代码: <role rolename="admin-gui&qu ...

  4. Android 开发转型前端准备知识

    最近React Native甚是流行,再加上微信推动微应用的背景下,Android和IOS向前端转型势在必行. 技能点: 1.lambda表达式 http://blog.csdn.net/ioriog ...

  5. git merge 分支

    把master merge到apple_campus1.git stash2.git checkout master3.git pull4.git checkout apple_campus5.git ...

  6. [转]MySQL 5.6 全局事务 ID(GTID)实现原理(一)

    原文作者:淘长源 原文连接:http://qing.blog.sina.com.cn/1757661907/68c3cad333002qhe.html 转载注明以上信息   MySQL 5.6 的新特 ...

  7. Win32 API中的user32.dll中的ShowWindow方法参数整理

    在使用ShowWindow方法来设置窗体的状态时,由于不知道参数值,用起来非常容易混乱,所以整理了以下其参数的枚举值,方便以后的的使用.   public class User32API { #reg ...

  8. MVC之ActionResult

    一.所有的Controller都继承自System.Web.Mvc.Controller 目前ASP.NET MVC3默认提供了多种ActionResult的实现,在System.Web.Mvc命名空 ...

  9. 在javascript中使用com组件的方法

    转载自:  http://dhailin.blog.163.com/blog/static/230738322011128102043880/ 首先创建一个COM组件,插入一个双接口Itest,在此接 ...

  10. JavaScript中setTimeout()和setInterval()的区别

    含义: setTimeout()和setInterval()经常被用来处理延时和定时任务.使用setTimeout()处理延时任务,而使用setInterval()方法处理定时任务: setTimeo ...