该插件乃本博客作者所写，目的在于提升作者的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. C可变参数函数 实现

    转自:http://blog.csdn.net/weiwangchao_/article/details/4857567 C函数要在程序中用到以下这些宏: void va_start( va_list ...

  2. Build better apps: Windows 10 by 10 development series

    http://blogs.windows.com/buildingapps/2015/08/05/build-better-apps-windows-10-by-10-development-seri ...

  3. HDU 4821 String （HASH）

    题意:给你一串字符串s,再给你两个数字m l,问你s中可以分出多少个长度为m*l的子串,并且子串分成m个长度为l的串每个都不完全相同 首先使用BKDRHash方法把每个长度为l的子串预处理成一个数字, ...

  4. 第二篇：JMeter实现接口/性能自动化（JMeter/Ant/Jenkins）

    主要是对HTML报告的优化 如果按JMeter默认设置,生成报告如下:

  5. JMeter中的关联-正则表达式提取(2)

    JMeter获取正则表达式中的提取的所有关联值的解决方法: 需求如下: { : ", : "results": : [ : : { : : : "total_e ...

  6. LR连接oracle时出现：SQLState=28000[Oracle][ODBC][Ora]ORA-01017:invalid username/password;logon denied

    出现的现象:

  7. 各浏览器抗uaf机制

    今年中旬,微软针对旗下ie浏览器中大量出现的uaf漏洞,对ie浏览器的安全机制进行了一个大幅度的升级,其中主要体现为隔离堆及延迟释放两个机制,顿时又将uaf漏洞的利用向上提升了一个大坎, 但是类似的对 ...

  8. CSS3 calc()的使用

    前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...

  9. Android ListView滑动过程中图片显示重复错乱闪烁问题解决

    最新内容建议直接访问原文:Android ListView滑动过程中图片显示重复错乱闪烁问题解决 主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及L ...

  10. hdu2255 二分图最大权配KM

    KM算法:hdu2255 (大概理解了 参考博客: http://blog.csdn.net/niushuai666/article/details/7171880)         所谓交错树:就是 ...