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

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

 <!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. 使用Stack堆栈集合大数据运算

    使用Stack堆栈集合大数据运算 package com.sta.to; import java.util.Iterator; import java.util.Stack; public class ...

  2. 2、微信小程序之弹幕的实现（无后台）

    对弹幕功能主要利用环信来实现的,读者也许对环信这个东西很陌生,请先自行了解这环信再来看这文章. 环信开发文档:http://docs.easemob.com/im/400webimintegratio ...

  3. 第一个java——swap()交换方法

    其实这学期的java课开了将近四星期了,加上开学前的小小预习.编写不下于二十几个java了. 可这一有关swap()方法的java确实是首次迷惑不解到处寻求解决的程序. 课堂上老师有关类.方法.对象的 ...

  4. 【基础网络】TCP与UDP 的区别

    TCP协议与UDP协议的区别    首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信! ...

  5. android调用系统相机进行视频录制并保存到指定目录

    最近在做视频录制上传,调用的是系统的相机. 在做之前查了一些资料,发现好多人遇到保存到指定目录不成功的现象.自己写的时候就注意这些,最后发现他们遇到的问题我这边根本没有.可能是他们写法有问题吧. 下边 ...

  6. 如何在github制作一个网页

    1.首先得先注册一个github账号,官网:https://github.com/ 2.注册完,登录账号进入首页,点右上角的 ‘+’ 创建新的仓库 3. 点击setting,选择一个主题, 4. 选完 ...

  7. iOS多款源码分享

    iOS精选源码 列表联动,Linkage 电商商品详情 AxcUIKit-控件整合框架,快速简单的使用高级控件 GKNavigationBarViewController-导航栏联动 仿京东的加入购物 ...

  8. Js 获取时间戳

    //获取时间戳 单位:秒: //1. 获取当前时间戳 function getUnixTime(){ var date = new Date(); //使用getTime方法: var unix_ti ...

  9. 16. leetcode 404. Sum of Left Leaves

    Find the sum of all left leaves in a given binary tree. Example:     3    / \   9  20     /  \    15 ...

  10. HDU5734 Acperience（数学推导）

    Problem Description Deep neural networks (DNN) have shown significant improvements in several applic ...