仿京东快报向上滚动的实例

实例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<script src="http://code.jquery.com/jquery-1.11.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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">aaaaaa</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">bbbbbb</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">cccccc</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">dddddd</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>

以上这篇仿京东快报向上滚动的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 仿京东快报向上滚动的实例

    实例如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <div id="

  • Android仿京东快报信息滚动效果

    Android仿京东快报信息滚动效果

    先来看看效果吧,Android仿京东快报信息滚动效果,具体内容如下 (截图效果不是很好,但是差不多出来了) 代码: package com.test.scrolltransptoolbar; import android.content.Context; import android.graphics.Color; import android.os.Handler; import android.text.TextUtils; import android.util.AttributeSet;

  • Android高仿京东垂直循环滚动新闻栏

    Android高仿京东垂直循环滚动新闻栏

    实现思路其实很简单,就是一个自定义的LinearLayout,并且textView能够循环垂直滚动,而且条目可以点击,显示区域最多显示2个条目,并且还有交替的属性垂直移动的动画效果,通过线程来控制滚动的实现. 不多说看效果: 代码实现 我们先来为控件设置自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="JDAdv

  • Android仿京东快报无限轮播效果

    Android仿京东快报无限轮播效果

    我们常用的京东有一个非常好看的效果: 首页的京东快播有一个无限轮播的公告栏,先看效果: 公告内容大概每3s从中间向上滑出,同时下一条内容从底部向上滑动进入.整个过程还伴随有内容的渐变消失,动画效果很流畅. 采用ViewFlipper来实现更为简单. 看看ViewFlipper类官方注释: Simple {@link ViewAnimator} that will animate between two or more views that have been added to it. Only

  • js实现单行文本向上滚动效果实例代码

    复制代码 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, autoStart) {    this.Delay = 10;    this.LineHeight = 20;    this.Amount = 1;     this.Direction = "up";    this.Timeout = 1500;    this.Scrol

  • 基于JS实现新闻列表无缝向上滚动实例代码

    当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<

  • Android通过实现GridView的横向滚动实现仿京东秒杀效果

    实现GridView的横向滚动 效果如下图: 具体实现的代码 •1. 主界面布局代码:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"

  • Android 仿京东侧滑筛选实例代码

    Android 仿京东侧滑筛选实例代码

    简单介绍 这个demo写的是仿京东的侧滑筛选页面,点击进入筛选后进入二级筛选,两次侧滑的筛选,还包括ListView+CheckBox滑动冲突,ListView+ GridView显示一行问题解决,接口回调传递数据等 效果图 简单得代码介绍 1.首页侧滑用的是安卓官方V4包中的DrawerLayout <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLa

  • JavaScript仿京东搜索框实例

    JavaScript仿京东搜索框实例

    马上就到双十一了,我们在京东淘宝购物,疯狂剁手的同时,有没有注意到京东的搜索框呢,除了能进行搜索内容以外,它的样式又是如何实现的呢? 下面就分析一下如何实现仿京东的搜索框. 核心分析: JavaScript部分: 1.当文本框获取焦点的时候,div中的字体颜色变为rgb(200,200,200): 2.当文本框失去焦点事件发生时,div中的字体颜色变成原来的样式#989898: 3.当文本框输入内容时,div的属性变为 none,表现效果为文字消失: 4.当清除文本框里面内容时,divdiv的属

  • android仿京东商品属性筛选功能

    android仿京东商品属性筛选功能

    筛选和属性选择是目前非常常用的功能模块:几乎所有的APP中都会使用: 点击筛选按钮会弹出一个自己封装好的popupWindow,实用方法非常简单:两行代码直接显示:(当然初始化数据除外) 这里和以前用到的流式布局有些不一样:流式布局 以前使用的是单个分类,而且也没有在项目中大量实用:这个筛选功能除了数据外几乎都是从项目中Copy出来的: 整个popupWindow布局就是一个自定义的ListView,这个自定义的listview主要是控制listview的高度: 如果数据少的话就是自适应,如果数

随机推荐