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. 【HDOJ】1114 Piggy-Bank

    DP,先将coins按照重量排序可以优化. #include <stdio.h> #include <stdlib.h> #define MAXNUM 10005 #defin ...

  2. Hadoop源代码分析【IO专题】

    由于Hadoop的MapReduce和HDFS都有通信的需求,需要对通信的对象进行序列化.Hadoop并没有采用Java的序列化(因为Java序列化比较复杂,且不能深度控制),而是引入了它自己的系统. ...

  3. 从零开始学习jQuery (一) 开天辟地入门篇

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...

  4. HDU 4417 Super Mario 主席树

    分析:找一个区间里小于等于h的数量,然后这个题先离散化一下,很简单 然后我写这个题主要是熟悉一下主席树,其实这个题完全可以离线做,很简单 但是学了主席树以后,我发现,在线做,一样简单,而且不需要思考 ...

  5. bat 批处理 字符串 截取

    由于项目中配置项太多,经常有同事在配置xml的时候,讲 配置的路径搞错,先需要搞一个脚本,可以自动将路径截取出来, 晚上收集了点资料,暂时先上几个 bat 后面留着 ,具体实现. @echo off ...

  6. Linux经久不衰的应用程序

    Linux里面的应用程序一贯以高安全性,高性价比(功能/所占空间),此次记录一下Linux里面比较常用的而且经久不衰的应用程序. Shell:               bash(它结合了 csh ...

  7. Extjs中grid行的上移和下移

    一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加 ...

  8. 使用 IntelliJ IDEA 导入 Spark 最新源码及编译 Spark 源代码

    前言   其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. 准备工作 1.sca ...

  9. PHP函数积累总结（Math函数、字符串函数、数组函数）

    Math函数:10个较常用标红.abs — 绝对值acos — 反余弦acosh — 反双曲余弦asin — 反正弦asinh — 反双曲正弦atan2 — 两个参数的反正切atan — 反正切ata ...

  10. 教程-Delphi7 自带控件安装对应表

    原来的控件delphi7里何处寻? 经常有朋友提这样的问题,“我原来在delphi5或者delphi6中用的很熟的控件到哪里去了?是不是在delphi7中没有了呢?这是不是意味着我以前写的代码全都不能 ...