javascript网页特效（一）
在制作网页特效可以使用CSS3，也可以编写javascript代码，现在把在工作中常用的有关javascript属性和方法总结一下，希望能对初学者有些帮助。
使用javascript制作网页特效，避免不了要获得元素的大小位置的数据，哪javascript中给我们提供了一些获得宽高位置的属性，主要用的一下家族的属性：
1.offset家族常用属性
2. scroll家族常用属性
3. client家族常用属性
现在我就主要来说说offset家族常用属性：
1 offset家族——offsetWidth和offsetHeight
本身含义：得到对象自己的宽度和高度
offsetWidth = width + border + padding
1.1offsetWidht和style.width的区别
style.width只能获得行内样式中的width属性的值，offsetWidth不光可以获得行内样式的值，也可以获得内部样式和外部样式的值。
1.2代码示例
CSS代码：
#demo {width: 300px;border: 1px solid red;padding: 10px;margin:15px;}
HTML代码：
<div id="demo">asdfasdfasdasdfasdfasdfasdfasdfasdfasdfasdasdfasdfasdfasdfasdfasdfasdfasdasdfasdfasdfasdfasdf</div>
javascript代码：
var demo = document.getElementById("demo");console.log(demo.style.width); // style.width 只能得到行内式console.log(demo.offsetWidth);console.log(demo.offsetHeight); 2.offset家族——offsetLeft、offsetTop
2.1 offsetLeft、offsetTop
本身含义：返回距离上级盒子(最近的带有定位)的左边和上边的距离。如果父级都没有定位以body为准。
2.2 代码示例
CSS代码：
*{margin: 0px;padding: 0px}#yeye {position: relative;background-color: orange;width: 630px;height: 700px;padding: 100px;}#father {width: 500px;height: 500px;background-color: pink;margin: 100px;margin-left:30px;}#son {width: 200px;height: 200px;background-color: purple;}
HTML代码：
<div id="yeye"><div id="father"><div id="son"></div></div></div>
javascript代码：
var son = document.getElementById("son");
console.log(son.offsetLeft);
2.3 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">body{margin: 0;padding: 0;background-color: black;}#nav{width: 800px;height: 42px;background-image: url(images/rss.png);background-position: right center;background-repeat: no-repeat;background-color: white;position: relative;border-radius: 8px;margin:0 auto;}#nav ul{margin: 0;padding: 0;height: 42px;list-style: none;position: absolute;left: 0;top:0;}#nav ul li{width: 83px;height: 42px;line-height: 42px;text-align: center;color: black;float: left;}#cloud{position: absolute;left: 0;top: 0;background-image: url(images/cloud.gif);width: 83px;height: 42px;}</style>
</head>
<body><div id="nav"><span class="cloud" id="cloud"></span><ul><li>首页新闻</li><li>师资力量</li><li>活动策划</li><li>企业文化</li><li>招聘信息</li><li>公司简介</li><li>上海校区</li><li>广州校区</li></ul></div>
</body>
</html>
<script type="text/javascript">var lis = document.getElementsByTagName("li");var span = document.getElementById("cloud");var target=0;var begin = 0;var current=0;for (var i = 0; i < lis.length; i++) {lis[i].οnmοuseοver=function(){target = this.offsetLeft;}lis[i].οnclick=function(event){current = this.offsetLeft;begin = current;}lis[i].onmouseout = function(){target = current;}}setInterval(function(){begin =begin+ (target-begin)/10;span.style.left = begin+"px";},10);
</script>2.4 总结
offsetLeft从父级的padding开始算起，父级的border不算，也就是在盒子到定位盒子边框到边框的距离。
3 offset家族——offsetParent
3.1 offsetParent和parentNode的区别
offsetParent：返回该对象的父级（带有定位，有可能是爷爷)对象。 parentNode返回父级节点对象（亲爹）。
3.2 代码示例
CSS代码：
#gf {position: absolute;}
HTML代码：
<div id="gf"><div id="fa"><div id="son"></div></div>
</div>
javascript代码：
<script>var son = document.getElementById("son");console.log(son.parentNode.id);console.log(son.offsetParent.id);
</script>
3.3 offset家族属性和style属性的区别
3.3.1 区别
1. offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以,只有定位的盒子才有 left,top等属性。
2. offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
3. offsetTop 只读，而 style.top 可读写。
4. 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
5. 最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便
3.3.2 代码示例
CSS代码：
#demo {width: 200px;
}
HTML代码：
<div id="demo" style="width: 300px;"></div>
javascript代码：
<script>var demo = document.getElementById("demo");console.log(demo.style.width);console.log(demo.offsetWidth);demo.offsetWidth = 500; // 可以得到值，但是不能更改值demo.style.width = "500px"; // 可以得到 行内的值，也可以更改值
</script>4 做几个小案例试试
4.1 如何得到鼠标在盒子中的坐标
废话不多说，上代码
CSS代码：
<style>*{margin:0; padding:0;}.demo {width: 400px;height: 400px;background-color: pink;margin: 100px;}
</style>
HTML代码：
<div class="demo"></div>
JavaScript代码：
<script>var div = document.getElementsByTagName("div")[0];div.onmousemove = function(event) {var event = event || window.event;var x = event.clientX - this.offsetLeft;var y = event.clientY - this.offsetTop;this.innerHTML = x + "px" + y + "px";
}
</script>4.2 水平滚动条
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0px;padding: 0px;}.scroll{width: 400px;height: 8px;background-color: #ccc;margin: 100px auto;position: relative;}.bar{width: 10px;height: 22px;position: absolute;left: 0px;top: -7px;background-color: #369;cursor: pointer;}.mask{height: 100%;width: 0;background-color: #369;position: absolute;left: 0;top : 0;}</style>
</head>
<body>
<div class="scroll" id="scrollBar"><div class="bar"></div><div class = "mask"></div>
</div>
<div id="demo"></div>
</body>
</html>
<script type="text/javascript">//鼠标的拖动，其实是鼠标按下后的移动var scrollbar = document.getElementById("scrollBar");var bar = scrollbar.getElementsByTagName("div")[0];var mask = scrollbar.getElementsByTagName("div")[1];var demo = document.getElementById("demo");bar.onmousedown = function(){var that = this;document.οnmοusemοve= function(event){event = event || window.event;var val = event.clientX - scrollbar.offsetLeft - that.offsetWidth/2 ;//鼠标在滚动条中的位置;if(val<0){val=0;}else if(val>390){val=390;}that.style.left = val+"px";mask.style.width = that.style.left;demo.innerHTML= parseInt(that.style.left)/390 * 100 +"%";window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();}}document.οnmοuseup= function(){document.onmousemove = null;}
</script>javascript网页特效（一）相关推荐
- php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果 看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
- JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
- JavaScript网页特效-“渔夫打鱼晒网”程序设计
程序设计时,把可能需要反复执行的代码封装为函数,然后在需要执行该段代码功能的地方进行调用,这样不仅可以实现代码的复用,更重要的是可以保证代码的一致性,只需要修改该函数代码,则所有调用位置均得到体现.同 ...
- JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...
- 《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息 作者: 杨磊 张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
- JavaScript网页特效-浮现社会主义核心价值观文字动画效果
1.案例呈现 用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...
- 实用JavaScript网页特效编程百宝箱pdf
下载地址:网盘下载 内容介绍 编辑 计算机的出现是人类历史上的伟大创举,因为它正在彻底改变着人们生活中的方方面面,网络化的计算机更是日益渗透到社会发展的各个应用领域,从20世纪五六十年代网络雏形发展到 ...
- javascript网页特效_南通建网站哪些,网页设计维护
无锡邦程信息科技有限公司为您详细解读rKXvd南通建网站哪些的相关知识与详情,#末网页设想师根据差别站点的内容微风格,设想出完美的网页效果图.内容填充:不论是个人网站还是企业网站,都必需从内容那个动身 ...
- JavaScript网页特效学习笔记1
在网络中有许多的特效都是用JavaScript编写的,这几天通过看书和看视频,简单的学习了几个网页常见的特效,和大家分享一下. 1.使HTML页面反向显示 我们浏览网页的时候,都是正向显示的.可以通过 ...
- JavaScript网页特效-留言板
留言板是一种可以用来记录.展示文字信息的载体,有比较强的时效性.网站中的留言板功能非常重要,可以实现和用户互动,例如人民网的"领导留言板"."领导留言板"是人民 ...
最新文章
- Sql Server函数全解(四)日期和时间函数
- Oracle和Mysql获取uuid的方法对比
- Algorand 共识算法 BA* 入门
- 基于canvas的图片压缩函数实现
- leetcode 1128. 等价多米诺骨牌对的数量
- 漫画：什么是区块链？
- 【工具】Xshell安装注册以及简单属性配置
- Nginx之http配置
- char强制类型转换为int_常量、变量、基本数据类型转换、和运算符
- 瑞丽超级排料的使用非常简单 超级排料系统2012超越版
- fiddle下载安装教程
- Android NDK下载链接
- 安装系统或者进PE蓝屏 代码：IRQL NOT LESS OR EQUAL
- ”骇客“不可缺少的电脑软件
- 在京东工作是一种什么样的体验
- 【svn】如何批量忽略文件和文件夹
- 8月9日个人训练小结
- Menu菜单,MenuBar菜单栏,MenuItem菜单项
- springboot 整合 spring-integration-mqtt
- 基于javaweb仿京东商城管理系统的设计与实现(含论文和程序源码及数据库文件)