JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
- btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onclick事件
- 普通浏览器支持event,也就是以上的写法;蛋疼的ie678支持window.event
- 所以有了兼容写法如下:
var event = event || window.event;
本节重点 - 事件的属性
1.筋斗云导航练习
- 效果图
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筋斗云导航栏</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #eeeeee;
}
.nav {
width: 880px;
height: 42px;
background: #ffffff url("0404Images/rss.png") no-repeat right center;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.cloud {
background: url("0404Images/cloud.gif") no-repeat center;
width: 83px;
height: 42px;
position: absolute;
top: 0;
left: 0;
}
.nav ul {
list-style: none;
position: absolute;
}
.nav ul li {
width: 83px;
height: 42px;
float: left;
text-align: center;
line-height: 42px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav" id="navJS">
<p class="cloud"></p>
<ul>
<li>首页新闻</li>
<li>师资力量</li>
<li>活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>
</body>
</html>
- JavaScript
<script>
window.onload = function () {
var nav = document.getElementById("navJS");
var cloud = nav.children[0];
var lis = nav.children[1].children;
var leader = 0;
var target = 0;
var clickLeft = 0;
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function () {
target = this.offsetLeft;
}
lis[i].onmouseout = function () {
target = clickLeft; // 记录点击的位置
}
lis[i].onclick = function () {
clickLeft = this.offsetLeft;
}
}
setInterval(function () {
leader = leader + (target - leader) / 5;
cloud.style.left = leader + "px";
},30);
}
</script>
2.跟随鼠标练习
- 效果图
- html&JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟随鼠标</title>
<style>
img {
width: 80px;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function () {
var img = document.getElementsByTagName("img")[0];
var leaderX = 0;
var leaderY = 0;
var targetX = 0;
var targetY = 0;
var timer = null;
document.onmousemove = function (event) {
clearInterval(timer);
var event = event || window.event;
targetX = event.clientX;
targetY = event.clientY;
timer = setInterval(function () {
leaderX = leaderX + (targetX - leaderX) / 10;
leaderY = leaderY + (targetY - leaderY) / 10;
img.style.left = leaderX - img.offsetWidth * 0.5 + "px";
img.style.top = leaderY - img.offsetHeight * 0.5 + "px";
},30);
}
}
</script>
</head>
<body>
<img src="0404Images/img.jpg" alt="">
</body>
</html>
3.放大镜练习 注意事项 - block = none的盒子获取不到宽度
- 效果图
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
border: 1px solid #cccccc;
margin: 100px;
position: relative;
}
.small {
width: 350px;
height: 350px;
position: relative;
overflow: hidden;
}
.big {
border: 1px solid #cccccc;
width: 450px;
height: 450px;
position: absolute;
top: 0;
left: 360px;
overflow: hidden;
display: none;
}
.big img {
position: absolute;
left: 0;
top: 0;
}
.mask {
width: 100px;
height: 100px;
background-color: rgba(255,255,0,0.4);
position: absolute;
top: 0;
left: 0;
display: none;
cursor: move;
}
</style>
</head>
<body>
<div class="box" id="boxJS">
<div class="small">
<img src="0407images/001.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="0407images/0001.jpg" alt="">
</div>
</div>
</body>
</html>
- JavaScript
<script>
var box = document.getElementById("boxJS");
var mask = box.children[0].children[1];
var small = box.children[0];
var big = box.children[1];
var bigImg = big.children[0];
// 这里获取到的scale永远是0,big盒子初始状态是block = none,获取不到宽度
// var scale = big.offsetWidth / small.offsetWidth;
small.onmouseover = function () {
mask.style.display = "block";
big.style.display = "block";
}
small.onmouseout = function () {
mask.style.display = "none";
big.style.display = "none";
}
small.onmousemove = function (event) {
var event = event || window.event;
// 获取坐标
var x = event.clientX - box.offsetLeft;
var y = event.clientY - box.offsetTop;
if (x <= 0 || y <= 0 || x >= box.offsetHeight || y >= box.offsetHeight) {
mask.style.display = "none";
return;
}
mask.style.left = x - mask.offsetWidth * 0.5 + "px";
mask.style.top = y - mask.offsetHeight * 0.5 + "px";
// 改变大图坐标
bigImg.style.left = -x * big.offsetWidth / small.offsetWidth + "px";
bigImg.style.top = -y * big.offsetWidth / small.offsetWidth + "px";
}
</script>
4.进度条练习 注意事项 - 鼠标拖动事件的实现,分为以下三步骤
// 1.鼠标按下
bar.onmousedown = function (event) {
// 2.鼠标移动 注意事件源是整个文档,因为这个是在整个文档内拖动
document.onmousemove = function (event) { }
}
// 3.鼠标抬起 清空鼠标移动事件
document.onmouseup = function () {
document.onmousemove = null;
}
- 效果图
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动进度条</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 10px;
background-color: #cccccc;
margin: 100px;
position: relative;
}
.bar {
width: 10px;
height: 24px;
background-color: #fa0;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="box" id="boxJS">
<div class="bar"></div>
<div class="mask"></div>
</div>
</body>
</html>
- JavaScript
<script>
window.onload = function () {
var box = document.getElementById("boxJS");
var bar = box.children[0];
var mask = box.children[1];
var leading = 0;
var ending = box.offsetWidth - bar.offsetWidth;
bar.onmousedown = function (event) {
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
console.log("leftVal = " + leftVal);
document.onmousemove = function (event) {
var event = event || window.event;
var move = event.clientX - leftVal;
if(move < leading) {
move = leading;
}
if(move > ending) {
move = ending;
}
bar.style.left = move + "px";
mask.style.width = move + "px";
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习的更多相关文章
- js进阶 12-3 如何实现元素跟随鼠标移动
js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...
- JS—事件对象
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- js 事件对象
/* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...
- JS事件对象与事件委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- JS 事件对象和事件冒泡
1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...
- JS:事件对象1
一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...
- js事件对象
哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...
随机推荐
- 个人用户使用genymotion 模拟器
genymotion android模拟器速度快,比较好用.对公司使用的是要收费的,但是对个人使用还是免费的,所以个人用户还可以继续使用.使用方法 1.注册账号,填写用户名.邮箱.密码.公司类型(选g ...
- windows系统安装ubuntu双系统
近期由于要学习python开发,经常需要用到linux环境.但是一般的编辑和办公在windows环境下有非常的舒服,所以就想装一个双系统.经过几经周折,终于在我的系统上装成功了,在这分享一些安装过程. ...
- php实现文件下载代码一例
php实现文件下载代码 需要用到header函数来发送相关信息给客户端浏览器,同时再结合filesize函数来读取文件大小并进行下载操作.简单的文件下载只需要使用HTML的连接标记<a>, ...
- HTML5学习笔记（六）：CSS基本样式
背景 需要注意:背景的所有属性都不会向下进行继承. 背景色 我们可以设定一个纯色为背景色. p {background-color: red;} a {background-color: #ff000 ...
- View：Android View的scrollTo(),scrollBy(),getScrollX(), getScrollY()的理解
Android系统手机屏幕的左上角为坐标系,同时y轴方向与笛卡尔坐标系的y轴方向想反.提供了 getLeft(), getTop(), getBottom(), getRight() 这些API来获取 ...
- Multi-cloud Kubernetes with Triton
https://www.joyent.com/blog/triton-kubernetes-multicloud While running an experimental Kubernetes cl ...
- javascript基础拾遗(十二)
1.javascript的单线程特性 在javascript中,所有的代码都是单线程的 因此所有的网络操作,浏览器事件,都必须是异步执行的,异步执行的逻辑是回调. function callback( ...
- 【内核】linux内核启动流程详细分析
Linux内核启动流程 arch/arm/kernel/head-armv.S 该文件是内核最先执行的一个文件,包括内核入口ENTRY(stext)到start_kernel间的初始化代码, 主要作用 ...
- windows下IntelliJ IDEA搭建kafka源码环境
于kafka核心原理的资料,网上有很多,但是如果不自己研究其源码,永远是知其然而不知所以然.下面就来演示如何在windows环境下来编译kafka源码,并通过IntelliJ IDEA开发工具搭建ka ...
- Linux下烧写工具DNW和USB驱动安装(一)
转:http://blog.csdn.net/zhengmeifu/article/details/8837930 Linux下编译记录:编译PC端USB驱动和写入工具dnw_linux.tgz压缩包 ...