该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。

此插件旨在实现目前较为流行的无缝向上滚动特效，当鼠标移动到文字上时，向上滚动会停止，当鼠标离开时，向上滚动继续。整体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无缝向上滚动</title>

<style>

*{margin:0;padding:0;font-size:12px;}

li{list-style:none;}

.box{margin:20px;width:320px;height:195px;border:1px solid #ddd;padding:10px;overflow:hidden;}

.box ul li{line-height:25px;}

</style>

<script type="text/javascript" src="../../jquery-1.7.1.js"></script>

</head>

<body>

<div class="box">

  <ul>

    <li>01这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

    <li>02这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

    <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

    <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

    <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

    <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

    <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

    <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

    <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li>

  </ul>

</div>

<script>

/*

* scrollTop 0.1

* Copyright (c) 2014 tnnyang http://tnnyang.cnblogs.com/

* Dependence jquery-1.7.1.js

*/

;(function($){

    $.fn.scrollTop = function(options){

        var defaults = {

            speed:30

            }

        var opts = $.extend(defaults,options);

        this.each(function(){

            var $timer;

            var scroll_top=0;

            var obj = $(this);

            var $height = obj.find("ul").height();

            obj.find("ul").clone().appendTo(obj);

            obj.hover(function(){

                clearInterval($timer);

                },function(){

                    $timer = setInterval(function(){

                        scroll_top++;

                        if(scroll_top > $height){

                            scroll_top = 0;

                        }

                        obj.find("ul").first().css("margin-top",-scroll_top);

                },opts.speed);

              }).trigger("mouseleave");

            })

        }

    })(jQuery)

</script>

<script>

$(function(){

    $(".box").scrollTop({

        speed:30    //数值越大  速度越慢

        });

})

</script>

</body>

</html>

jquery插件之文字无缝向上滚动的更多相关文章

  1. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  2. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  3. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  4. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  5. jQuery实现的文字逐行向上间歇滚动效果示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  7. jQuery插件--图片文字向上向左循环滚动

    需要引用jquery 调用非常简单: 一. 向上滚动 $(".scroll_two").jScroll({vertical: true}); <div class=" ...

  8. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  9. jquery无缝向上滚动实现代

    <!DOCTYPE html><html><head><style type="text/css">.renav{width:200 ...

随机推荐

  1. V for Vendetta

    V for Vendetta V字仇杀队 复仇者V 安迪·沃卓斯基 and Larry Wachowski 思想,是最强大的武器.因为,世界上的独裁政府,有一个共同特点就是推行洗脑和愚民政策. 经典台 ...

  2. 如何解决虚拟机Mac OS X 不支持二进制编译问题()

    本文将着重解决在使用VMware 11安装Mac OS虚拟机出现”Mac OS X 不支持二进制编译.若要运行 Mac OS X 主机上需要一个 VMware Workstation 支持英特尔 VT ...

  3. zoj 3644(dp + 记忆化搜索)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4834 思路:dp[i][j]表示当前节点在i,分数为j的路径条数,从 ...

  4. ios广告

    ios广告只需要添加iAd.framework框架 添加广告控件ADBannerView,在控制器中设置广告控件代理<ADBannerViewDelegate>即可,广告会有苹果官方自动推 ...

  5. loadrunner参数化excel数据

    LR参数化数据源Oracle,MSSQL,Excel参数化的方法: 重点介绍excel数据参数化的方法: 1.首先创建excel表格: 注意要写列明   2.创建excel表连接:   参数化完成后, ...

  6. ffmpeg处理RTMP流媒体的命令 发送流媒体的命令（UDP，RTP，RTMP）

    将文件当做直播送至live ffmpeg -re -i localFile.mp4 -c copy -f flv rtmp://server/live/streamName   re限制输出速率,按照 ...

  7. C语言补码作用

    补码主要是为了cpu运算器在进行减法运算时避免借位而设立的. 在早期,cpu中的运算器部分,只要实现一个加法器就可以完成四由算术运算. 因为计算机中的数值编码是有限位数的,所以减法实际上相当于加上减数 ...

  8. Swift3.0语言教程字符串与URL的数据转换与自由转换

    Swift3.0语言教程字符串与URL的数据转换与自由转换 Swift3.0语言教程字符串与URL的数据转换 Swift3.0语言教程字符串与URL的数据转换与自由转换,字符串中的字符永久保存除了可以 ...

  9. virtual方法和abstract方法

    在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...

  10. 怎样增加windows 系统的环境变量Path的默认长度的限制？

    reg add "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Environment" ...