js實(shí)現(xiàn)鼠標(biāo)懸浮框效果

更新時(shí)間：2022年03月31日 10:20:03 作者：等待的L先生

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)鼠標(biāo)懸浮框效果的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #box{
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? min-height: 400px;
? ? ? ? ? ? _height:400px;
? ? ? ? ? ? margin: 200px auto;
? ? ? ? ? ? background-color: #ccc;
? ? ? ? ? ? margin-top: 20px;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .follwDiv{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: #d64e4e;
? ? ? ? ? ? color: black;
? ? ? ? ? ? border: solid 1px #9c2c2c;
? ? ? ? }
? ? ? ? .text{
? ? ? ? ? ? display: inline;
? ? ? ? ? ? width: auto;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? line-height: 50px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ?/* border: solid 1px red; */
? ? ? ? }
? ? </style>
</head>
<body>
? ? <pre>
? ? ? ? 跟隨鼠標(biāo)的提示框
? ? </pre>
? ? <div id="box">
? ? ? ? <div class="text1 ?text">中國(guó)嫦娥飛天的感想</div><br>
? ? ? ? <div class="text2 ? text" ?>中國(guó)是世界上最大的人口大國(guó)！</div>
? ? ? ? <div class="follwDiv"></div>
? ? ? ??
? ? </div>
? ? <script>
? ? ? ? var ores=document.getElementsByClassName("follwDiv")[0];
? ? ? ? // console.log(ores);
? ? ? ? ores.style.display="none";
? ? ? ? ores.style.position="absolute";
? ? ??
? ? ? ? var aText=document.getElementsByClassName("text");
? ? ? ? for(var i=0;i<aText.length;i++){
? ? ? ? ? ? ?var index;
? ? ? ? ? ? ? // aText[i].setAttribute("index",i); ?這種直接在網(wǎng)頁(yè)上顯示出HTML的屬性
? ? ? ? ? ? ? ? aText[i].index=i;
? ? ? ? ? ? aText[i].onmousemove=function(){
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? if(this.index===0){
? ? ? ? ? ? ? ? ? ? ores.innerHTML= "2013年12月14號(hào)，嫦娥3號(hào)衛(wèi)星登上了月球，激動(dòng)人心的時(shí)刻終于要到來(lái)了 ....";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(this.index===1){
? ? ? ? ? ? ? ? ? ? ores.innerHTML="中國(guó)有13億人口,是世界上最打的人口國(guó)家，也是世界上歷史四大古國(guó)之一.....";
? ? ? ? ? ? ? ? }


? ? ? ? ?var s= getMouseCoord();
? ? ? ? ? ? ores.style.left=s.X+"px";
? ? ? ? ? ? ores.style.top=5+s.Y+"px";
? ? ? ? ? ? ores.style.display="block";
? ? ? ? }
? ? ? ? aText[i].onmouseout=function(){
? ? ? ? ? ? ores.style.display="none";
? ? ? ? }
? ? ? ? }
? ? ??
//獲得鼠標(biāo)對(duì)象的坐標(biāo)
? ? ? ? function getMouseCoord(even){
? ? ? ? ? ?//處理兼容： ?事件對(duì)象
? ? ? ? ? ?e=even||window.event;
? ? ? ? ? ? var X= e.offsetX;//相對(duì)父元素
? ? ? ? ? ? var Y=e.offsetY;
? ? ? ? ? ? ?var screenX=e.clientX;//當(dāng)前可視區(qū)域
? ? ? ? ? ? ?var screenY=e.clientY;
? ? ? ? ? ? ?var pageX=e.pageX;//整個(gè)頁(yè)面
? ? ? ? ? ? ?var pageY=e.pageY;
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? X,
? ? ? ? ? ? ? ? Y,
? ? ? ? ? ? ? ? screenX,
? ? ? ? ? ? ? ? screenY,
? ? ? ? ? ? ? ? ?pageX,
? ? ? ? ? ? ? ? ?pageY
? ? ? ? ? ? }
? ? ? ? }
? ? ?
? ? </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: