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> ...
随机推荐
- Android APP开发需求文档范本
Android APP开发需求文档范本 软件需求文档格式的标准写法 1.引言 1.1 编写目的 • 阐明开发本软件的目的: 1.2 项目背景 • 标识待开发软件产品的名称.代码: • 列出本项目的任 ...
- 2014第2周四部署环境&买火车票
2014第2周四部署环境&买火车票 今天遇到mysql一个问题:要把两个包含不同数据库的绿色mysql安装包中的数据库文件合并到一个数据库中,之前在sqlserver下操作很简单,只需要分离. ...
- Contains Duplicate 解答
Question Given an array of integers, find if the array contains any duplicates. Your function should ...
- Vitaliy and Pie(模拟)
Vitaliy and Pie Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Su ...
- LED音乐频谱之输出数据处理
转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/38023539 一.PWM调节 1.初始化 void DACInit() { C ...
- Hive的UDF实现及注意事项
Hive自身查询语言HQL能完毕大部分的功能,但遇到特殊需求时,须要自己写UDF实现.下面是一个完整的案例. 1.eclipse中编写UDF ①项目中增加hive的lib下的全部jar包和Hadoop ...
- linux光盘、U盘的挂载与卸载
mount [-t vfstype] [-o options] device dir1.-t vfstype 指定文件系统的类型,通常不必指定.mount 会自动选择正确的类型.关于一些常用的文件:i ...
- 物理机与虚拟机IP互ping通,而互ping主机名不通
问题描述:虚拟机信息:VMware-workstation 10安装RHEL5.8操作系统.hostname:rhel201.com IP:192.168.1.201 物理机系统:windows 7主 ...
- 2台linux机器免密码互相登陆
一,如何使2台机器不需要密码互相登陆到对方呢? 这个和使用密钥的登陆Linux系统非常相似,也是将自己的公钥传到要登录的服务器上去修改权限即可. 1,A机器: 执行ssh-keygen命令,一路回车. ...
- [转载]android中The connection to adb is down,问题和解决
原网址:http://blog.sina.com.cn/s/blog_5fc93373010164p3.html 今天我出现了第3个错误,于是百度了一下.感觉这篇博客对我挺有帮助,推荐给大家.以下是原 ...