`
hsys
  • 浏览: 290476 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Javascript垂直方向轮播

阅读更多

<style type="text/css">
.cls_container{font-weight:bold;width:100%;font-size:14px;height:40px;overflow:hidden;border-bottom: #98B670 1px dashed;margin-bottom: 10px;line-height:40px;}
.cls_container ul{list-style-type:none;margin:0;padding:0;}
.cls_container ul li{height:40px;line-height:40px;width:100%;float:left;display:inline;}
</style>

<div id="myscroll" class="cls_container">
					[list]
						[*]你有人生的财务报表么?
[*]学习是投资回报率最高的投资

				 	[/list]
				</div>





function $jq(element){
	if(arguments.length>1){
		for(var i=0,length=arguments.length,elements=[];i<length;i++){
			elements.push($jq(arguments[i]));
		}
		return elements;
	}
	if(typeof element=="string"){
		return document.getElementById(element);
	}else{
		return element;
	}
}

var Class={
	create:function(){
		return function(){
			this.initialize.apply(this,arguments);
		};
 	}
};

Function.prototype.bind=function(object){
	var method=this;
	return function(){
		method.apply(object,arguments);
	};
};

var Scroll=Class.create();

Scroll.prototype={
	initialize:function(element,height){
		this.element=$jq(element);
		this.element.innerHTML+=this.element.innerHTML;
		this.height=height;
		this.maxHeight=this.element.scrollHeight/2;
		this.counter=0;
		this.scroll();
		this.timer="";
		this.element.onmouseover=this.stop.bind(this);
		this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);
	},
	scroll:function(){
		if(this.element.scrollTop<this.maxHeight){
			this.element.scrollTop++;
			this.counter++;
		}else{
			this.element.scrollTop=0;
			this.counter=0;
		}
	  
		if(this.counter<this.height){
			this.timer=setTimeout(this.scroll.bind(this),30);
		}else{
			this.counter=0;
			this.timer=setTimeout(this.scroll.bind(this),3000);
		}
	},
	stop:function(){
		clearTimeout(this.timer);
	}
};

分享到:
评论

相关推荐

    轮播,垂直轮播,直线轮播消息

    这需要调整CSS布局,使内容按垂直方向堆叠,并改变轮播切换时的动画效果。 5. 直线轮播:可能指的是无边界的无限轮播,当最后一项过后立即回到第一项,反之亦然,营造出一种无缝循环的效果。这通常通过复制首尾项并...

    js垂直轮播广告幻灯片

    不同于传统的水平轮播,垂直轮播是内容沿着垂直方向进行切换,这在有限的屏幕空间内特别有用,尤其是对于手机和平板电脑等移动设备。垂直轮播广告幻灯片能够充分利用屏幕高度,使用户无需滚动页面即可浏览多条广告...

    移动端轮播图插件无依赖触摸拖拽支持水平垂直方向

    本篇文章将详细讲解基于标题"移动端轮播图插件无依赖触摸拖拽支持水平垂直方向"所涉及的技术点,以及与之相关的JavaScript开发和图片展示处理知识。 首先,移动端轮播图插件的开发通常需要考虑以下几个关键点: 1....

    jQuery垂直轮播焦点图代码.zip

    - 垂直轮播不同于传统的水平轮播,它是在垂直方向上进行切换。这在空间有限或者设计需要时特别有用,可以节省页面宽度,同时增加视觉效果的多样性。 3. **焦点图组件**: - 焦点图通常包括一个主展示区(大图)和...

    day26-Double Vertical Slider(双垂直滑块轮播图)

    对于双垂直滑块,我们需要设置容器的宽度为固定值,高度为自适应,并通过绝对定位让轮播项在垂直方向上堆叠。同时,我们还需要设置过渡效果以实现平滑的滑动动画。以下是一个基本的CSS示例: ```css .slider-...

    jquery实现垂直无限轮播的方法分析

    - 垂直轮播:页面元素在垂直方向上的滚动展示,例如在网页上创建一个垂直方向的幻灯片展示效果。 - 无限轮播:一种轮播机制,允许内容在达到尽头后无缝衔接回到起点,形成一个连续循环播放的轮播效果。 - 方法分析:...

    JavaScript实现简单图片轮播效果

    3. CSS样式设计:通过CSS设置了图片轮播容器的基本样式,如宽度、高度、边距、列表样式、图片垂直对齐方式以及绝对定位等。特别定义了内部容器的相对定位,使其能够容纳ul元素,并通过设置ul的宽度为1000%,使其子...

    js堆叠卡片轮播图插件stackedCards

    2. **滑动模式**:在滑动模式下,卡片会沿着水平或垂直方向平滑移动,形成一种连续滚动的视觉效果。 3. **扇形模式**:扇形模式则更加独特,卡片在切换时仿佛是从中心点向外展开或向内收拢,呈现出扇子般的动态视觉...

    vertical-demon轮播图片超出盒子.zip

    "vertical-demon轮播图片超出盒子.zip"是一个包含实现垂直方向轮播图片效果的资源包。这个项目可能是一个网页设计中的组件,用于展示多张图片并以垂直滚动的方式进行切换,这种效果在很多网站和应用中都有应用,尤其...

    简单竖向轮播图.zip

    竖向轮播图,顾名思义,是图片或内容在垂直方向上进行滑动展示的一种设计元素,常用于网站的首页或产品展示区域,以吸引用户注意力并展示多张内容。 创建一个简单的竖向轮播图,你需要掌握以下几个核心概念和技术:...

    JavaScript实现图片轮播特效

    具体来说,我们可以设定一组图片按照水平或垂直方向排列,然后在某个时刻改变图片显示区域的水平或垂直位置,使得新的图片进入可视区域。在实现上,这通常涉及到以下几个步骤: 1. **图片容器布局**:创建一个容器...

    bootstrap轮播实例

    7. **JavaScript插件**:如果需要更复杂的交互,比如动态添加或删除轮播项,可以使用Bootstrap的JavaScript插件API来操作轮播。 以下是一个基本的Bootstrap轮播实例HTML代码示例: ```html ...

    轮播竖.rar

    【标题】"轮播竖.rar" 提供的是一种纯JavaScript实现的竖向轮播效果,适用于需要在网页中展示多张图片或内容并希望以垂直滚动方式切换的场景。这种轮播设计通常用于移动端或者空间有限的界面,因为它能够有效地利用...

    上下滚动的轮播条

    这可能包括调整轮播条的宽高比例,更改滚动方向,甚至在某些情况下采用水平滚动。 8. accessibility(无障碍性):考虑到可访问性,确保键盘用户和屏幕阅读器用户也能方便地使用轮播条。这可能涉及到添加`tabindex`...

    图片轮播,网页图片滚动

    图片滚动的效果不仅限于水平方向,也可以是垂直方向,或者结合多维度的变换,如缩放、旋转等。此外,为了提高可访问性和用户体验,轮播通常会配备导航点或箭头,用户可以通过点击这些元素手动切换图片。有些轮播还会...

    强大的轮播图效果,各种不同的效果

    7. **垂直滑动**:除了常规的水平滑动外,Slick还支持垂直方向的轮播效果。 8. **多列布局**:允许在一个轮播图中展示多列内容,比如在商品展示时,一行可以显示多个商品图片。 9. **自适应高度**:根据内容自动调整...

    FoxSlider拖拽轮播库

    3. **多方向支持**:不仅限于水平方向的轮播,也支持垂直方向的轮播,适应不同的布局需求。 4. **动画效果**:提供多种过渡动画效果,如淡入淡出、滑动等,使轮播过程更显流畅。 5. **自定义样式**:允许开发者通过...

    移动端 swiper轮播做下拉加载上拉回到顶部,上下左右轮播功能

    3. **上下左右轮播**:传统的Swiper主要支持左右滑动,但这里提到的“上下左右轮播”意味着Swiper不仅支持水平方向的切换,也支持垂直方向的切换,这为设计更复杂的布局提供了可能。用户可以按照任意方向滑动,增加...

    jQuery轮播图插件jCarousel

    3. **垂直滑动(Vertical Slide)**:不同于常规的水平滑动,内容沿垂直方向进行切换。 4. **连续滚动(Continuous Loop)**:轮播图在到达最后一项后无缝返回到第一项,形成无限循环的效果。 5. **自动播放(Auto ...

    react native 轮播组件

    2. **横竖轮播**:组件不仅支持常见的横向轮播,还支持垂直轮播,使得开发者可以根据设计需求灵活调整轮播方向。 3. **卡片样式**:卡片样式是一种常见的轮播表现形式,每个轮播项被封装成一个卡片,可以有过渡动画...

Global site tag (gtag.js) - Google Analytics