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特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
随机推荐
- Gnome 插件介绍
插件:Applications Menuhttps://extensions.gnome.org/extension/6/applications-menu/ TopIconshttps://exte ...
- spoj 1436
用并查集看一下是否会围成一个环 若围成环直接输出NO 当然 当 m >= n 时必然会围成环直接输出NO #include <algorithm> #include < ...
- OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名：前端性能大作战！
「 OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员.云集技术牛人.知名架构师.实践专家共同探讨技术热点. 11月28日,OneAPM 技术公开课第 ...
- CentOS 5: Make Command not Found
在centos 5下安装软件遇到的问题,google了一圈,是因为系统没有安装编译器,那安装就是了,嘿嘿. 解决办法,在SSH下输入下面的命令 yum -y install gcc automake ...
- linux telnet命令参数及用法详解--telnet连接远程终端命令
功能说明:远端登入. 语 法:telnet [-8acdEfFKLrx][-b<主机alias.html' target='_blank'>别名>][-e<脱离字符>][ ...
- _CrtIsValidPointer 问题
从微软站点: 检查指针有效性下面的示例使用 _CrtIsValidPointer 验证给定的内存范围对于读或写是否有效. _ASSERTE(_CrtIsValidPointer( address, s ...
- C++中怎么获取类的成员函数的函数指针？
用一个实际代码来说明. class A { public: staticvoid staticmember(){cout<<"static"<<endl;} ...
- 【leetcode】Container With Most Water（middle）
Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai). ...
- Objective-C 协议（protocol）
协议(protocol)是Objective-c中一个非常重要的语言特性,从概念上讲,非常类似于JAVA中接口. 一个协议其实就是一系列有关联的方法的集合(为方便后面叙述,我们把这个协议命名为myPr ...
- linux samba.tar.gz安装和配置
安装步骤: 1. tar -xzvf samba-3.5.10.tar.gz2. cd samba-3.5.103. cd source34. ./autogen.sh 如果出现:./autogen ...