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】1141 Brackets Sequence

    经典DP问题,注意输入不要使用while(xxx != EOF),否则WA,测试数据只有一组.同样的测试数据可能有多种答案.但最小长度唯一.一定不能用while,切记. #include <io ...

  2. bzoj1324

    经典例题 在<最小割模型在信息学竞赛中的应用>有详细的解答就不赘述了 主要想说,其实这题的几个结论其实是很好猜出来的: 当摸不清题目本质的时候,不妨多找几种情况,猜测一下 顺便推广一下几个 ...

  3. codeigniter实现ajax分页

    <?php /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends CI_Pagination{ public function __c ...

  4. Azure 媒体服务发布可靠的视频直播平台

    Sudheer Sirivara Azure 媒体服务总监 两个月前,Azure 媒体服务发布了视频直播和内容保护产品的公共预览版.这一 Internet规模的直播解决方案已被十余家业界领先的国际广播 ...

  5. sqliteExpert软件使用（创建数据库和表）

    sqliteExpert是sqlite数据库的可视化操作软件,通过该软件可以进行可视化的创建数据库以及表,免去了复杂的建表语句.首先在下面地址下载该软件http://www.ddooo.com/sof ...

  6. Data binding 在Activity,Fragment中引用以及加载其他布局

    Data binding在Activity中使用: DataBindingUtil.setContentView(this, R.layout.activity_home); Data binding ...

  7. NESPER的大体结构 z

    NEsper从内容上分为两块,NEsper的核心NEsper.dll和NEsper.IO.dll. (1)NEsper的核心包包含了EPL语法解析引擎,事件监听机制,事件处理等核心模块. (2)NEs ...

  8. Spark的几种运行模式

    1.local单机模式,结果xshell可见:./bin/spark-submit --class org.apache.spark.examples.SparkPi --master local[1 ...

  9. Esper系列(五)Order by、Limit、构建事件流、Updating an Insert Stream

    Order by 与SQL语法类似类似,默认为升序排列; 注意: 如果order by的子句中出现了聚合函数,那么该聚合函数必须出现在select的子句中. 出现在select中的expression ...

  10. 【转载】HBase 数据库检索性能优化策略

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-HBase/index.html 高性能 HBase 数据库 本文首先介绍了 HBase 数据库基本 ...