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事件对象
哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...
随机推荐
- Sql Server Compact 4.0数据库部署安装
Sql Server Compact 4.0相比3.5版本增强了很多,支持Entity Framework 4.1,对于轻量级应用来讲,使用Sql Server Compact 4.0是个很好的选择, ...
- MySQL设置从库只读模式
常见现象 运维工作中会经常维护MySQL主从服务器,当然Slave我们只是用于读操作. 一般权限开通也只授权只读账号,但是有时候维护工作可能不是一个人在做,你不能保证其他同事都按照这个标准操作. 有同 ...
- xbox360 双65厚机自制系统无硬盘 U盘玩游戏方法
因为没有硬盘,又没有光盘.所以想把游戏放在U盘里面.用U盘来做为硬盘玩游戏. 现有的自制系统主要是FSD,但是FSD要用硬盘才能安装,理论上U盘也可以,但是我没有尝试了. 这里介绍的是玩xex格式的游 ...
- Traefik Kubernetes 初试
traefik 是一个前端负载均衡器,对于微服务架构尤其是 kubernetes 等编排工具具有良好的支持:同 nginx 等相比,traefik 能够自动感知后端容器变化,从而实现自动服务发现:今天 ...
- 【转】10个非常有用的网页设计工具 | Goodfav Magazine
10+ very useful Web Designer Tools Totally free legal computer eBooks download, available in various ...
- ios Coredata 关联 UITableView 数据自动更新
昨天写了一篇关于coredata的文章,自己觉得挺傻的文章.没想其它程序员看过后觉得更傻,于是今天决定写一篇厉害点的,首先写了一个coredata和uitableview结合的框架,非常简单实现了数据 ...
- PCIE协议解析 synopsys IP loopback 读书笔记（1）
1 Overview Core支持单个Pcie内核的Loopback功能,该功能主要为了做芯片验证,以及在没有远程接收器件的情况下完成自己的回环.同时,Core也支持有远程接收器件的loop ...
- java.util.Date和java.sql.Date 一点区别
最近无意中发现,在oracle中同一样的一个Date类型字段,存储的日期格式有两种不同的情况,第一种是2011-1-1 12:00:00,第二种是2011-1-1,仔细查找发现在向数据库中写数据的时候 ...
- HTML5学习笔记（二）：HTML基础学习之二
表单 表单用来传递用户数据,多用来与后端进行数据交互. 前端: <!DOCTYPE html> <html lang="en"> <head> ...
- 15个Spring的核心注释示例
众所周知,Spring DI和Spring IOC是Spring Framework的核心概念.让我们从org.springframework.beans.factory.annotation和org ...