效果：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. ABP理论学习之Web API控制器（新增）

    返回总目录 本篇目录 介绍 AbpApiController基类 本地化 审计日志 授权 工作单元 其他 介绍 ABP通过Abp.Web.ApiNuget包集成了 ASP.NET Web API控制器 ...

  2. io.js入门（三）—— 所支持的ES6（下）

    (接上篇) 标准ES6特性 6. 新的String方法/New String methods 7. 符号/Symbols 8. 字符串模板/Template strings 新的String方法/Ne ...

  3. C#中使用Socket实现简单Web服务器

    上一篇博客中介绍了怎样使用socket访问web服务器.关键有两个: 熟悉Socket编程: 熟悉HTTP协议. 上一篇主要是通过socket来模拟浏览器向(任何)Web服务器发送(HTTP)请求,重 ...

  4. 搭建前端私有npm杂记

    随着前端队伍越来越壮大,项目间共享代码就变得尤为重要.常用的框架/类库没必要在每个项目都放一份,团队内部产出的公共模块也需要有合理的共享机制.现在,用npm管理前端代码已经是业界趋势.楼主尝试用私有n ...

  5. kpvalidate开辟验证组件,通用Java Web请求服务器端数据验证组件

    小菜利用工作之余编写了一款Java小插件,主要是用来验证Web请求的数据,是在服务器端进行验证,不是简单的浏览器端验证. 小菜编写的仅仅是一款非常初级的组件而已,但小菜为它写了详细的说明文档. 简单介 ...

  6. CSharpGL(0)一个易学易用的C#版OpenGL

    +BIT祝威+悄悄在此留下版了个权的信说: CSharpGL(0)一个易学易用的C#版OpenGL CSharpGL是我受到SharpGL的启发,在整理了SharpGL,GLM,SharpFont等开 ...

  7. 《Spark快速大数据分析》—— 第七章 在集群上运行Spark

  8. ## Android 6.0 权限申请 ##

    Android 6.0 权限申请 1. 以前的权限申请(sdk<23) 直接在AndroidManifest.xml中申明即可: <uses-permission android:name ...

  9. JavaScript中的百变大咖～this

    原文链接:http://www.jeffjade.com/2015/08/03/2015-08-03-javascript-this/ JavaScript作为一种脚本语言身份的存在,因此被很多人认为 ...

  10. java线程 公平锁 ReentrantLock(boolean fair)

    一.公平锁 1.为什么有公平锁 CPU在调度线程的时候是在等待队列里随机挑选一个线程,由于这种随机性所以是无法保证线程先到先得的(synchronized控制的锁就是这种非公平锁).但这样就会产生饥饿 ...