js跑马灯效果
function nextPage() {
/*
克隆第一张图片并添加到box后
box前移一张图片的距离动画
动画回调里把box的left值设为0 删除第一张图片
*/
$(".mypng li:first-child").clone().appendTo($(".mypng"));
$(".mypng").animate({ left: -width }, { duration: 500, easing: "easeInQuad", complete: function () {
$(this).css("left", "0");
$(".mypng li:first-child").remove();
}
});
}
function prePage() {
$(".mypng li:last-child").clone().prependTo($(".mypng"));
$(".mypng").css("left", -width);
$(".mypng").animate({ left: 0 }, { duration: 500, easing: "easeInQuad", complete: function () {
$(".mypng li:last-child").remove();
}
});
}
js跑马灯效果的更多相关文章
- Js跑马灯效果 && 在Vue中使用
DEMO: <!DOCTYPE html><html> <head> <title>滚动播报</title> <meta charse ...
- JS实现跑马灯效果(向左,向上)
<html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...
- 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- js实现横向跑马灯效果
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...
- JS实现跑马灯效果(鼠标滑入可暂停,离开继续跑)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Vue学习笔记四:跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
- vue实现跑马灯效果
vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...
- marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
随机推荐
- checkbox选中问题
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- 【待整理】IOS开发之下载
一.传统的下载文件的方式 - (void)downloaderWithUrl:(NSURL *)url { NSURLRequest *request = [NSURLRequest requestW ...
- 使用Qt编写服务器端程序(包括Http传输服务器端)的方法
使用Qt编写客户端的程序的示例或demo较多,但是编写服务器端程序的demo很少.当然,服务器端的程序一般不需要带界面,这点我们可以理解.不过有些时候我们还是需要使用Qt编写一个简单的测试用的服务器代 ...
- SQL Server 2008空间数据应用系列六:基于SQLCRL的空间数据可编程性
原文:SQL Server 2008空间数据应用系列六:基于SQLCRL的空间数据可编程性 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 ...
- C语言的本质(38)——makefile之变量
我们详细看看Makefile中关于变量的语法规则.先看一个简单的例子: foo = $(bar) bar = Huh? all: @echo$(foo) 我们执行make将会打出Huh?.当make读 ...
- C语言的本质(35)——共享库
库用于将相似函数打包在一个单元中.然后这些单元就可为其他开发人员所共享,并因此有了模块化编程这种说法- 即,从模块中构建程序.Linux支持两种类型的库,每一种库都有各自的优缺点.静态库包含在编译时静 ...
- Pascal's Triangle II 解答
Question Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Ret ...
- HOWTO Use Python in the web — Python v3.0.1 documentation
HOWTO Use Python in the web - Python v3.0.1 documentation mod_python¶ People coming from PHP often f ...
- IOS添加多个按钮在导航栏
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 75.0f, 30.0f)]; UIButton * ...
- Java程序员面试题集(1-50)(转)
转:http://blog.csdn.net/jackfrued/article/details/17339393 下面的内容是对网上原有的Java面试题集及答案进行了全面修订之后给出的负责任的题目和 ...