效果：http://hovertree.com/texiao/jquery/64/

效果图如下：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery带按钮向上滚动向下滚动代码 - 何问起</title><base target="_blank" />

<link href="http://hovertree.com/texiao/jquery/64/css/myScroll.css" rel="stylesheet" type="text/css" />

<script src="http://down.hovertree.com/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="http://hovertree.com/texiao/jquery/64/js/jq_scroll.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$("#HoverTreeScroll").Scroll({ line: 1, speed: 500, timer: 3000, up: "but_up", down: "but_down" });

});

</script>

</head>

<body>

<div class="hovertreeinfo"><h2>jQuery带按钮向上滚动向下滚动</h2>

可以手动控制滚动，放上鼠标就停止自动滚动。

<a href="http://hovertree.com/h/bjaf/gundong.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>

</div>

<div class="hovertreebox">

<div id="HoverTreeScroll">

<ul>

<li><h3><a href="http://hovertree.com/h/bjaf/6sm1esjw.htm" class="linktit">jQuery实现收起展开功能</a></h3> <div>受到网店的影响，服装店的生意逐渐有所下降，老板找何问起去谈，大概是准备跟上网购潮流... </div></li>

<li><h3><a href="http://hovertree.com/h/bjaf/gundong.htm" class="linktit">不停转动向上滚动可控制向上向下滚动特效</a></h3> <div>DIV CSS JS自动不断向上一个一个滚动可控制向上向下滚动特效... </div></li>

<li><h3><a href="http://hovertree.com/h/bjaf/5f5eiagg.htm" class="linktit">jquery奔跑吧兄弟特效</a></h3> <div>HTML5/CSS3奔跑动画DEMO演示,生命在于运动，奔跑吧兄弟！ </div></li>

<li><h3><a href="http://hovertree.com/h/bjaf/yuyihua.htm" class="linktit">HTML5为什么火</a></h3> <div>H5拥有服务器推送技术，能让用户拥有更好的网页上的实时聊天... by 何问起 hovertree.com </div></li>

<li><h3><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" class="linktit">我的第一个Bootstrap页面</a></h3> <div>响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机... </div></li>

<li><h3><a href="http://hovertree.com/code/jquery/dfkh88e4.htm" class="linktit">jquery同时改变悬停行和列背景色</a></h3> <div>表格悬停效果。当鼠标悬停到某个单元格上，该单元格所在的行和列背景色都变化... </div></li>

</ul>

</div>

<div class="scroltit"><div class="updown" id="but_down">向上</div><div class="updown" id="but_up">向下</div></div>

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/gundong.htm

特效：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery带控制按钮向上和向下滚动文本列表的更多相关文章

  1. JS如何判断鼠标滚轮向上还是向下滚动

    前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...

  2. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  3. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  4. jquery无缝间歇向上滚动(间断滚动)

    jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...

  5. js-scroll判断页面是向上滚动还是向下滚动

    原理:那当前的scrollTop和之前的scrollTop对比 如果变大了,表示向下滚动(scrollTop值变大): 如果变小了,表示向上滚动(scrollTop值变小). 方法一:js代码: $( ...

  6. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  7. jquery带参插件函数的编写

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  8. 移动端UL列表无法平滑向下滚动问题

    问题说明: 移动端向上滑动后,,列表无法自动滚动到底部~~而是类似屏幕"沾手"的效果(手离开屏幕直接停止在当前~列表不会自动向下滚动一段) 问题原因: 页面中存在如下代码: 当前页 ...

  9. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

随机推荐

  1. Nodejs之MEAN栈开发（三）---- 使用Mongoose创建模型及API

    继续开扒我们的MEAN栈开发之路,前面两节我们学习了Express.Jade引擎并创建了几个静态页面,最后通过Heroku部署了应用. Nodejs之MEAN栈开发(一)---- 路由与控制器 Nod ...

  2. iOS开发系列--视图切换

    概述 在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单.在iOS开发中常用的视图切换有三种,今天我们将一一介绍: UITabBarController ...

  3. Rxjava异常处理

    异常处理 在Rxjava订阅的Observable有时会抛出异常,在RxJava中有两大类策略,一个是准备备用的Observable,在发生异常时将subscriber订阅到新的Observable上 ...

  4. 详解 JavaScript的 call() 和 apply()

    定义 ECMAScript规范为所有函数都包含两个方法(这两个方法非继承而来), call 和 apply .这两个函数都是在特定的作用域中调用函数,能改变函数的作用域,实际上是改变函数体内 this ...

  5. SQL分页

    --第一种分页(TOP方式)-- select * from T_Sys_User where User_Id in ( User_Id from T_Sys_User where User_Id n ...

  6. Highchart.js

    Highcharts所有的源代码及例子均可通过官网下载得到.初学者只需要简单的修改官方提供的例子即可了解Highcharts. 下载 最新版本:Highcharts 3.0.10.Highstock ...

  7. jquery中on/delegate的原理

    jquery中on/delegate的原理 早期版本中叫delegate, 后来有过live函数,再后来统一用on.下面的方法等效: // jQuery 1.3 $(selector).(events ...

  8. 设有一数据库，包括四个表：学生表（Student）、课程表（Course）、成绩表（Score）以及教师信息表（Teacher）。

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...

  9. java 成长之路

    分享总结 title: java 成长之路 tags: grammar_cjkRuby: true 经验差异 1-3年 要求 建议 3-5年 建议 5年+ 经验差异 最近一年比较忙,经历了创业公司的倒 ...

  10. Oracle_SQL函数-分组函数

    分组函数 什么是分组函数 分组函数作用于一组数据,并对一组数据返回一个值 组函数类型:主要有6种 AVG - 平均 COUNT - 计数 MAX - 最大 MIN - 最小 SUM - 求和 STDD ...