广告,消息向上滚动

原理:

  1: 用到定时器setInterval(),动画animate()方法,改变margin-top: 的值;

  2: 用定位时,改变top: 的值;

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<div id="broadcast" class="bar" name="giftactive">
 <div style="float:left"><strong>间隔滚动效果:</strong></div>
 <div id="demo" style="overflow:hidden;height:22px;line-height:22px;">
     <ul class="mingdan" id="holder">
          <li><a href="#" target="_blank">aaaaaa</a></li>
          <li><a href="#" target="_blank">bbbbbb</a></li>
          <li><a href="#" target="_blank">cccccc</a></li>
          <li><a href="#" target="_blank">dddddd</a></li>
          <li><a href="#" target="_blank">eeeeee</a></li>
     </ul>
 </div>
</div>
<script type="text/javascript">
    function AutoScroll(obj) {
         $(obj).find("ul:first").animate({
             marginTop: "-22px"
        }, 500, function() {
             $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
        });
    }
    $(document).ready(function() {
        setInterval(‘AutoScroll("#demo")‘, 1000)
    });
</script>
</body>
</html>
时间: 2024-08-05 17:52:35

广告,消息向上滚动的相关文章

UpMarqueeTextView-模仿淘宝客户端向上滚动的广告条

UpMarqueeTextView一个简单的向上滚动的类似跑马灯效果,项目中用到的时候是接受到推送过来的消息向上滚动一次,没有做动态的gif效果,所以都是一些纯文字的简单记录. UpMarqueeTextView通过实现TextView使用Animator动画来实现,所以需要满足3.0以下的版本需要使用nineold-androids来实现效果,其实原理什么很简单看看代码就能了解. public class UpMarqueeTextView extends TextView implement

高仿京东APP首页“京东快报”自动向上滚动的广告条

转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51013562 本文出自:[顾林海的博客] 前言 上次在京东APP上买东西时,发现首页中间有块叫"京东快报"的栏目,其中广告条能自动向上滚动,效果还不错,看到这个效果,第一个念头就是我能不能实现,于是就诞生了这篇文章. 我们看看实现后的效果: 实现原理 起初看到这个效果时,第一个想法就是向上移动动画+定时器,但当我准备写时发现,滚动时上下文字都是逐渐出来的(有

js制作无缝向上滚动的广告

---------------------------------------------------------------------------------------------------------------css @charset "gb2312";/* CSS Document */ body{ margin:0; margin-top:3px; padding:0; font-size:12px; line-height:20px; color:#333;}.dom

窗口提示,向下滚动(滑动)消失,向上滚动出现

整理了网上的代码,可以用作广告提示等,当页面向下滚动时提示隐藏,当页面向上滚动时提示出现,pc端和手机端都可以使用哦~ /*********************** * 函数:判断滚轮滚动方向 * 参数:event * 返回:滚轮方向 1:向上 -1:向下 *************************/ var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDelta) { d

Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)

在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚动RecylerView,Tab恢复出现.这么做的好处在于,用户能有更多的空间位置去看列表里面的内容. 实现步骤: <?xml version="1.0" encoding="utf-8"?> <android.support.design.widge

练习题:间歇性向上滚动

1 <!DOCTYPE html > 2 <html > 3 <head> 4 <meta charset=utf-8" /> 5 <title>新闻间歇性向上滚动</title> 6 <style> 7 body { 8 font-size: 12px; 9 line-height: 24px; 10 text-algin: center; /* 页面内容居中 */ 11 } 12 * { 13 margin:

向上滚动公告栏

向上滚动公告栏 项目中需要用到类似公告栏的控件,能用的基本不支持多行显示,于是只好自己动手,苦于没有自定义过一个像样的控件,借鉴Android公告条demo,实现了多行向上滚动的控件.在原控件基础之上添加如下功能: 传入数据分页显示 添加Left Drawable 手指触摸事件处理 添加3D动画翻滚效果 效果图 源码 package com.android.view; import android.content.Context; import android.content.res.Typed

图片不断向上滚动

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>        <style type

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料,大多都是基于jquery的,虽然稍作修改就可以用于移动端,但不能实现触摸上下翻滚.所以就去了zepto的官网查看其API,却发现如果要使用zepto的swipe()方法,需要引用其已经封装好的touch.js文件,我就赶紧引用了这个js文件,可在实际测试中,官网给出的touch.js文件