自己写过很多插件，但都是直接嵌入在了工程里，从来没有拿出来单独封装成一个文件过，这是第一次，希望是一个良好的开端。

一个文字过长而可以左右滚动的插件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style>

     div{

         width:200px;

         overflow:hidden;

     }

     span{

         display: inline-block;

         word-break:keep-all;           /* 不换行 */

         white-space:nowrap;          /* 不换行 */

         width: auto;

         text-align: right;

     }

 </style>

 <body>

     <div class="font-scroll"><span>剪影的你轮廓太好看，忍住眼泪才敢细看</span></div>

     <div class="font-scroll"><span>剪影的你轮廓太好看，忍住眼泪才敢细看</span></div>

     <div class="font-scroll"><span>剪影的你轮廓太好看，忍住眼泪才敢细看</span></div>

 </body>

 <script src="./jquery.min.js"></script>

 <script src="./font-scroll.js"></script>

 </html>
/**Magin 2016/8/28 */

$(function(){

    function fontLeft(e){

        $(e).children('span').css('magin-left','0px')

         $(e).children('span').animate({

                marginLeft:parseFloat($(e).css('width'))-parseFloat($(e).children('span').css('width'))-12

            },2000,"linear",function(){

                fontRight(e);

            })

    }

    function fontRight(e){

        $(e).children('span').css('magin-left',parseFloat($(e).css('width'))-parseFloat($(e).children('span').css('width')));

        $(e).children('span').animate({

                marginLeft:'12px'

            },2000,"linear",function(){

                fontLeft(e);

            })

    }

    $('.font-scroll').each(function(){if($(this).children('span').css('width')>$(this).css('width')){

        fontLeft(this)

        }

    })

})

html js文字左右滚动插件的更多相关文章

  1. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  2. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  3. fullpage.js全屏滚动插件使用方法

    在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...

  4. FullPage.js全屏滚动插件

    一.介绍 fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触摸事件 4.支持CSS3动画 ...

  5. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  6. FullPage.js全屏滚动插件学习总结

    如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...

  7. FullPage.js全屏滚动插件的配置项、方法和回调函数

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  8. ScrollPic.js——图片左右滚动插件

    自己在做项目的时候刚好遇到了图片做左右滚动的项目,发现ScrollPic.js这个插件还是很好用的,一般的浏览器都支持,也可以做成bootstrap样式: 首先需要下载ScrollPic.js这个插件 ...

  9. jquery.fullPage.js全屏滚动插件

    注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...

随机推荐

  1. Python运维开发基础-概述-hello world

    Hello World 任何一门计算机语言几乎都是从hello world开始的,为了遵从这一优秀的传统习惯,我们也从打印hello world开始. linux系统进入Python环境,直接打Pyt ...

  2. docker~windows版本的安装与使用

    回到目录 在面向服务的框架里,docker扮演着十分重要的角色,他使你的部署更轻量,使运维更智能化,事实上微软自己的项目也已经用上了docker了,下面介绍一下在windows环境上使用docker的 ...

  3. Codeforces_776E: The Holmes Children （数论 欧拉函数）

    题目链接 先看题目中给的函数f(n)和g(n) 对于f(n),若自然数对(x,y)满足 x+y=n,且gcd(x,y)=1,则这样的数对对数为f(n) 证明f(n)=phi(n) 设有命题 对任意自然 ...

  4. linux函数的阻塞与非阻塞IO及错误处理

    1.阻塞是指进程等待某一个事件的发生而处于等待状态不往下执行,如果等待的事件发生了则会继续执行该进程.调用系统阻塞函数可能会导致进程阻塞进入睡眠状态. 2.阻塞IO之read读取键盘输入数据 3.li ...

  5. showcase，开发中必须引起重视的小环节

    有人说,测试者来自火星,开发者来自金星.这是因为软件测试员和软件开发者就好比一对冤家,里面的缘由说不清也道不明.开发代表着创造,而测试则代表着摧毁,因为测试的目的就是以各种方式不断地从开发出的产品中发 ...

  6. 【SignalR学习系列】6. SignalR Hubs Api 详解（C# Server 端）

    如何注册 SignalR 中间件 为了让客户端能够连接到 Hub ,当程序启动的时候你需要调用 MapSignalR 方法. 下面代码显示了如何在 OWIN startup 类里面定义 SignalR ...

  7. 安装cocoaPods第三方类库

    *1 检测gem 镜像文件     输入指令: gem sources -l     回车后得到镜像地址.可能是一个,也可能有好几个,常见两个如下 https://rubygems.org/     ...

  8. 【Django】中间件

    Middleware 这个地方把所有Request 拦截住,用我们自己的方式完成处理以后直接返回 Response.因此了解中间件的构成是非常必要的. Initializer: __init__(se ...

  9. Java栈与堆 （转）

    1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 栈的优势是,存取速度比堆要快,仅次于直接位于C ...

  10. 关于Spring事务<tx:annotation-driven/>的理解（Controller可以使用@Transactional）

    在使用SpringMvc的时候,配置文件中我们经常看到 annotation-driven 这样的注解,其含义就是支持注解,一般根据前缀 tx.mvc 等也能很直白的理解出来分别的作用.<tx: ...