滚动
不间断向上滚动
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1><img src="http://www.zbeol.com/down/js/images/12460764740.jpg"><img src="http://www.zbeol.com/down/js/images/12460764741.jpg"><img src="http://www.zbeol.com/down/js/images/12460764742.jpg"><img src="http://www.zbeol.com/down/js/images/12460764743.jpg"><img src="http://www.zbeol.com/down/js/images/12460764744.jpg"></div>
<div id=demo2></div>
</div>
<script>
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
|
图片横向不间断滚动
翻屏滚动
下拉菜单
Jquery Tool页面组件库
"jQuery Tools 是一套非常优秀的 Web UI 库，包括 Tab 容器，可折叠容器，工具提示，浮动层以及可滚动容器等等，可以为你的站点带来非同寻常的桌面般体验，这套工具的主要作用是显示内容，这是绝多多数站点最需要的东西。
和别的 Web UI 库不同，别的 UI 库很多是面向行为的，如拖放，滚动，表格排序，可拖放窗口等等，它们更适合于 富 Web 应用，如 Email 客户端，任务管理，图片组织整理等。而 jQuery Tools 主要面向内容展示，因此更适用于单纯的内容型网站。
jQuery Tools 使用也很简便，只需几行调用代码即可，其官方站点包含大量演示和调用代码可以参考。
应用案例：www.zbjg.com 代码示例：
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#scrollDiv").scrollable({hoverClass: 'hover',vertical: true, mousewheel: true}).circular().mousewheel().autoscroll({interval:3000,steps:2});
$("ul.tabs").tabs("div.panes > div",{event:'mouseover'});
$("div.scrollable").scrollable({hoverClass: 'hover'}).circular().navigator().mousewheel().autoscroll({steps:1,interval:3000});
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
|
ＩＥ ＰＮＧ ＦＩＸ
DD_belatedPNG Jquery Png
