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事件对象
哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...
随机推荐
- gitlab 迁移、升级打怪之路：8.8.5--> 8.10.8 --> 8.17.8 --> 9.5.9 --> 10.1.4 --> 10.2.5
gitlab 迁移.升级打怪之路:8.8.5--> 8.10.8 --> 8.17.8 --> 9.5.9 --> 10.1.4 --> 10.2.5 gitlab 数据 ...
- 读取JPG图片的Exif属性（一） - Exif信息简介
https://blog.csdn.net/fioletfly/article/details/53605959 https://blog.csdn.net/a_big_pig/article/det ...
- IE报错：The given path's format is not supported
在使用FileUpload控件进行上传EXCEL文件时,本地调试上传无问题,但是发布之后报地址无效错误 一.出现这个错误的主要原因是,在本地上传图片的时候HttpPostedFileBase对象里面保 ...
- password学4——Java 加密解密之消息摘要算法（MD5 SHA MAC）
Java 加密解密之消息摘要算法(MD5 SHA MAC) 消息摘要 消息摘要(Message Digest)又称为数字摘要(Digital Digest). 它是一个唯一相应一个消息或文本的固定长度 ...
- FFmpeg AVPacket和AVFrame区别
简介 AVPacket:存储压缩数据(视频对应H.264等码流数据,音频对应AAC/MP3等码流数据)AVFrame:存储非压缩的数据(视频对应RGB/YUV像素数据,音频对应PCM采样数据)
- Android开发中adb命令的常用方法
Android的SDK中提供了很多有用的工具,在开发过程中如果能熟练使用这些工具,会让我们的开发事半功倍.adb是SDK提供的一个常用的命令行工具,全称为Android Debug Bridge,用于 ...
- 每日英语：KFC's Crisis in China Tests Ingenuity of Man Who Built Brand
Sam Su for years ran one of the highest-flying foreign business operations in China. These days, he' ...
- 每日英语：The Benefits of a Sleep Buddy
Stolen sheets, snoring and hot flashes are just some of the annoyances that lead a quarter of U.S. c ...
- python（48）：re.split 多分隔符
问题描述: 使用多个界定符分割字符串 问题 你需要将一个字符串分割为多个字段,但是分隔符(还有周围的空格)并不是固定的. 解决方案 string 对象的 split() 方法只适应于非常简单的字符串分 ...
- 【Linux技术】linux之configure,pkg-config和PKG_CONFIG_PATH
linux之configure,pkg-config和PKG_CONFIG_PATH 1.初衷 1)前面在装gtk时冒出来一个pkg-config,当时虽然不大清楚它是个什么东西,不过大致了解了下它的 ...