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> ...
随机推荐
- scheme 宏macro写法
scheme里的宏不同的实现有不同的写法: 1.mzscheme的define-macro (mzscheme也就是pltschme,也就是drracket,没有define-macro这个关键字) ...
- 剑指offter-面试题7.用两个栈实现队列
题目.用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail和deleteHead 分别完成在对尾插入节点和在队头删除节点. 该队列类模板如下: template <typ ...
- 今日成长笔记2016-11-18 - 关于java开发
好久没有写今日成长笔记了,要记得上一次写笔记还是2016-09-05,今天心血来潮,写一写最近发生在自己身上的事情,以后我要坚持每天写日记.我承认自己身上的确或多或少的存在不足,现在把它们抛出来,并记 ...
- BestCoder Round #14 B 称号 Harry And Dig Machine 【TSP】
称号:Harry And Dig Machine 哈哈 最终涨边粉色了,不easy呀.顺便写一道题解吧 题意:给一个m*n的矩阵,然后当中最多由10个有值,求总左上角把全部的值都拿上回到左上角的最小 ...
- iOS 字体设置
使用无衬线字体 body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } iOS 4 ...
- AC自动机跟随Kuangbing学习笔记
http://www.cnblogs.com/kuangbin/p/3164106.html kuangbin的博客 第一段代码基本是COPY kuangbin的.. 1.HDU 2222 Keywo ...
- mysql源码安装(5.1)
下载mysql源码包并解压.wget http://dev.mysql.com/get/Downloads/MySQL-5.1/mysql-5.1.73.tar.gztar -zxvf mysql-5 ...
- JS判断是不是Decimal类型(正则实现)
备忘: function isDecimal(item) { var obj = $(item); if (obj.length > 0) { if ($(obj).val() != null ...
- bach cello
http://bachlb.blog.163.com/blog/static/1819105120073275251223 一个偶然的机会,卡萨尔斯的父亲来巴塞罗那看卡萨尔斯,并且一起去逛了一间海边的 ...
- PHP学习笔记十三【二维数组】
<?php //二维数组 $arr=array(array(1,2,3),array(4,5,6)); $arr1[0]=array(12,34,65); $arr1[1]=array(34,6 ...