当前位置：首页 > news >正文

页面常见效果js实现

news 来源：原创 2024/4/20 16:55:10

2015.12.2 页面常见效果js实现

【有没有觉得很坑，【笑哭，邮箱写上】】

复习：

Js内置对象：

1、浏览器对象

window document history location event alert prompt confirm write getElementById back forward go location href height width bodywidth bodyheight top left

2、js的内置对象

String Date Math

Indexof lastindexof subString subStr charAt

Date new Date() 获得当前系统时间

getYear getFullYear

toLocaleString

setTimeOut();//有两个参数，第一个是代码参数，通常写方法【需要加""】,如果实现时间的不断刷新需要写在获得时间的最后面。

实现时间更新的另一个方法：setInteval();

3、标签对象

js中把html的所有标签都看作是对象

document.getElementById【或者是getElementsName()】页面中通过id名称搜索。

Document.form.input select textarea【.完form之后只能得到表单里面对应名字的对象】

οnclick="test(this)";传递对应类型对象

可以去操作标签对象的属性，style class className="";

今天内容：

1、根据所选择的颜色来改变当前页面或者指定某个区域的颜色。

2、在导航上面，鼠标的滑动，就改变所指定的菜单的样式效果。

3、弹出登录框 div

4、一级和二级菜单联动

5、图片轮播

注意：图片名称要有一定的规则

1、图片自动变换

2、鼠标放在图片就停止变动离开的时候，再次开始变动

3、图片右下角显示对应图片标题

4、图片变动的时候，编号对应改变。

dom规则：

Dom指的是：document object model

文档标准：html xml

w3c 标准组织： html xml

标准：

把整个页面看做是一个文档；文档由标签组成，标签之间具有嵌套关系。因而具有层次。

把每一个标签都看作是节点对象，把标签上属性也看做是对象，文本也是。【空文本也是节点对象】

在定义页面的时候，需要遵从此标准，解析时更加需要遵从此标准。

今天内容示例：

<script type="text/javascript">
    function changeColor(obj){
            alert(obj.bgColor);//在这里面用小写的 bgcolor 就不会显示！
    }
</script>
</head>
<body>
    <table width="500px">
        <tr >
            <td bgcolor="#FF0000" onmouseover="changeColor(this)">&nbsp;</td>
            <td bgcolor="#FF6600">&nbsp;</td>
            <td bgcolor="#FFFF00">&nbsp;</td>
            <td bgcolor="#00FF00">&nbsp;</td>
            <td bgcolor="#0000FF">&nbsp;</td>
            <td bgcolor="#3366CC">&nbsp;</td>
            <td bgcolor="#9900CC">&nbsp;</td>
        </tr>    
    </table>    
</body>

在style里面

height=280px 和 height:280px 是有很大区别的，区别在于前者会导致整个东西没有效果。

问题在于，下面这里color可以改变里面的属性颜色，但是font-style:不能改变“菜单项一”的颜色。

    <style>
        .noton{ text-align:center; background-color:#06F; color:#FF0; height:30px;}
    </style>
    </head>
    <body>
    <table width="150px" >
        <tr>
            <td class="noton">菜单项一</td>
        </tr>