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

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

 <!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. Linux下搭建FTP服务器（Ubuntu16.04）

    搞了下FTP服务器,基本上能遇到的问题都遇到了-.-! 先说步骤: 1.安装vsftpd软件包 sudo apt-get install vsftpd 2.打开配置文件 vim /etc/vsftpd ...

  2. Window下Jenkins的安装

    之前没接触过持续集成工具,之前只是了解了下自动化部署,最近一直在看自动化集成这块,发现要学的东西好多好多,可能在小公司用的不多,但如果在大公司,如果每个项目都要手动build.deploy的话那也太耗 ...

  3. iOS App签名的原理

    前言 相信很多同学对于iOS的真机调试,App的打包发布等过程中的各种证书.Provisioning Profile. CertificateSigningRequest.p12的概念是模糊的,导致在 ...

  4. [C++ Calculator 项目] 基础运算实现

    Calculator V1.1 注:这是C++计算器项目第二部分-运算 [基于初始部分增改而得] 源文件已上传至github 主要问题: Ⅰ.运算实现的问题在于( ) + - * /的优先级的处理,以 ...

  5. KMP算法 --- 在文本中寻找目标字符串

    KMP算法 --- 在文本中寻找目标字符串 很多时候,为了在大文本中寻找到自己需要的内容,往往需要搜索关键字.这其中就牵涉到字符串匹配的算法,通过接受文本和关键词参数来返回关键词在文本出现的位置.一般 ...

  6. （转）流量加速插件 FinalSpeed介绍及一键安装教程

    原文章连接:https://blog.kuoruan.com/82.html 1 介绍 官方介绍:FinalSpeed是高速双边加速软件,可加速所有基于tcp协议的网络服务,在高丢包和高延迟环境下,仍 ...

  7. php+sqlserver实现分页效果

    找了一些实现的代码,都或多或少有点问题. 主要问题在于: 在进行一页数据查询时的sql语句格式问题, 开始尝试使用limit关键字查询,错误,limit用于mysql: 接着使用ROWNUM.row_ ...

  8. helpers.bulk时 action_request_validation_exception 异常

    语言Python 在开发时,批量插入ES,出现了action_request_validation_exception异常.我的代码是这样的 action = { } helpers.bulk(es, ...

  9. javascript编程解决黑白卡片问题

    问题描述: 时间限制:1秒 空间限制:32768K 牛牛有n张卡片排成一个序列.每张卡片一面是黑色的,另一面是白色的.初始状态的时候有些卡片是黑色朝上,有些卡片是白色朝上.牛牛现在想要把一些卡片翻过来 ...

  10. MySQL buffer pool中的三种链

    三种page.三种list.LRU控制调优 一.innodb buffer pool中的三种页 1.free page:从未用过的页 2.clean page:干净的页,数据页的数据和磁盘一致 3.d ...