js特效第九天
offset家族（获取元素尺寸）
offsetWidth得到对象的宽度，自己的，与他人无关
offsetWidth = width+border+padding，不包含margin
offsetHeight得到对象的高度，自己的，与他人无关
offsetHeight = Height+border+padding，不包含margin
注意：直接demo .style.width是无法得到宽度的，只可以使用demo.offsetWidth，或者使用行内样式，但是不建议使用。offsetWidth、offsetHeight是活的，可以动态检测宽度和高度。活的，可以动态检测宽度和高度。
注意：一定要先清样式*{margin=0;padding=0;}
对于在以前遇到的案例中，盒子的一半，例如轮播图下面的小li，都是left：50%同时还要调margin，但是现在就可以先检测自己盒子的宽度，然后盒子的一半就可以。
offsetWidth = width + border + padding
div { width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 20
为什么不用 div.style.width 因为东西 只能得到行内的数值不能有padding和border。
offsetLeft，返回距离上级盒子（带有定位，什么定位都可以）左边的位置。
注意：如果父级都没有定位则以body为准，这里的父级指的是所有的上一级，不仅仅指的是父亲。如果父级有定位，则以父级为准。
注意：只有左和上，没有右和下，jq也是一样的。
注意：因为带有自身的宽以及padding，所以就记为，子盒子边框与有定位的父盒子边框与边框之间的距离即可。
offsetTop与offsetLeft的情况是一样的。
筋斗云案例
筋斗云随鼠标移动原理：鼠标移动时，得到当前位置的offsetLeft值，并且让target等于当前offsetLeft。
鼠标没有点，筋斗云自动回到原处，或者鼠标点击了，当鼠标移动后移开时，筋斗云自动回到上次点击的地方的原理：回归原处target=0；回到上次点击地方是点击了哪里要把那里的位置存下来，然后target等于这个位置。
<style>
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
background-color: #000;
}
.nav {
width: 800px;
height: 42px;
background:url("images/rss.png") no-repeat right center #fff;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.cloud {
width: 83px;
height: 42px;
position: absolute;
top: 0;
left: 0;
background: url(images/cloud.gif) no-repeat;
}
.nav ul {
position: absolute;
top: 0;
left: 0;
}
.nav li {
float: left;
width: 83px;
height: 42px;
line-height: 42px;
text-align: center;
color: #000;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav" 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>
var cloud = document.getElementById("cloud"); // 云彩
var nav = document.getElementById("nav");
var lis = nav.children[1].children;
var current = 0; // 用于存放点击时候的 offsetLeft
//alert(lis.length);
for(var i=0; i<lis.length;i++) {
lis[i].onmouseover = function() {
// alert(this.offsetLeft);
target = this.offsetLeft; // 把左侧的位置 ，给 target
}
lis[i].onmouseout = function() {
target = current; // 鼠标离开 target 是 刚才我们点击的位置
/* target=0; //筋斗云回到最前面*/
}
lis[i].onclick = function() {
current = this.offsetLeft; // 点击的时候 吧当前位置 存贮一下
}
}
// 缓动公式
var leader = 0, target = 0;
setInterval(function(){
leader = leader + (target - leader ) / 10;
cloud.style.left = leader + "px";
},10);
</script>
offsetParent
返回该对象的父级，如果当前元素的父级没有定位，那么就以body为定位。如果有定位，则取最近的那个父级元素。
parentNode必须是亲父亲
offsetParent是带有定位的父亲，不一定是亲的。
offsetTop/ style.top区别
一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
style.left = 300px parseInt（300px） 结果 300
parseInt（style.left） + parseInt（style.left）
三、offsetTop 只读，而 style.top 可读写。只读就是可以得到值，但是不能更改值。可读写是可以更改值，也可以得到值。
如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便
事件对象
我们学过一些事件 : onmouseover onmouseout onclick .....
btn.onclick = function(event) { 语句 }
event 单词翻译过来 事件 的意思
event 就是事件的对象 指向的是 事件 是 onclick
再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
普通浏览器支持 event
ie 678 支持 window.event
所以我们 采取兼容性的写法 ：
var event = event || window.event;
|
属性 |
作用 |
|
data |
返回拖拽对象的URL字符串（dragDrop） |
|
width |
该窗口或框架的高度 |
|
height |
该窗口或框架的高度 |
|
pageX |
光标相对于该网页的水平位置（ie无） |
|
pageY |
光标相对于该网页的垂直位置（ie无） |
|
screenX |
光标相对于该屏幕的水平位置 |
|
screenY |
光标相对于该屏幕的垂直位置 |
|
target |
该事件被传送到的对象 |
|
type |
事件的类型 |
|
clientX |
光标相对于该网页的水平位置 （当前可见区域） |
|
clientY |
光标相对于该网页的水平位置 |
pageX clientX screenX 区别
screen X screenY 是以我们的电脑屏幕 为基准点测量
pageX pageY 以我们的文档（绝对定位）的基准点对齐。如果有滚动条，那么点击处到页面最顶端的距离就会更长。ie678 不认识
clientX clientY以 可视区域为基准点，类似于固定定位。
坐标案例
<style>
*{margin:0; padding:0;}
.demo {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
<script>
var div = document.getElementsByTagName("div")[0];
div.onmousemove = function(){
var event= event ||window.event;
var x = event.clientX - this.offsetLeft;
var y =event.clientY - this.offsetTop;
this.innerHTML = x+"px"+y+"px";
}
</script>
点击跟随鼠标案例
<style>
#image {
width: 99px;
position: absolute;
top:0;
left: 0;
}
</style>
</head>
<body>
<img src="img.jpg" alt="" id="image"/>
</body>
</html>
<script>
var image = document.getElementById("image");
document.onclick = function(event) {
var event = event || window.event;
targetX = event.clientX - image.offsetWidth /2;
targetY = event.clientY - image.offsetHeight /2;
}
// 缓动
var leaderX = 0,
leaderY= 0,
targetX = 0,
targetY = 0;
setInterval(function() {
leaderX = leaderX + (targetX - leaderX) / 10;
leaderY = leaderY + (targetY - leaderY) / 10;
image.style.left = leaderX + "px";
image.style.top = leaderY + "px";
},10)
</script>
常用事件
onmouseover onmouseout onclick
onmousemove 当鼠标移动的时候 就是说，鼠标移动一像素就会执行的事件
div.onmousemove = function() { 语句 }
当鼠标再div 身上移动的时候，就会执行。
得到在某个盒子内的坐标：
div.onmouseover 和 div.onmousemove 区别
他们相同点 都是 经过 div 才会触发
div.onmouseover 只触发一次
div.onmousemove 每移动一像素，就会触发一次
onmouseup 当鼠标弹起
onmousedown 当鼠标按下的时候
1.拖动 原理 == 鼠标按下 接着 移动鼠标 。
bar.onmousedown = function(){
document.onmousemove = function(){
}
}
当我们按下鼠标的时候，就要记录当前 鼠标 的位置 - 大盒子的位置
算出 bar 当前 在 大盒子内的距离 。
防止选择拖动
我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
京东放大镜案例
布局要点：首先有一个大盒子，大盒子里面装一个小盒子和一个大盒子2，小盒子里面放小图，大盒子2里放大图，然后再小盒子里面在相对定位一个小方块透明。大盒子2相对定位大盒子到右边。
cursor:move;变成十字光标
特效要点：小黄色的小方块的坐标等于鼠标的动态坐标。以及判断小图的x和y不让其超出小盒子。还要注意大盒子与小盒子图片显示的比例。
<style>
* {margin: 0;padding: 0;}
.box {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 450px;
height: 450px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box" id="fdj">
<!--小盒子-->
<div class="small">
<img src="images/001.jpg" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="images/0001.jpg" alt=""/>
</div>
</div>
</body>
</html>
<script>
var fdj = document.getElementById("fdj"); // 获得最大的盒子
var small = fdj.children[0]; // 获得small 小图片 350盒子
var big = fdj.children[1]; // 获得 大图片 800 盒子
var mask = small.children[1]; // 小的黄色盒子
var bigImage = big.children[0]; // 大盒子里面的图片
small.onmouseover = function() { // 鼠标经过显示出他们
mask.style.display = "block";
big.style.display = "block";
}
small.onmouseout = function() {
mask.style.display = "none";
big.style.display = "none";
}
// 鼠标在small 内移动
var x = 0;
var y = 0;
small.onmousemove = function(event) {
var event = event || window.event;
x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某个盒子内的坐标
//alert(this.offsetLeft);
y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
if(x < 0)
{
x = 0;
}
else if(x > small.offsetWidth - mask.offsetWidth)
{
x = small.offsetWidth - mask.offsetWidth;
}
if(y<0)
{
y = 0;
}
else if(y > small.offsetHeight - mask.offsetHeight)
{
y = small.offsetHeight - mask.offsetHeight;
}
mask.style.left = x + "px";
mask.style.top = y + "px";
/*计算 ： 夫子 一顿吃 2个馒头 娇子 一顿 5个馒头
问 夫子今天吃了 3个馒头 娇子应该吃几个？ */
/*计算出他们的倍数 4 / 2 2倍
3 * 2 */
/* 大图 / 小图 倍数
我们 再小图移动的距离 * 倍数 == 大图的位置*/
bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px";
bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px";
}
</script>
水平滚动条拖动案例
<style>
* {margin:0;padding:0;}
.scroll {
width: 400px;
height: 8px;
background-color: #ccc;
margin: 100px;
position: relative; }
.bar {
width: 10px;
height: 22px;
background-color: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask {
width: 0;
height: 100%;
background-color: #369;
position: absolute;
top: 0;
left: 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>
var scrollBar = document.getElementById("scrollBar");
var bar = scrollBar.children[0];
var mask = scrollBar.children[1];
var demo = document.getElementById("demo");
/* document.onmousedown = function() {
alert(11);
}*/
bar.onmousedown = function(event) {
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
// alert(11);
// 拖动一定写到 down 里面才可以
var that = this;
document.onmousemove = function(event) {
var event = event || window.event;
that.style.left = event.clientX - leftVal + 'px';
//alert(that.style.left);
var val = parseInt(that.style.left);
if(val < 0)
{
that.style.left = 0;
} else if(val > 390)
{
that.style.left = "390px";
}
mask.style.width = that.style.left; // 遮罩盒子的宽度
//计算百分比
demo.innerHTML = "已经走了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = function() {
document.onmousemove = null; // 弹起鼠标不做任何操作
}
} </script>
js特效第九天的更多相关文章
- 滚动变色的文字js特效
Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
- <一>初探js特效魅力之选项卡05
初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- 又到圣诞节，让你的网页下起雪(js特效)
又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...
- 很不错的js特效
这里有好多的js特效:http://www.jsfoot.com/jquery/images/qh/ jquery图片特效 jquery幻灯片 .... 有什么js需要可以到这里来下载:http:// ...
- 个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
随机推荐
- PAT-乙级-1028. 人口普查(20)
1028. 人口普查(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 某城镇进行人口普查,得到了全体居民的 ...
- SDK更新问题解决
更新C:\WINDOWS\system32\drivers\etc\host文件百试不爽 第一步 打开SDK Manager下Tools->Options,选中“Force https://… ...
- Eclipse 插件开发 —— 深入理解查找（Search）功能及其扩展点
引言 查找功能是计算机语言开发环境 / 平台的一个非常重要的特性.Eclipse 也不例外,它提供了丰富的查找功能(用户可以输入正则表达式或任意字符串,指定查找范围和匹配选项等等),并且提供了简单易用 ...
- POJ2739Sum of Consecutive Prime Numbers
http://poj.org/problem?id=2739 题意 :一个正整数能够表示为一个或多个连续素数和,给你一个正整数,让你求,有多少个这样的表示.例如:整数53有两种表示方法,5+7+11+ ...
- Linux资源监控_Nmon
性能测试中,各个服务器资源占用统计分析是一个很重要的组成部分,通常我们使用nmon这个工具来进行监控以及监控结果输出. 一. 在监控阶段使用类似下面的命令 ./nmon -f write_3s_20v ...
- 修改tomcat的默认编码
在tomcat的安装路径下查找conf文件下的server.xml文件,修改此文件即可,修改内容如下: <Connector port="8080" protocol=&qu ...
- C++ eof()函数相关应用技巧分享
C++编程语言中的很多功能在我们的实际应用中起着非常大的作用.比如在对文件文本的操作上,就可以用多种方式来实现.在这里我们介绍的C++ eof()函数就是其中一个比较常用的基本函数. 在使用C/C++ ...
- POJ3295——Tautology
Tautology Description WFF 'N PROOF is a logic game played with dice. Each die has six faces represen ...
- 【剑指offer】判断二叉树是否为平衡二叉树
2013-09-03 14:16:51 面试题39:求二叉树的深度.判断二叉树是否为平衡二叉树 小结: 根据平衡二叉树的定义,需要判断每个结点,因此,需要遍历二叉树的所有结点,并判断以当前结点为根的树 ...
- 使用xilinx的documentation navigator快速查找资料
2013-06-22 14:56:39 documentation navigator是xilinx的资料导航,是一个小插件,可以到xilinx的官网上下载,我的是Xilinx_DocNav_2013 ...