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

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

 <!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. vue 自定义组件

    1.Vue.component('component-test', { props:{}, data:function(){ return{} }, mounted:function(){}, com ...

  2. ubuntu16.04安装不上有道词典的解决办法

    转自:http://www.linuxdiyf.com/linux/21143.html ubuntu16.04安装不上有道词典,提示: le@hu-pc:~/下载$ sudo dpkg -i you ...

  3. 51nod_1298:圆与三角形（计算几何）

    题目链接 判断圆和三角形是否相交   可以转化为   判断三条线段是否和圆相交 #include<iostream> #include<cstdio> #include< ...

  4. java泛型（整理）

    1 泛型基础知识 泛型需要理解两个关键点:1)类型擦除 2)类型转换 1)类型擦除 泛型有个很重要的概念,是类型擦除.正确理解泛型概念的首要前提是理解类型擦除(type erasure). Java中 ...

  5. RabbitMQ入门-从HelloWorld开始

    从读者的反馈谈RabbitMQ 昨天发完<RabbitMQ入门-初识RabbitMQ>,我陆陆续续收到一些反馈.鉴于部分读者希望结合实例来讲 期待下篇详细,最好结合案例.谢谢! 哪都好,唯 ...

  6. year：2017 month：7 day：18

    2017-07-18 JavaScript 1javascript的控制语句 (1) if语句 (2)if(){}else 语句 (3) if(){} else if(){ }语句 (4)switch ...

  7. [bzoj1592] Making the Grade

    [bzoj1592] Making the Grade 题目 FJ打算好好修一下农场中某条凹凸不平的土路.按奶牛们的要求,修好后的路面高度应当单调上升或单调下降,也就是说,高度上升与高度下降的路段不能 ...

  8. cxf的使用以及与SSH的整合

    经历过一小段忙碌的时间,终于有时间开始整理项目中曾遇到的技术难点,并不是什么新颖的技术难点,只是自己在这样方面所了解的不健全或者是没有了解透彻,现在都抽时间进行整理. 首先就是需要在ssh的系统中整合 ...

  9. ASP.NET Core MVC – Caching Tag Helpers

    简介 缓存可以大大提高应用程序加载时间和响应速度.我们可以使用缓存Tag Helpers缓存不会频繁更改的HTML内容. 在上一篇文章中,我们谈到了Tag Helpers,演示Tag Helpers能 ...

  10. Head First 设计模式 第1章 策略模式

    本章从浅入深的讲解了策略模式的使用,以及策略模式中所涉及到的几个设计原则,在本章的最后给出了策略模式的定义. 1.定义及优点 什么是策略模式呢? 答:定义算法族(对象),分别封装起来,让他们之间可以相 ...