JS---ケース:画像がマウスに追随して飛ぶ最終バージョン
12172 ワード
ケース:画像がマウスに追随して飛ぶ最終バージョン
きれいなキャンディの写真を交換して、ブログのトップページにプラスしたいですが、プラスした後、overwriteの元のhtmlのはずなので、マウスだけで飛ぶ効果があって、元の機能はすべて使うことができませんでした
commonを入れるjs
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
img {
position: absolute;
}
style>
head>
<body>
<img
src="https://images.cnblogs.com/cnblogs_com/jane-panyiyun/1620008/t_191224122527%E5%9C%A3%E8%AF%9E%E7%B3%96%E6%9E%9C.png?a=1577190334776"
alt="" id="im" />
<script src="common.js">script>
<script>
var evt = {
//window.event e
getEvent: function (evt) {
return window.event || evt;
},
//
getClientX: function (evt) {
return this.getEvent(evt).clientX;
},
//
getClientY: function (evt) {
return this.getEvent(evt).clientY;
},
//
getScrollLeft: function () {
return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
},
//
getScrollTop: function () {
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
},
// (pageX clientX+scrollLeft)
getPageX: function (evt) {
return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getClientX(evt) + this.getScrollLeft();
},
// (pageY clientY+scrollTop)
getPageY: function (evt) {
return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop();
}
};
//
document.onmousemove = function (e) {
my$("im").style.left = evt.getPageX(e) + "px";
my$("im").style.top = evt.getPageY(e) + "px";
};
script>
body>
html>