效果：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. 使用NServiceBus开发分布式应用

    系列主题:基于消息的软件架构模型演变 NServiceBus 是一个.Net平台下开源的消息服务框架,这类产品有时也被称作ESB(Enterprise Service Bus)--企业服务总线.NSe ...

  2. Web Audio介绍

    Web Audio还是一个比较新的JavaScript API,它和HTML5中的<audio>是不同的,简单来说,<audio>标签是为了能在网页中嵌入音频文件,和播放器一样 ...

  3. 三周，用长轮询实现Chat并迁移到Azure测试

    公司的OA从零开始进行开发,继简单的单点登陆.角色与权限.消息中间件之后,轮到在线即时通信的模块需要我独立去完成.这三周除了逛网店见爱*看动漫接兼职,基本上都花在这上面了.简单地说就是用MVC4基于长 ...

  4. 2013 duilib入门简明教程 -- 结合win32和MFC (16)

        虽然duilib自带在MFC中使用duilib的Demo,但只是MFC窗口和duilib窗口不重叠的情况.如果要在MFC窗口中嵌入duilib控件,或者在duilib控件中嵌入MFC的控件的话 ...

  5. Angularjs1培训

    Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...

  6. SSISDB4：Execution

    Execution是Package或Project的Execution Instance,每次执行都会生成一个唯一的ExecutionID,并记录Execution 执行的结果.在每次Executio ...

  7. 关于xcode导出设置中的一些概念

    Development Certificates:在电脑通过秘钥串生成一个私人秘钥,这就是:CertificateSigningRequest.certSigningRequest 简称CSR,团队中 ...

  8. OpenCASCADE Coordinate Transforms

    OpenCASCADE Coordinate Transforms eryar@163.com Abstract. The purpose of the OpenGL graphics process ...

  9. 学用MVC4做网站六后台管理:6.1.1管理员登录、6.1.2退出

    1.管理员登录 在6.1中已添加控制器[AdministratorController] 在控制器中添加[Login()]action,用来显示登录页面 /// <summary> /// ...

  10. 通过HTTP协议上传文件

         HTTP是很常见的协议,虽然用得很多,但对细节的了解却是很浅,这回通过向服务端上传文件信息来理解细节.网络库的选择:1.WinHTTP是windows下常用的库:2.CURL是广受喜爱的开源 ...