该插件乃本博客作者所写，目的在于提升作者的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. phpcms v9 常用调用标签（全）

    本文介绍phpcms v9中模板标签使用说明. {template ) {==}   {/,,)}     loop是data的时候用{thumb($v[thumb],,)} 分页标签------{$ ...

  2. git分支使用

    1.查看远程服务器分支 git branch -a 2.查看本地分支 git branch 3.切换分支 git checkout master 4.删除远程分支 git push origin :b ...

  3. linux应用程序地址布局,王明学learn

    linux应用程序地址布局 在学习Linux应用程序开发时,经常会遇到如下概念:代码段.数据段.BSS段(Block Started by Symbol,又名:未初始化数据段).堆(heap)和栈(s ...

  4. slide.js使用文档

    <!doctype html> <head> <script src="js/jquery-latest.min.js"></script ...

  5. 网上下载的CHM帮助文件打不开的解决办法。

    我的机器 装的是 Windows server 2008 操作系统.他的安全性比较高. 我在网上下载了一个 CHM 帮助文档.结果打不开. 现象: 打开时 ,提示 安全警告, 提示:来自Interne ...

  6. hdu3496 二维01背包

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3496 //刚看题目以为是简单的二维01背包,but,,有WA点.. 思路:题中说,只能买M ...

  7. (转)ACM next_permutation函数

    转自 stven_king的博客 这是一个求一个排序的下一个排列的函数,可以遍历全排列,要包含头文件<algorithm>下面是以前的笔记  (1) int 类型的next_permuta ...

  8. Ipython console in Spyder stuck on “connecting to kernel”

    简短地记录下,今天排除的spyder的BUG, 现象:打开Spyder时其他正常,但是Ipython console 不能正常获取到kernel,一直转圈,显示“connecting to kerne ...

  9. js-原型以及继承小案例

    function human(name,tall){ this.name=name; this.tall=tall; this.toSleep=function(){ alert('no sleep' ...

  10. 后缀数组 UVA 11107 Life Forms

    题目链接 题意:训练指南P223 分析:二分长度,把所有字符串连成一个字符串,中间用不同的字符分隔(这是为了保证匹配长度始终在一个字符串内).height数组分段,vis数组标记哪些字符串被访问了,如 ...