基于JQuery实现的跑马灯效果（文字无缝向上翻动）

(function($){
 $.fn.extend({
 "slideUp":function(value){
  var docthis = this;
  //默认参数
  value=$.extend({
   "li_h":"30",
   "time":2000,
   "movetime":1000
  },value)
  //向上滑动动画
  function autoani(){
  $("li:first",docthis).animate({"margin-top":-value.li_h},value.movetime,function(){
   $(this).css("margin-top",0).appendTo(".line");
  })
  }
  //自动间隔时间向上滑动
  var anifun = setInterval(autoani,value.time);

  //悬停时停止滑动，离开时继续执行
  $(docthis).hover(function(){
  clearInterval(anifun);  //清除自动滑动动画
  },function(){
  setInterval(autoani,value.time); //继续执行动画
  })
 }
 })
})(jQuery)

    主要思路：

　　滑动动画，就是改变元素的位置，要改变元素的位置有两种方法，一种改变left，top属性(相对定位和绝对定位),还有一种，就是现在这里用到的,改变margin的值。

　　上例中动画过程：

　　　　1.设置要改变margin-top的值;

　　　　2.用animate方法改变第一个LI的margin-top的值为-30（负值会向上移动）;

　　　　3.在动画完成之后，回调函数内，把当前的第一个LI的margin-top改变为"0"

　　　　4.把当前这第一个LI移动到所有LI的最后一个。（实现无缝）

案例下载：http://xiazai.jb51.net/201612/yuanma/myslidup(jb51.net).rar

以上就是本文的全部内容，希望对大家有所帮助，谢谢对我们的支持！

赞 (0)

相关推荐

  • 基于jquery的文字向上跑动类似跑马灯的效果

    想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 <div class="recordList"> <ul class="tpl-rotate-recordList" style="margin-top: 0px;"> <li class="tpl-rotate-recordList-item"> 恭喜187****5204获得1000RBM &

  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    兼容各浏览器的文本行高 复制代码 代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

  • jQuery+CSS3文字跑马灯特效的简单实现

    jQuery+CSS3文字跑马灯特效的简单实现

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&

  • 基于jquery实现的文字向上跑动类似跑马灯的效果

    想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 复制代码 代码如下: <div class="recordList"> <ul class="tpl-rotate-recordList" style="margin-top: 0px;"> <li class="tpl-rotate-recordList-item"> 恭喜187****5204

  • 基于JQuery实现的跑马灯效果（文字无缝向上翻动）

    (function($){ $.fn.extend({ "slideUp":function(value){ var docthis = this; //默认参数 value=$.extend({ "li_h":"30", "time":2000, "movetime":1000 },value) //向上滑动动画 function autoani(){ $("li:first",doc

  • Android基于TextView实现的跑马灯效果实例

    本文实例讲述了Android基于TextView实现的跑马灯效果.分享给大家供大家参考,具体如下: package sweet.venst.act; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStrea

  • Android基于TextView不获取焦点实现跑马灯效果

    本文实例讲述了Android基于TextView不获取焦点实现跑马灯效果.分享给大家供大家参考,具体如下: 1. 写一个类继承TextView package com.example.tt; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.widget.TextView; public class ScrollingText

  • jQuery实现参数自定义的文字跑马灯效果

    jQuery实现参数自定义的文字跑马灯效果

    本文为大家分享了jQuery实现文字跑马灯效果的具体代码,供大家参考,具体内容如下 一.明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置的,包括文字跑马灯的速度和距离下次出现的间隔.具体需求见下图: 这样一来实现这个功能就会有点麻烦了,需要烧烧脑细胞了. 二.具体实现过程 HTML中只需要如下几行代码 <div id="swiper"

  • 基于React.js实现简单的文字跑马灯效果

    刚好手上有一个要实现文字跑马灯的react项目,然后ant-design上面没有这个组件,于是只能自己手撸一个. 我想到的最简单的方法,就是定位啦,定时移动这个文字块不就跑起来了. 需要注意的是,要判断文字的宽度,当文字超出屏幕的宽度的时候再动起来,我用的是hook的写法,要在销毁页面的时候清掉定时器.定时器要放在useRef里面. const timer = useRef<any>(null); const [left, setLeft] = useState(0); const conte

  • Android基于TextView属性android:ellipsize实现跑马灯效果的方法

    本文实例讲述了Android基于TextView属性android:ellipsize实现跑马灯效果的方法.分享给大家供大家参考,具体如下: Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须超出TextView大小 3.TextView要获得焦点才能滚动 XML代码: android:ellipsize="marquee", andro

  • js实现文字跑马灯效果

    本示例将实现文字跑马灯效果:文字超过显示宽度每间隔1s自动向左滚动显示,话不多说,请看代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,in

  • 基于Marquee.js插件实现的跑马灯效果示例

    本文实例讲述了基于Marquee.js插件实现的跑马灯效果.分享给大家供大家参考,具体如下: 1.Marquee.js文件 /**************************************************************** - Marquee.js - 参数: - ID:滚动对象(必须) - Direction:滚动方向("top": 0, "up": 0, "bottom": 1, "down"

  • 小程序文字跑马灯效果

    小程序文字跑马灯效果

    本文实例为大家分享了小程序文字跑马灯效果的具体代码,供大家参考,具体内容如下 market.wxml <!--pages/market/market.wxml--> <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style=&qu

  • javascript实现文字跑马灯效果

    本文实例为大家分享了js实现文字跑马灯效果的具体代码,供大家参考,具体内容如下 思路: 1.判断文字的长度和容器的长度,如果文字长度大于容器长度,则开始滚动,否则不滚动. 2.获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归. 判断文字和容器的长度可以通过offsetWidth来判断.如果文字长度大于容器长度,则开始滚动. window.onload = function(){ //比较文字与盒子长度的大小 if(boxWidth>textWidth){ return

随机推荐