accp6.0 《使用javascript增强交互效果》学习笔记ch5 JavaScript和css交互
来源:互联网 发布:网络祼体女主播视频 编辑:程序博客网 时间:2024/06/04 20:02
任务:
- 制作鼠标指针移动特效
- 制作随鼠标滚动的菜单
目标
- 使用style属性制作菜单特效
- 使用className属性制作菜单特效
- 使用scrollTop制作随鼠标指针滚动的广告图片
1. 样式表类型
1.1:内联样式:标签内
1.2:内部样式:head标签之间
1.3:外部样式表:独立的样式文件
2.javascript访问样式的常用方法
2.1:style属性
语法:HTML元素.style.样式属性="值"
实例:
设置某元素颜色为红色,字体大小13px;
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="13px";
2.2:className属性
语法:HTML元素.className="样式名";
实例:
改变某元素鼠标指针移进移出时的效果,over和out是样式名。
vat len=document.getElementByTagName("li");
for(var i=0;i<len.length;i++){
len[i].onmouseover=function(){
this.className="over";
}
len[i].onmouseout=function(){
this.className="out";
}
}
3.JavaScript访问样式的应用
3.1获取样式属性的值:
实例:
获取某元素的坐标带px
var obj=document.getElementById("test");
alert("上:"+obj.style.top+"\n左:"+obj.style.left);
获取某元素的坐标值(仅支持IE)
alert("上:"+obj.currentStyle.top+"\n左:"+obj.currentStyle.left);
获取某元素的坐标值(支持FireFox)
alert("上:"+document.defaultView.getComputedStyle(obj,null).top+"\n左:"+document.defaultView.getComputedStyle(obj,null).left);
4.制作随鼠标滚动的菜单scollTop 、scrollLeft
<html><head><script type="text/javascript">var timerfunction scrolltop(){document.getElementById('scrollmenu').style.top=document.body.scrollToptimer=setTimeout("scrolltop()",1)}function stoptimer(){clearTimeout(timer)}</script></head><body onload="scrolltop()" onunload="stoptimer()"><span id="scrollmenu" style="position:absolute"><b>菜单</b><br /><a href="http://www.w3school.com.cn">W3School</a><br /><a href="http://www.microsoft.com">Microsoft</a><br /><a href="http://www.altavista.com">Altavista</a><br /></span><table border="0" width="100%"><tr><td width="100"> </td><td>滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br />滚动页面,就可以看到“置顶”的菜单。<br /><br /><br /><br /><br /></td></tr></table></body></html>
- accp6.0 《使用javascript增强交互效果》学习笔记ch5 JavaScript和css交互
- accp6.0 《使用javascript增强交互效果》学习笔记ch1
- accp6.0 《使用javascript增强交互效果》学习笔记ch2
- accp6.0 《使用javascript增强交互效果》学习笔记ch3 DOM编程
- accp6.0 《使用javascript增强交互效果》学习笔记ch6 表单基本验证技术
- accp6.0 《使用javascript增强交互效果》学习笔记ch7 正则表达式和表单辅助特效
- accp6.0 《使用javascript增强交互效果》学习笔记ch4 DOM高级编程
- JavaScript和CSS的交互(一)
- JavaScript和CSS的交互方法
- 安卓学习笔记---Android中Java和JavaScript交互
- c#和javascript交互
- Flex和JavaScript交互
- c#和javascript交互
- c#和javascript交互
- c#和javascript交互
- JavaScript和Activex交互
- silverlight和javascript交互
- silverlight和javascript交互
- hdu 3120 dolphin
- (转)VC调用C#动态库,建立ARX FOR VC工程
- 最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用16
- 打印输入中单词长度的直方图
- 定义Button事件时报错
- accp6.0 《使用javascript增强交互效果》学习笔记ch5 JavaScript和css交互
- C#代码执行过程;值类型和引用类型;深拷贝和浅拷贝
- MyEclipse 6.0.0激活方式
- 最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用17
- JSP运行时错误处理与应该注意的六个常见问题
- JAVA内部类总结
- 最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用18
- 突然悟道了
- UCC--C语言词法分析