想請問各位大神，小妹在一個網站上看到一個div實例，鼠標旁邊會因為進入不同的div換不同的圖，想要試著做做看，於是使用onmouseover和onmouseout先做了滑鼠進入監聽區域後會圖片出現和移開後圖片消失的過程，接著要實現出現的圖片要跟著滑鼠所以做了onmousemove，但是只有一個div會聽話～變換div後其它的div變成只會顯示圖片卻不能跟著滑鼠作用！不曉得是不是網頁只能一次onmousemove？或是我做錯了，該怎麼實現比較好呢？摸了好久跪求神人協助解答！萬分感謝～！
<script>
var img1 = document.getElementById("img1"),
img2 = document.getElementById("img2");
img1.onmouseover = function () {
img2.style.display = "block";
img2.style.opacity = "0.95";
}
img1.onmouseout = function () {
img2.style.display = "none";
}
document.onmousemove = function (ev) {
var oEvent = ev || event;
var oDiv = document.getElementById('img2');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
oDiv.style.left = oEvent.clientX + scrollLeft + 'px';
oDiv.style.top = oEvent.clientY + scrollTop + 'px';
}
</script>
<script>
var img3 = document.getElementById("img3"),
img4 = document.getElementById("img4");
img3.onmouseover = function () {
img4.style.display = "block";
img4.style.opacity = "0.95";
}
img3.onmouseout = function () {
img4.style.display = "none";
}
document.onmousemove = function (ev) {
var oEvent = ev || event;
var oDiv = document.getElementById('img4');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
oDiv.style.left = oEvent.clientX + scrollLeft + 'px';
oDiv.style.top = oEvent.clientY + scrollTop + 'px';
}
</script>
<script>
var img5 = document.getElementById("img5"),
img6 = document.getElementById("img6");
img5.onmouseover = function () {
img6.style.display = "block";
img6.style.opacity = "0.95";
}
img5.onmouseout = function () {
img6.style.display = "none";
}
document.onmousemove = function (ev) {
var oEvent = ev || event;
var oDiv = document.getElementById('img6');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
oDiv.style.left = oEvent.clientX + scrollLeft + 'px';
oDiv.style.top = oEvent.clientY + scrollTop + 'px';
}
</script>
已邀請的邦友 {{ invite_list.length }}/5
不知道你說的效果是不是這樣
codepen
SheepTW
因為我把所有 div 放一起寫
只建立一個 img 的 element
所以你只要看裡面的 function 的用法就好了
// 建立 img dom 物件
let img = document.createElement('img');
img.id="prev";
// 進去 div 時
el.onmouseover = function (e) {
// img 加入 div background url
img.src = `https://fakeimg.pl/400x400/${bgi[i]}`;
// 設定位置
let xOffset = 80; /* vertical */
let yOffset = 30; /* horizontal */
// img 加入 body
document.body.appendChild(img)
// 位置要跟著鼠標移動所以 在 onmouseover 裡面再產生 onmousemove
el.onmousemove = function(e) {
// 位置跟著鼠標移動
document.querySelector("#prev").style.top = `${e.pageY - xOffset}px`;
document.querySelector("#prev").style.left = `${e.pageX + yOffset}px`;
}
}
// 移開 div 時移除 img
el.onmouseout = function (e) {
document.body.removeChild(document.querySelector('#prev'));
}
另外 css 要設定指定圖片的 position 不然不會動
太感謝大大了～～還特定寫入教學行！！！瞬間明白這樣寫也很有效率！
後來找到另一種方式把它們合併新增一行自動參數設定img_status就也成功了～～js真是太有趣了各種邏輯判定！
document.onmousemove = function (ev) {
var oEvent = ev || event;
var oDiv = document.getElementById(img_status);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
oDiv.style.left = oEvent.clientX + scrollLeft + 'px';
oDiv.style.top = oEvent.clientY + scrollTop + 'px';
}
用css的hover 更直覺，寫在CSS裡即可
div#img1{
background-color: transparent;
}
div#img1:hover{
background-image: url("paper.gif");
background-color: #cccccc;
}
iThome鐵人賽
看影片追技術