该插件乃本博客作者所写，目的在于提升作者的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. ASP.NET 5探险（8）：利用中间件、TagHelper来在MVC 6中实现Captcha

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:由于ASP.NET 5及MVC 6是一个微软全新重新的Web开发平台,之前一些现有的验 ...

  2. Kmeans聚类算法原理与实现

    Kmeans聚类算法 1 Kmeans聚类算法的基本原理 K-means算法是最为经典的基于划分的聚类方法,是十大经典数据挖掘算法之一.K-means算法的基本思想是:以空间中k个点为中心进行聚类,对 ...

  3. 在Salesforce中向Page Layout中添加Visualforce Page

    在Salesforce中可以向Object所对应的Layout中添加我们自定义的Visualforce Page. 此时的Visualforce Page与Asp.Net MVC中的Partial V ...

  4. Silverlight中的TabControl如何绑定数据？重写tabcontrol和tabItem 解决绑定友好问题。可以绑定对象集合

    在 WPF 中,TabControl 可以直接将 ItemsSource 绑定数据源,见 将 TabControl 绑定到数据的示例 http://msdn.microsoft.com/zh-cn/l ...

  5. Ring3无敌进程让你的进程变得和smss.exe一样支持64

    本帖最后由 奋斗丶小Z 于 2016-6-6 13:39 编辑 此函数可以启用或关闭开启之后变得和系统进程一样被杀系统直接蓝屏系统进程也是此函数实现的上图 可以用于进程保护 <ignore_js ...

  6. AJAX案例一：发送POST请求

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  7. 使用Hue上传hive数据

    大概逻辑是先上传hdfs数据,然后创建hive外部表,关联到hdfs上传数据的位置. 截图比较概要,但是用起来很简单 1.创建路径和上传文件 2.创建外部表

  8. 改变图片尺寸（python）

    for name in /图片路径; do convert -resize 256x256! $name $namedone

  9. SQL ISNULL 函数

    sql 中 NULL 值的处理:微软的 ISNULL() 函数用于规定如何处理 NULL 值.NVL(), IFNULL() 和 COALESCE() 函数也可以达到相同的结果.语法ISNULL ( ...

  10. WordPress用户注册无法发送密码邮件怎么回事？

    wordpress无法发送电子邮件.可能原因:您的主机禁用了 mail() 函数 等等几句话.在网上一搜,很快找到了解决方案:使用wp-mail-smtp插件. 一.插件下载安装.可以在wordpre ...