JQuery-跑马灯(文字无缝向上翻动-封装)
转载自他人:https://blog.csdn.net/z69183787/article/details/12857587
- (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的最后一个。(实现无缝)
JQuery-跑马灯(文字无缝向上翻动-封装)的更多相关文章
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- JAVA 跑马灯文字效果
JAVA跑马灯文字效果的实现: 1. 首先创建一个继承JFrame类的HorseRaceLightTextFrame窗体类,代码如下: package com.example.horseracelig ...
- 原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...
- marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
- jQuery实现的文字逐行向上间歇滚动效果示例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- marquee标签属性详解(跑马灯文字效果)
请大家先看下面这段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- IOS跑马灯效果,实现文字水平无间断滚动
ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...
- TextView来实现跑马灯的效果
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- html跑马灯效果
实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示: ...
随机推荐
- canvas 点击图片播放视频
canvas.js window.onload=function() { var canvas = document.getElementById('canvas'); var ctx= canvas ...
- JavaScript判断对象是否相等
实现一. var obj = {a:'a'},obj1 = {b:'b'},obj2 = {a:'a'};就是使用JSON.stringify()先把对象转化成字符串,这样就可以啦 console.l ...
- [BZOJ5407]girls
也是CF985G... 容斥+三元环计数 CF数据太弱啦 vis没赋初值-1竟然过了QAQ 所以又调了我半个小时才搞掉QAQ 数数真难QAQ 记得要写#include<vector>!!! ...
- BZOJ2002 [HNOI2010] 弹飞绵羊
LCT access完了一定splay再用!!! 悲伤= = LCT裸题 把调出去设虚点n+1即可 //Love and Freedom. #include<cstdio> #includ ...
- mac文本操作小技巧——2019年10月17日
声明:看的别人博主写的,自己整理的,非原创,只是自用. mac文本操作技巧 官方指导文档:https://support.apple.com/zh-cn/HT201236 1.光标移动 1.1 行首. ...
- Unit Testing of Classes in Java
Every class can have a main method. That is a handy trick for unit testing of classes. For example, ...
- iOS项目开发中的知识点与问题收集整理①
前言部分 注:本文并非绝对原创 大部分内容摘自 http://blog.csdn.net/hengshujiyi/article/details/20943045 文中有些方法可能已过时并不适用于现在 ...
- uiautomator python版本
摘要: 利用jsonrpc技术直接包装uiautomator,调用uiautomator的api在本地直接编写脚本,然后运行测试case,这样比用Java写,然后再打包,runcase要简单的多,关键 ...
- 项目中有 xxxx 不能被json序列化
遇到这类问题 ,首先断点调试,看看要序列化的值 是一个什么类型的值 查看值得数据类型 在将值转化成可以被json序列化的对象 此时即可解决问题 如遇到 requests.post() 朝一个url发 ...
- mybatis源码分析之02配置文件解析
该篇正式开始学习mybatis的源码,本篇主要学习mybatis是如何加载配置文件mybatis-config.xml的, 先从测试代码入手. public class V1Test { public ...