信息滚动

1、单行信息滚动

setInterval(this.marquee,3000);
marquee: function(){
    var prizeul=$(‘#prizeul‘);//定义滚动区域
    var fli=prizeul.find(‘li:first‘);
    var flih=fli.height();//每次滚动高度
    fli.animate({
           marginTop:-flih+‘px‘
        },600,function(){//通过取负margin值,隐藏第一行
        fli.css(‘marginTop‘,0).appendTo(prizeul);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
    })
},

2、鼠标移进停止滚动,移出继续滚动

var vid = setInterval(marquee,3000);
$(‘.J-scroll‘).mouseenter(function(){
    clearInterval(vid);
}).mouseleave(function(){
    vid = setInterval(marquee,3000);
});
时间: 2024-08-09 12:05:32

信息滚动的相关文章

JS魔法堂:通过marquee标签实现信息滚动效果

一.前言   有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. 二. marquee标签 的基础知识 示例: <marquee behavior="scroll" direction="left" loop="-1" scrollAmount="12" scrollDelay="

jquery 页眉单行信息滚动显示

JSP: 以下是控制滚动的样式,将滚动的内容查询出来,放在一个div 或者别的容器里面,我这里使用的是<dt> <style> #newCglist{width:300px;height:14px;line-height:14px;overflow:hidden} #newCglist li{height:14px;padding-left:10px;} </style> 以下是滚动内容展示的容器 <dt class="positionrel"

信息滚动效果介绍

文字信息滚动是经常用到的效果!单独的marquee的html标签就已经实现了这种文字滚动的效果,但由于效果太单一,现在使用这种原始的效果已经很少了!下面我就介绍一些比较常见的文字滚动效果! 首先介绍的是原始的marquee标签实现的滚动的效果! 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

信息滚动制作

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>向上无缝滚动</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 慕课网课

公告信息滚动功能

直接怼功能代码: 这是第一种从下出现的方法: var time;//声明定时器变量clearInterval(time);//初始清除定时器time = setInterval(function() {//创建定时器 var $ul = $("#gg");//利用jquery获取公告的ul $ul.animate(3000,function(){//给ul动画,3s $ul.append($ul.find("li:first"));//将获取到的第一个li添加到ul

HTML5商城开发一 楼层滚动加载数据

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300) <div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;"> <ul clas

关于js中的scrollTop

最近想写一个信息滚动的demo,但是一直没有实现,最后查找资料,看了网上的一些例子,之后才明白原因:没有清楚scrollTop的真正含义 html代码: <div class="info-area" id="area">              <ul id="list">                     <li><a href="">菲律宾渔民拖走黄岩岛附近多个中国浮

JavaScript进阶知识点(慕课)

JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等)  一. 数组 var myarray=new Array(); 二. 函数 function 函数名(){ 函数体://完成某一功能的代码段} ps:函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名.函数的调用分两种情况:1.在<script>标签内调用 2.在HTML中调用,如通过点击按钮后调用定义好的函数.可以通

QQ概念版(WPF制作)

984 QQ概念版 编辑 QQ 概念版是腾讯首款NUI(自然用户交互)产品,全面实现了多点触摸操作.是腾讯利用微软最新一代的客户端展现层技术--WPF,打造的IM产品. 中文名 QQ 概念版 游戏类别 聊天软件NUI 游戏平台 QQ 开发商 腾讯 发行商 腾讯 目录 1简介 2系统要求 3用户评测 4产品介绍 5评测数据 6更新日志 ? Beta 1.3 ? Beta 1.2 ? Beta 1.1 1简介编辑 在实现IM的基础功能外,QQ概念版还推出了动感相框.动态背景.多Tab聊天窗口.3D交