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> ...
随机推荐
- MVC Controller 与 View 传值
Controller 到 View 1 强类型 控制器 // GET: /Test/ public ActionResult Index() { DateTime date = DateTime.No ...
- information_schema.optimizer_trace学习
information_schema.optimizer_trace 用于追踪优化器的优化过程:通常来说这张表中是没有数据的,要想开户追踪要把 @@session.optimizer_trace='e ...
- A Distributed Multichannel MAC Protocol for Multihop Cognitive Radio Networks
2010 这个呢,就是time slotted的DSA网络MAC层协议. 跟上一篇单纯的Multi Channel实现类似,不过这里是CR网络,因为多了嗅探等操作. 简单的说,time slotted ...
- joseph-约瑟夫环问题
约瑟夫环运作如下: 1.一群人围在一起坐成环状(如:N) 2.从某个编号开始报数(如:K) 3.数到某个数(如:M)的时候,此人出列,下一个人重新报数 4.一直循环,直到所有人出列,约瑟夫环结束 关于 ...
- TEA加密
TEA(Tiny Encryption Algorithm)是一种小型的对称加密解密算法,支持128位密码,与BlowFish一样TEA每次只能加密/解密8字节数据.TEA特点是速度快.效率高,实现也 ...
- 扩展ArcGIS API for Silverlight/WPF 中的TextSymbol支持角度标注
原文 http://blog.csdn.net/esricd/article/details/7587136 在ArcGIS API for Silverlight/WPF中原版的TextSymbol ...
- mybatis第一个入门demo
学习框架技术,一般先写个demo,先知道是什么,然后在知道为什么,这也是进步的一种. 源码链接:http://pan.baidu.com/s/1eQJ2wLG
- C#透过PerformanceCounter取得特定Process的CPU使用率
- hdu 3954 Level up(线段树)
题目链接:hdu 3954 Level up 题目大意:N个英雄,M个等级,初始等级为1,给定每一个等级须要的经验值,Q次操作,操作分两种,W l r x:表示l~r之间的英雄每一个人杀了x个怪物:Q ...
- Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessException
异常Log: Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessE ...