该插件乃本博客作者所写，目的在于提升作者的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. 在Salesforce中处理Email的发送

    在Salesforce中可以用自带的 Messaging 的 sendEmail 方法去处理Email的发送 请看如下一段简单代码: public boolean TextFormat {get;se ...

  2. 在Salesforce中用Data Loader去批量处理数据

    Data Loader download file: Setup --> Administration Setup --> Data Loader --> Download the ...

  3. Codeforces Round #161 (Div. 2) D. Cycle in Graph(无向图中找指定长度的简单环)

    题目链接:http://codeforces.com/problemset/problem/263/D 思路:一遍dfs即可,dp[u]表示当前遍历到节点u的长度,对于节点u的邻接点v,如果v没有被访 ...

  4. CoreLocation 下的定位跟踪测速

    #import "ViewController.h" #import <CoreLocation/CoreLocation.h> @interface ViewCont ...

  5. Eclipse导出可执行Java工程/可执行Jar文件（包含第三方Jar包）

    1. 首先,右键你的Java工程,选择Export,在Java文件夹下选择Runnable JAR file,如下图所示: 2. 选择Runnable JAR file后,会弹出如下所示的对话框,选择 ...

  6. JavaWeb监听器详解

    1 JavaWeb监听器概述 在JavaWeb被监听的事件源为:ServletContext.HttpSession.ServletRequest,即三大域对象.有监听域对象"创建" ...

  7. unicode-range 字体混搭(转）

    最先想到的方法是定义两个拥有不同字体CSS类分别赋予不同的元素. <div class="font1"></div> <div class=" ...

  8. Spring事务解析4-切面织入

    BeanFactoryTransactionAttributeSourceAdvisor作为Advisor的实现类,自然要遵从Advisor的处理方式,当代理被调用时会调用这个类的增强方法,也就是此b ...

  9. poj 1321 棋盘问题

    八皇后问题变形,回溯法. #include <cstdio> #include <cstring> #include <iostream> using namesp ...

  10. HTML5优点

    1.标签的改变:<header>, <footer>, <dialog>, <aside>, <figure>, <section&g ...