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

js 实现div里面的内容滚动,并可以通过按钮控制

阅读更多

按照步骤来:

 

一  css 样式控制:

.in_f {
	CLEAR: both; HEIGHT: 46px
}
.in_f .a {
	BACKGROUND: url(../images/i12.gif) no-repeat left 50%; FLOAT: left; WIDTH: 160px; HEIGHT: 46px
}
.in_f .b {
	FLOAT: left; WIDTH: 17px; HEIGHT: 46px
}
.in_f .centerBox {
	DISPLAY: inline; FLOAT: left; MARGIN: 0px 10px; OVERFLOW: hidden; width:498px; HEIGHT: 232px
}
.in_f .centerBox IMG {
	MARGIN: 0px 3px
}
.in_f .d {
	FLOAT: left; WIDTH: 16px; HEIGHT: 46px
}
.in_f .b IMG {
	CURSOR: pointer
}
.in_f .d IMG {
	CURSOR: pointer
}

 

 

二:准备js

    jQuery.js

    jquery-ui-1.8.6.custom.min.js

    MSClass.js  ----这个就是滚动的操作js

 

   

<!--  引入js 和 css -->  
 <!--  控制滚动的按钮  -->
<img id="left" title="向左滚动" alt="向左滚动" style="cursor: pointer;" src="images/ico1.gif" width="13" height="13" />

<img id="right" title="向右滚动" alt="向右滚动" style="cursor: pointer;"  src="images/ico2.gif" width="13" height="13" />
<br><br><br><br>
<!--  滚动体  -->
<DIV id="div" class=in_f>
                 <DIV  class=centerBox id=marqueedivcontrol>

                  <!-- 这里放你想要滚动的东西。。可以是图片也可以是table..但是记得里面的东西的宽度要超过div的宽度...不然就不会滚动。。也没必要滚动 -->
                    <tr>
					    <td width="166" align="center" valign="top"><table width="160" border="0" cellspacing="0" cellpadding="0">
					      <tr>
					        <td height="60" colspan="2" align="center" valign="middle"><img src="images/tu1.gif" width="160" height="46" /></td>
					      </tr>
                      <table>

                </DIV>
 </DIV>

<!--  下面是滚动的初始化代码 -->
<SCRIPT type=text/javascript>
			var marquee=new Marquee("marqueedivcontrol");
			marquee.Direction="left";
			marquee.Step=1;
			marquee.Width=498;
			marquee.Height=232;
			marquee.Timer=20;
			marquee.ScrollStep=-1;//此句禁止鼠标控制
			// 查看了 MSClass.js 的源码,,,你会发现 derection 2 表示左移动  3表示右移动..0 表示 top 
			// 反正注意看源码就好了...
			$("#left").click(function(){marquee.Direction=2}); 
			$("#right").click(function(){marquee.Direction=3});
			$("div").mousemove(function(){marquee.Direction=0});
			$("div").mouseout(function(){marquee.Direction=2});
			marquee.Start();
	</SCRIPT>

 

最后的效果就是  鼠标点击按钮控制内容的滚动,,当鼠标移动到内容上面就停止,,移开就直接移动 

 

嘿嘿...我也上传 JS 包...也做了一个dome,虽然有点粗糙...但是效果实现了!  嘿嘿。。....吃饭去了

 

今天有空。。。更新了下功能。刚刚在开发中也碰到,点击的时候。。不仅要移动,而且要加快移动1秒,再还原到原来的速度,,,,,,,,

 

   下面的对上面代码的一次升级,

   

 $("#left").click(function(){  //把上面的代码替换成这样
				marquee.Direction=2;
				boo = true;
				marquee.Step=10; //加快移动步伐
				if(boo){
					setTimeout(stoptime,500);
				}
			}); 

			$("#right").click(function(){ //把上面的代码替换成这样
				marquee.Direction=3
 				boo = true;
				marquee.Step=10; //加快移动步伐
				if(boo){
					setTimeout(stoptime,500);
				}
			});

 

 

 //停止加快
		        function stoptime(){
		           marquee.Step=1;
		    	   boo = false; 
		        }

 

   O(∩_∩)O哈哈~。。这样就可以实现,点击移动的时候,,并且可以加速移动下,

 

  请看我最新上传的      dome2.rar

 

  里面的代码很清楚了。。嘿嘿。。。。。。。。。

  • js.rar (73.6 KB)
  • 下载次数: 77
分享到:
评论
1 楼 lry123456 2018-07-11  
,没用啊

相关推荐

    通过js实现图片自动滚动,也可以手动控制滚动。

    在JavaScript(简称JS)编程中,实现图片自动滚动和手动控制滚动的功能是一项常见的需求,尤其在网站设计和用户体验优化中。这个功能可以让用户在有限的屏幕空间内查看更多的内容,提高信息展示的效率。以下是对这个...

    JS 按钮控制图片左右无缝滚动

    ### JS按钮控制图片左右无缝滚动实现方法 #### 一、技术背景与应用场景 在现代Web开发中,利用JavaScript实现各种动态效果是常见的需求之一。其中,“JS按钮控制图片左右无缝滚动”这一功能常用于网站轮播图、产品...

    JS控制div跳转到指定的位置的几种解决方案总结

    使用这种方法可以实现平滑滚动效果,用户体验较好。但它需要引入jQuery库,且初次加载时可能会有轻微的延迟。 3. window.scrollTo方法 window.scrollTo方法允许开发者直接指定滚动目标的位置,可以精确控制滚动条的...

    jQuery实现将div的滚动条滚动到指定位置

    在网页开发中,jQuery是一个非常...总的来说,通过jQuery的`animate()`方法,我们可以轻松地实现div滚动条的动态控制,为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。

    DIV+CSS+JAVASCRIPT实现图片滚动效果

    在实现图片滚动效果时,Div可以作为图片容器,将多张图片组织在一起,并通过CSS设置其大小、位置和样式。例如,我们可以创建一个Div,设定其宽度为显示一张图片的大小,高度根据需要调整,然后通过CSS的overflow属性...

    js+div实现文字滚动和图片切换效果代码.docx

    总结来说,通过JS+Div实现文字滚动和图片切换,主要涉及到JavaScript事件处理、DOM操作、CSS布局和样式控制。理解这些基本概念和技术,开发者可以根据需求创建各种动态效果,提升网页的视觉吸引力和用户体验。在实际...

    javascript+div图片无缝滚动

    通过以上分析可以看出,“JavaScript + div 图片无缝滚动”的实现不仅需要对HTML、CSS和JavaScript有深入的理解,还需要灵活运用各种技巧来提升用户体验。希望本文能帮助读者更好地掌握这项技术。

    滚动div,实现动态页面切换功能,实现图书翻页

    当我们将div设置为滚动条,用户可以通过滚动查看超出可视区域的内容。在本案例中,我们将利用JavaScript和CSS来扩展这个功能,实现不依赖传统滚动条的动态页面切换,模拟图书翻页效果。 一、基础准备 在开始之前,...

    js特效按钮控制图片左右自动滚动

    通过以上步骤,你可以实现一个基本的“js特效按钮控制图片左右自动滚动”的功能。当然,实际项目中可能还需要考虑更多细节,如错误处理、性能优化等。不断学习和实践,你将能够创建更加复杂和精美的JavaScript特效。

    js图片滚动按钮控制图片左右自动滚动

    在JavaScript(JS)编程中,实现图片滚动按钮控制图片左右自动滚动是一项常见的需求,尤其在网页设计和用户体验优化中。这种功能可以为用户提供更直观、交互性更强的图像浏览体验。下面将详细介绍如何利用JavaScript...

    jQuery实现带控制按钮的图片滚动特效(可多个)

    "jQuery实现带控制按钮的图片滚动特效(可多个)"是一个常见的交互设计实践,它利用jQuery库的强大功能,为用户提供了一种流畅且可控制的图片展示方式。jQuery是一个轻量级、高性能的JavaScript库,简化了DOM操作、...

    javascript实现图片左右滚动效果【可自动滚动,有左右按钮】

    给定的文件是关于如何使用JavaScript实现一个图片滚动效果的说明,其中包括自动滚动功能,以及带有左右按钮控制的图片浏览界面。这一功能是基于名为scrollPic.js的JavaScript插件实现的。文章还提到,相应的示例源码...

    javascript滚动图片按钮控制图片左右自动滚动

    在JavaScript编程中,实现“图片滚动按钮控制图片左右自动滚动”的功能是一项常见的需求,尤其在网页设计和用户体验优化中。这种技术可以增加交互性,使用户能够更方便地浏览一系列图片。下面我们将深入探讨如何使用...

    js实现带缩略图的图片切换效果(有控制按钮)

    在JavaScript编程中,实现一个带有缩略图的图片切换效果并配备控制按钮是一项常见的需求,尤其是在网站设计和用户界面开发中。这样的功能可以为用户提供更好的交互体验,让他们更轻松地浏览一组图片。以下是对这个...

    jQuery按钮控制文字上下滚动代码.zip

    在本文中,我们将深入探讨如何使用jQuery来实现一个按钮控制的文字上下滚动效果,这是一个常见的JavaScript特效,常用于网站中的新闻滚动、公告展示等场景。首先,我们先了解一下jQuery库及其基本用法,然后逐步解析...

    js实现横向滚动图片+加速滚动功能

    同时,为了实现“加速滚动”,我们可以设定一个变量来记录用户的滚动方向,当用户点击向前或向后翻页按钮时,增加或减少滚动速度,使得翻页过程更加流畅且具有动态感。 具体实现步骤如下: 1. **HTML布局**:创建...

    DIV无缝滚动

    通过选择器找到要滚动的`&lt;div&gt;`,然后利用`.animate()`方法来改变其`top`或`left`位置,从而实现内容的平滑移动。 4. **JS特效**:为了实现无缝,我们需要在滚动到最后一项后,将第一个项目移动到最后,形成一个...

    Js切换图片+图片滚动带底部和左右按钮

    在JavaScript(Js)中实现图片切换与图片滚动带底部和左右按钮的功能,是网页动态效果设计中的常见需求。这样的功能可以提升用户体验,使用户能够轻松浏览一组图片或内容。以下将详细阐述如何实现这一功能。 首先,...

Global site tag (gtag.js) - Google Analytics