jquery实现数字滚动抽奖 jquery 滚动

我们知道滚动的方法有很多种，下面就由我来为大家简洁的介绍一下几种滚动的事件。

例子一：让文字进行滚动(方法)

1、使用标签能让文字进行普通的滚动事件，我们可以设置规定的范围让事物进行滚动。

看截图：

在上面我们利用标签给文字进行铺垫，给div里面的类设置样式，实现文字向前滚动的动画效果。

除此之外，我们还可以利用标签实现更多的功能。我们可以让文字进行实现我们想要的方向，比如在里面的directinotallow=””添加想要的方向：“向上”=up，“向右”=right等，也可以在标签里面设置时间，字体颜色，字体大小，滚动的次数等等。

而且我们还可以利用标签对图片进行滚动：

代码部分：CSS样式

.tugun{

width: 800px;

height:120px;

border: 1px solid #CF0C0F;

}

.tugun img{

width: 200px;

height:100px;

padding-top: 10px;

padding-left: 5px;

}

<div class="tugun">
 <marquee behavior="" direction=""><img src="旋转相册/images/花.jpg" alt=""><img src="旋转相       
 册/images/宇宙.jpg" alt=""><img src="旋转相册/images/1234.jpg" alt=""></marquee>
  </div>

实现的效果：如下图

总结一：在Html中使用标签虽然能实现滚动的效果，但并不能实现在滚动的时候进行控制，只能在代码上控制方向。

2、为了能在页面上实现控制事物的方向，我们提供了使用JS和jQuery的方法进行对页面的控制。在JS和jQuery中利用计时器来对页面的滚动事件进行控制，当然为了能控制方向，我们要给一个按钮。

下面是运用jQuery实现滚动的部分：(老师教的内容)

首先我们给页面布局，然后引入jQuery里面的两个插件，引入插件之后，我们可以对事物的按钮进行操控，这样方便我们用简洁的代码对事物进行滚动的动画效果。

引入插件及其代码：(如图)

页面布局：

<div class="tplb">
       <div class="fztp">
	<ul>
			<img src="旋转/九宫格图片/image/宇宙.jpg" alt="">
			<img src="旋转/九宫格图片/image/花.jpg" alt="">
			<img src="images/img3.jpg" alt="">
			<img src="旋转/九宫格图片/image/1234.jpg" alt="">
			<img src="images/img1.jpg" alt="">
	</ul>
	  <a href="javascript:;" class="prev"></a>
 	  <a href="javascript:;" class="next"></a>
</div>
</div>

学习总结：这样的写法能让我们更快的使用事物的滚动事件。通过这次学习我学会了对事物滚动的几种效果，由于学习的能力还差很多，但我会更加努力的学习。除此之外，我们还可以利用一次计时器跟间隔计时器来完成事物的滚动的效果。但是要注意的是一次计时器只能自己调用自己。另外我希望能和大家一起共进步，一起学习。