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之后只能得到表单里面对应名字的对象】

onclick="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里面

<div id ="one" style="width:520px;height:280px; </div>

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>

组拼方式唯一：spanTitle.innerHTML+="<span id='"+j+"'>"+j+"</span>  ";

单引号 双引号 加号 j 加号 双引号 单引号

反斜杠 双引号 加号 反斜杠 双引号 并不能用。

spanTitle.innerHTML+=

"<span onmouseover='showOneImage("+j+")' id='"+j+"'>"+j+"</span>  ";

这个拼接的方式还是很精髓的，展示一张，属性里面的属性值用单引号引起来，用来添加的实际值，用双引号引起来

页面常见效果js实现的更多相关文章

  1. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  2. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  3. Page Scroll Effects - 简单的页面滚动效果

    Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...

  4. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  5. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  6. Selenium 定位页面元素 以及总结页面常见的元素 以及总结用户常见的操作

    1. Selenium常见的定位页面元素 2.页面常见的元素 3. 用户常见的操作 1. Selenium常见的定位页面元素 driver.findElement(By.id());driver.fi ...

  7. 160229-01、web页面常用功能js实现

    web页面常用功能js实现   1.网页未加载时弹出新窗口 <body onunload="window.open('http://www.a68.cn');">< ...

  8. 用jquery实现平滑的页面滚动效果

    通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...

  9. Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面，实现单页面的效果

    前言: 使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解.今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tab ...

随机推荐

  1. [POJ 1155] TELE

    TELE Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3787   Accepted: 2007 Description ...

  2. Aspose.Words组件介绍及使用—基本介绍与DOM概述

    1.基本介绍 Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDocument,PDF,XP ...

  3. HDOJ 2167 Pebbles (状态压缩dp)

    题意:给你一个n*n的矩阵,让你从矩阵中选择一些数是的他们的和最大,规则是:相邻的两个数不能同时取,位置为(i,j)的数与(i+1,j),(i-1,j),(i,j+1),(i,j-1),(i+1,j+ ...

  4. hunnu Sum of f(x)

    http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11546&courseid=0 Sum of f(x) ...

  5. [转]优化数据库大幅度提高Oracle的性能

    几个简单的步骤大幅提高Oracle性能--我优化数据库的三板斧. 数据库优化的讨论可以说是一个永恒的主题.资深的Oracle优化人员通常会要求提出性能问题的人对数据库做一个statspack,贴出数据 ...

  6. Python ImportError: No module named *****

    如果想使用非当前模块中的代码,需要使用Import,这个大家都知道. 如果你要使用的模块(py文件)和当前模块在同一目录,只要import相应的文件名就好,比如在a.py中使用b.py: import ...

  7. 解决：javah 无法访问引用Android对象的问题

    无法访问android.view.View 是没有引入android.jar包 javah的参数中 有一个-bootclasspath参数 让他指向android.jar包 例如 javah -jni ...

  8. JSP---JSP中4个容器-pageContext使用

    这里重点只讲pageContext容器的用法哦. 因为另外的3个容器(request,session,application)在前面的servlet中已经演示过很多遍了 容器 作用域 pageCont ...

  9. 应用程序连接oracle rac

    10g rac vip漂移的目的不是让client不加改变的连接过来而是让client尽快收到一个连接终止的包,然后由client去连接tnsnames中配置的下一个地址.和没有vip相比, 使用vi ...

  10. oracle 高水位线

    一.oracle 高水位线详解 一.什么是水线(High Water Mark)? 概念: 1.块: 是粒度最小的存储单位,现在标准的块大小是8K,ORACLE每一次I/O操作也是按块来操作的,也就是 ...