jQuery文字輪播帶向上向下滾動按鈕
編輯：網頁特效代碼
效果：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>
效果圖如下：
代碼如下：<!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>
- 上一頁:純CSS3光標懸停圖片上升顯示描述
- 下一頁:CSS3實現仿小米官網菜單
小編推薦
熱門推薦