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

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

 <!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. thinkphp分页带数据

    因为用thinkphp做分页时候点击下一页后搜索栏的数据会清空,然后点击下一页后刷新完了就没有内容了,感觉网上查找和我自己研究在不适用ajax做分页的情况下用以下代码就可以实现!!通过把值扔地址栏来进 ...

  2. java第一课，java基础

    Java:                是1991年SUN公司的James Gosling等人开发名称为Oak的语言,希望用于控制嵌入在有线电视交换盒,PDA等的微处理器.java.是面向互联网的语 ...

  3. 华为OJ之放砝码

    题目描述: 现有一组砝码,重量互不相等,分别为m1.m2--mn:他们可取的最大数量分别为x1.x2--xn.现在要用这些砝码去称物体的重量,问能称出多少中不同的重量. 注: 称重重量包括0: 要对输 ...

  4. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  5. Python爬取百度贴吧数据

    本渣除了工作外,在生活上还是有些爱好,有些东西,一旦染上,就无法自拔,无法上岸,从此走上一条不归路.花鸟鱼虫便是我坚持了数十年的爱好. 本渣还是需要上班,才能支持我的业余爱好.上班时间还是尽量访问外网 ...

  6. oracle高级查询（实例基于scott用户四张表）

    oracle高级查询(实例基于scott用户四张表) 分组查询 多表查询 子查询 综合实例 ====================================================== ...

  7. (转)盒子概念和DiV布局

    CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,t ...

  8. 【HTML】web语义化

    一.解决的问题 & 评价标准 web语义化能解决如下问题: 1. 页面样式丢失 2. 有颜色或其他障碍的访客也能读懂页面 3. 移动设备访问页面 4. 程序(如爬虫)理解页面(换句话说SEO优 ...

  9. 【YII】Yii入门

    1. 入门博客 http://blog.csdn.net/zm2714/article/category/1359776/2 2. 创建运行demo http://blog.csdn.net/zhou ...

  10. 一步一步学习Vue（十）

    本篇说一下组件通信的问题,父子组件通信,前面的博客中已有说明,vue也推荐props in,event out:兄弟节点通信如何做呢?官方其实也给出了实现方式,我们以下面的场景来实现一下: 上图中,实 ...