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. MPlayer

    名称   mplayer − 电影播放器 mencoder − 电影编解码器 概要   mplayer [选项] [文件|URL|播放列表|−] mplayer [选项] 文件1 [指定选项] [文件 ...

  2. hadoop2.2编程：从default mapreduce program 来理解mapreduce

    下面写一个default mapreduce 的程序: import org.apache.hadoop.mapreduce.Mapper; import org.apache.hadoop.mapr ...

  3. 利用if else判断是否及格

    static void Main(string[] args)        {            while (true)            {                string ...

  4. 存储过程中“Select Top 变量”的问题如何解决

    在SqlServer2005中,可以这样: DECLARE @p int SELECT TOP (@p) * FROM 表名 在SqlServer2000中,不支持以上方法,可以这样: DECLARE ...

  5. Linux kernel ‘aac_send_raw_srb’函数输入验证漏洞

    漏洞名称: Linux kernel ‘aac_send_raw_srb’函数输入验证漏洞 CNNVD编号: CNNVD-201311-422 发布时间: 2013-11-29 更新时间: 2013- ...

  6. 【转】关于usr/bin/ld: cannot find -lxxx问题总结

    原文网址:http://eminzhang.blog.51cto.com/5292425/1285705 /usr/bin/ld: cannot find -lxxx问题总结   linux下编译应用 ...

  7. POJ 1185 （状态压缩DP）

    中文题目,题意就不说了. 不得不说这是一道十分经典的状态压缩DP的题目. 思路: 通过分析可以发现,第i行的格子能不能放大炮仅与第i-1和i-2行的放法有关,而与前面的放法无关,因此,如果我们知道了i ...

  8. 如何组建理想SOA团队

    趋向采用 SOA 软件开发领域的主要发展趋势是从传统软件体系结构过渡到面向服务的体系结构 (SOA).在传统软件体系结构中,将项目视为单个新应用程序的交付.在SOA中,将项目视为集成服务的交付——一些 ...

  9. 【原】泛型-Java

    泛型是Java SE5.0中新增的新特性,通过泛型使得在代码编译的时候就能检查类型安全,并且所有的强制类型转换都是自动和隐式的,从而提高代码的重用率. Note:在JavaSE7+以后的版本中,构造函 ...

  10. Scala学习笔记（二）表达式和函数

    笔记的整理主要针对Scala对比Java的新特性:   1.if表达式 if表达式是有结果返回的. val a= if (5>2) "你好" else 1 a的值为if表达式 ...