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. Reflector+Reflexil 相结合实现对DLL文件修改

    在工作过程中,我们有可能遇到这样的问题:公司发给客户的软件包突然报错了,但是你知道哪里报错了,而这个代码已经编译成DLL文件了,源代码不在自己这里.怎么办呢?还好现在有Reflexil插件,这个插件只 ...

  2. CodeForces_#354_Div.2_2016.5.25(A+B+C)

    A 描述:给出一串数,可以互换任意两个数的位置一次,求最大的数和最小的数的最大距离. 分析:找到最大的数和最小的数的位置,求右边的数到左端点的距离和左边的数到右端点的距离. #include < ...

  3. js 获取服务器控件

    大致是HtmlControl被服务器发送到页面ID不变,比如<div id="a" runat="sever"></div> WebCo ...

  4. HDU5673 Robot 默慈金数

    分析: 注:然后学了一发线性筛逆元的姿势 链接:http://blog.miskcoo.com/2014/09/linear-find-all-invert #include<iostream& ...

  5. POJ ---3070 (矩阵乘法求Fibonacci 数列)

    Fibonacci   Description In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn − 1 + Fn − 2  ...

  6. oracle 的 regexp_substr()的用法

    将字符串'1-2' 截取出来成1 .2,然后通过这两个值查出数据张三.李四  ,拼接起来成'张三-李四' oracle 语法 SELECT replace(WMSYS.WM_CONCAT(wrxm), ...

  7. bzoj2946 [Poi2000]公共串（SA，SAM）

    [题意] 多串求LCS.   [思路]   主要是想找一下SAM的优越感 :) velui good 后缀数组划分height需要注意不少细节 <_<,然后不停debug   [代码]   ...

  8. 关于Spring的Controller及Struts的Action的多线程的注意

    struts是线程安全,并不是指多线程,而是指单态,当多个用户访问一个请求的时候,服务器内存中只有一个与之对应的action类对象,execute方法加上了同步关键字,如果你在action里加上一个全 ...

  9. 【Java基础】Java IO流的总结

    Java IO流分为输入流和输出流,而输入流和输出流中又分字符流和字节流.顾名思义,输入流则是输入到程序中计算,输出流是把程序的结果输出到文件或者设备.而字符流输入输出以字符为单位,字节流则是以字节为 ...

  10. HDOJ-ACM1016(JAVA) 字典序全排列，并剪枝

    转载声明:原文转自http://www.cnblogs.com/xiezie/p/5576273.html 题意: 一个环是用图中所示的n个圆组成的.把自然数1.2.…….n分别放入每个圆中,并在相邻 ...