jQuery实现文字横向滚动效果

HTML代码:

<div id="aaa" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;">
<div id="noticeList" style="position:absolute; top:0; height:20px;">
<span>jQuery文字横向滚动</span>
</div>
</div>

Jquery代码:

$.fn.textScroll=function(){
        var p = $(this),  c = p.children(), speed=3000; //值越大速度越小
        var cw = c.width(),pw=p.width();
        var t = (cw / 100) * speed;
        var f = null, t1 = 0;
        function ani(tm) {
            counttime();
            c.animate({ left: -cw }, tm, "linear", function () {  c.css({ left: pw });  clearInterval(f);  t1 = 0;  t=((cw+pw)/100)*speed;  ani(t);
            });
        }
        function counttime() {
            f = setInterval(function () {
                t1 += 10;  }, 10);
        }
        p.on({  mouseenter: function () {
            c.stop(false, false);
            clearInterval(f);
            console.log(t1);
        },  mouseleave: function () {
            ani(t - t1);
            console.log(t1);
        }  });
        ani(t);  }

  页面调用:

$(function(){
$("#aaa").textScroll();//aaa为最外层div的Id  也可写Class  如:$(".aaa") 此处aaa为class名
});

  

时间: 2025-01-04 01:19:52

jQuery实现文字横向滚动效果的相关文章

jquery实现文字上下滚动效果

文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字滚动</title> <style type="text/css

JQuery实现文字无缝滚动效果 Marquee插件

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 官方演示,如下: Demo 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript&

jquery实现文字向上滚动效果

html部分 <body> <div id="demo" > <ul id="demo1"> <li>1111111111111111</li> <li>2222222222222222</li> <li>3333333333333333</li> <li>4444444444444444</li> <li>55555555

jquery实现多行文字图片滚动效果

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(), line=opt.line?parse

文字横向滚动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name=&quo

【转】使用jquery animate创建平滑滚动效果

这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 滚动到指定位置: $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$(

js实现文字横向滚动

页面布局      <div id="scroll_div" class="fl">         <div id="scroll_begin">            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>            恭喜793765***获得 <span class="pad_

jquery文字纵向滚动效果(带间隔停留)

<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotation"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this);

排行榜 文字向上滚动效果

<!-- 文字轮播效果 start--> <script> (function($){ $.fn.FontScroll = function(options){ var d = {time: 3000,s: 'fontColor',ulClassName:'line'} var o = $.extend(d,options); //d目标参数 options原参数 对原对象中的每个属性进行判断,如果是,那么将他拷贝到目标的对象上去. this.children('ul').addC