javascript+div+css滚动菜单的实现.
效果图
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Scrollable</title>
<mce:script type="text/javascript"><!--
resizeCallback = function() {
var containerStyle = document.getElementById('scrollable_container').style;
var containerNewWidth = document.body.clientWidth - 32;
containerStyle.width = containerNewWidth + 'px';
document.getElementById('scrollable_content').style.left = '0px';
}
window.onresize = resizeCallback;
var scroll = false;
function scrollToRight(speed, ele) {
var container = ele.nextSibling;
var content = container.firstChild;
var containerLeft = container.offsetLeft - 16;
var contentLeft = content.offsetLeft;
var minus_result = containerLeft - contentLeft;
speed = minus_result > speed ? speed : (minus_result > 0 ? minus_result : 0);
if(scroll && minus_result > 0) {
content.style.left = contentLeft + speed;
setTimeout(function(){scrollToRight(speed, ele)}, 50);
}
}
function scrollToLeft(speed, ele) {
var container = ele.previousSibling;
var content = container.firstChild;
var containerRight = container.offsetWidth;
var contentRight = content.offsetLeft + content.offsetWidth;
var minus_result = contentRight - containerRight;
speed = minus_result > speed ? speed : (minus_result > 0 ? minus_result : 0);
if(scroll && minus_result > 0) {
content.style.left = content.offsetLeft - speed;
setTimeout(function(){scrollToLeft(speed, ele)}, 50);
}
}
var contentWidth = 0;
// --></mce:script>
<mce:style type="text/css"><!--
body{background: #778899;}
.author-information{background: #BBBBBB; width: 500px; height: 150px; text-align: left; padding: 0 5px; }
.author-information-lab
相关文档：
Js学习（四）
如果当前正在执行的是一个方法，则执行上下文就是该方法所附属的对象，如果当前正在执行的是一个创建对象（就是通过 new 来创建）的过程，则创建的对象就是执行上下文。
如果一个方法在执行时没有明确的附属于一个对象，则它的执行上下文是全局对象（顶级对象），但它不一定附属于全局对象。全局对象由当前� ......
在今天网络开发方面，JavaScript起了很关键的作用；像jQuery, MooTools, Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随着Rich Internet Applications(RIA)的面世及迅速应用，书写更强大，更坚实可靠的JavaScript的需要日益迫切。（51CTO编辑：当前Web开发界普遍认为JavaScript将会成为 ......
6、基于对象的JavaScript语言
JavaScript是基于对象的的语言，不像面向对象有抽象、继承、重载等有关面向对象的功能，但是它还是具有面向对象的基本特征，它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档。
对象的基础知识：
对象是由属性和方法两个基本元素组成。一个对 ......
JavaScript允许创建和打开代表HTML文本, form对象和frame的窗口.
window对象是JavaScript客户层次结构的最顶层对象,
form元素和全部JavaScript代码都是存在于文档中,而文档被装载进窗口. 为了理解窗口怎样工作,你可以控制操作这些窗口.
打开和关闭窗口
当
用户启动(launch)Navigator时,将自动创建一个窗口.用户还可� ......
