基于JQuery實現(xiàn)的跑馬燈效果（文字無縫向上翻動）
更新時間：2016年12月02日 16:45:40 作者：船長op
本篇文章分享了如何實現(xiàn)文字無縫向上翻動效果的示例代碼。代碼清晰明了，可直接下載使用。有興趣的朋友可以看下
(function($){
$.fn.extend({
"slideUp":function(value){
var docthis = this;
//默認參數(shù)
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);
//懸停時停止滑動，離開時繼續(xù)執(zhí)行
$(docthis).hover(function(){
clearInterval(anifun); //清除自動滑動動畫
},function(){
setInterval(autoani,value.time); //繼續(xù)執(zhí)行動畫
})
}
})
})(jQuery)
主要思路：
滑動動畫，就是改變元素的位置，要改變元素的位置有兩種方法，一種改變left，top屬性(相對定位和絕對定位),還有一種，就是現(xiàn)在這里用到的,改變margin的值。
上例中動畫過程：
1.設(shè)置要改變margin-top的值;
2.用animate方法改變第一個LI的margin-top的值為-30（負值會向上移動）;
3.在動畫完成之后，回調(diào)函數(shù)內(nèi)，把當前的第一個LI的margin-top改變?yōu)?0"
4.把當前這第一個LI移動到所有LI的最后一個。（實現(xiàn)無縫）
案例下載：http://xiazai.jb51.net/201612/yuanma/myslidup(jb51.net).rar
以上就是本文的全部內(nèi)容，希望對大家有所幫助，謝謝對腳本之家的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
jQuery使用unlock.js插件實現(xiàn)滑動解鎖
unlock.js插件具有滑動解鎖，尺寸、顏色、字體大小等都可以個性化定制等特點，接下來通過本文給大家分享jQuery使用unlock.js插件實現(xiàn)滑動解鎖思路講解，感興趣的朋友一起看看吧2017-04-04
jquery實現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
本文主要介紹了jquery實現(xiàn)靜態(tài)搜索功能的示例代碼，可通過輸入搜索文字進行篩選信息。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
很久沒有寫東西了，今天在工作中碰見問題才發(fā)現(xiàn)。以后得多逼自己多抽時間來寫寫自己的東西，也順便和大家分享一下自己在工作中碰見的問題。2011-05-05
jquery插件豐富，很多都是很好用的，最近學(xué)習(xí)了一下如何制作jquery插件，發(fā)現(xiàn)jquery插件制作其實很簡單，這里介紹一下。2010-06-06
JQuery將文本轉(zhuǎn)化成JSON對象需要注意的問題
在JQuery的許多方法中，很多方法的參數(shù)可以傳入一個JSON對象，比如Ajax方法的第二個參數(shù)。怎么將文本轉(zhuǎn)化成JSON對象，需要注意以下問題2011-05-05
js/jq仿window文件夾移動/剪切/復(fù)制等操作代碼
本篇文章主要介紹了js/jq仿window文件夾移動/剪切/復(fù)制等操作代碼，非常具有實用價值，需要的朋友可以參考下。2017-03-03
JQueryEasyUI框架下的combobox的取值和綁定的方法
這篇文章主要介紹了JQueryEasyUI框架下的combobox的取值和綁定的方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
這篇文章主要為大家詳細介紹了基于jquery編寫分頁插件的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-03-03
卷簾效果在生活中應(yīng)用比較廣泛，因為它的視覺效果比較不錯，本文用代碼實現(xiàn)一個，感興趣的朋友不妨了解一下，或許對你學(xué)習(xí)jquery有所幫助,好了話不多說切入正題2013-02-02