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();
            }
            });
    }

时间： 2024-10-21 15:02:38

js跑马灯效果的相关文章

Js跑马灯效果 && 在Vue中使用

DEMO: <!DOCTYPE html><html> <head> <title>滚动播报</title> <meta charset="UTF-8"> <style> .content { height: 60px; background-color: #2c2c34; overflow: hidden; } .content ul { white-space: nowrap; } .content

jCarousel Lite 实现图片跑马灯效果

官方网站:http://www.gmarwaha.com/jquery/jcarousellite/ demo: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquer

Vue教程02(跑马灯效果案例) &#253148;

原文: http://blog.gqylpy.com/gqy/423 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

VUE小案例--跑马灯效果

自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

横冲直撞vue(第四篇)：v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox

练习：WinForm 跑马灯效果+Timer

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace Timer { public partial class Form1 : Form { public Form1

Android TextView跑马灯效果

TextView跑马灯简单效果 <!--简单示例--> <TextView android:text="@string/longWord" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView1" android:ellipsize="marquee&quo

android 怎么实现跑马灯效果

自定义控件 FocusedTextView, 使android系统误以为它拥有焦点 1 public class FocusedTextView extends TextView { 2 public FocusedTextView(Context context, AttributeSet attrs, int defStyle) { 3 super(context, attrs, defStyle); 4 // TODO Auto-generated constructor stub 5 }

框架，锚点，背景音乐，嵌入视频和跑马灯效果

框架,iframe有点过时,会在部分浏览器出现一些奇怪的问题:设置三个属性: 1.src,框架默认的显示路径 2.name,让超链接的target属性与name值相等,就可以将超链接网页在框架中打开 3.框架的宽度和高度 站点:实际上就是一个文件夹,单独起了一个名字.统一来管理所有页面,就是一个站点,称之为网站 锚点: 书写格式:<a href="#锚点位置对应的名称">内容</a> --#是在本页面中 <a name="锚点位置的名称"