效果：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. .NET开发笔记（二十三） 谷歌地图下载

    关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...

  2. 关于printf错用格式化字符串导致double和long double输出错误的小随笔

    [题外话] 以前用HUSTOJ给学校搭建Online Judge,所有的评测都是在Linux下进行的.后来为了好往学校服务器上部署,所以大家重新做了一套Online Judge,Web和Judge都是 ...

  3. Web3DGame之路（三）分析babylonjs

    BabylonJS的例子十分详实 http://doc.babylonjs.com/tutorials Babylonjs的学习比较顺畅,开始做一些深入分析   一.语言选择 首先是js还是ts的问题 ...

  4. iOS block种类和切换

    block 分为三种 NSGlobalBlock,NSStackBlock, NSMallocBlock. NSGlobalBlock:类似函数,位于text段: NSStackBlock:位于栈内存 ...

  5. Atom使用纪要

    一直在更新的原文地址奉上,欢迎PR:Atom使用纪要 官网地址: atom.io 目前(2015/7/29)Atom主题已有725个:Package已有2394 简单交代背景 Atom 是 Githu ...

  6. TODO：浅谈pm2基本工作原理

    TODO:浅谈pm2基本工作原理 要谈Node.js pm2的工作原理,需要先来了解撒旦(Satan)和上帝(God)的关系. 撒旦(Satan),主要指<圣经>中的堕天使(也称堕天使撒旦 ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (28) ------ 第五章 加载实体和导航属性之测试实体是否加载与显式加载关联实体

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-11  测试实体引用或实体集合是否加载 问题 你想测试关联实体或实体集合是否已经 ...

  8. Oracle 中 union 和union all 的简单使用说明

    1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...

  9. Java针对数据库增删改查代码

    package com.bank.abc; import java.beans.PropertyVetoException; import java.sql.Connection; import ja ...

  10. JS.中文乱码，Jsp\Servlet端的解决办法

    JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21|  分类: Extjs |  标签:encodeuricomponent  乱码  urldecoder   ...