js脚本（网页浮动窗口）

最新推荐文章于 2024-07-02 19:46:13 发布

不会飞的知了

最新推荐文章于 2024-07-02 19:46:13 发布

阅读量3.8k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_58085092/article/details/125132000

版权

JavaScript 浮动窗口网页快捷入口拖拽效果事件冒泡

关键词由CSDN通过智能技术生成

有时候进入常用网页，搜索查找相对来说有些繁琐，所以我将我的常用网页，整理成一个网页浮动窗口，直观且方便

//获取网页body，我们这段js代码生成的节点插入进去 
var body=document.getElementsByTagName('body')[0]
//createElement方法创建一个元素
var wysy_div=document.createElement('div');
/*setAttribute这个方法可以给元素添加属性并赋值setAttribute('id','id名字')，如富裕class，style都可以*/

//因为我们这里已经有了创建节点的变量，可以直接向dom节点一样操作
        wysy_tbwy_neirong_img.style.width='50px'
        wysy_tbwy_neirong_img.style.height='50px'
        wysy_tbwy_neirong_img.style.borderRadius='30%'
        wysy_tbwy_neirong_img.src=img_array[i]
        wysy_tbwy_neirong_a.href=a_array[i]
//appendChild此方法是将某一个节点添加入另一个节点
        wysy_tbwy_neirong_a.appendChild(wysy_tbwy_neirong_img)
        wysy_tbwy_neirong_div.appendChild(wysy_tbwy_neirong_a)
        wysy_tbwy_div.appendChild( wysy_tbwy_neirong_div)

掌握三个方法创建节点:createElement 设置节点:setAttribute 添加节点:appendChild

设置为一个可拖拽圆形div，且未展开前颜色稍微明显一点，双击点开后，改变透明度，且index为最大

且搜索栏要给一个阻止向上冒泡，不然点击搜索时浮窗也会跟着移动或者关闭

由于是原生js可能步骤比较繁琐，作者第一次这样干，后续会改进的

style类的js，大家会css的都懂，以下是真正的js代码

 //阻止事件冒泡
    wysy_neitong_div.ondblclick=function(e){
        e.stopPropagation()
    }
    wysy_neitong_div.onmousedown=function(e){
        e.stopPropagation()
    }
    wysy_div.ondblclick=function(e){
        e.selfPropagation()
    }
    document.onselectstart=new Function("return false");
    //添加一个展开过渡效果
    var num=1
    wysy_div.ondblclick=function () {

        if(num%2==0)
        {
            wysy_div.style.height='0px'
            wysy_div.style.width='0px'
            wysy_div.style.border='25px solid rgba(229,229,229,1)'
        }
        else{
            wysy_div.style.height='400px'
            wysy_div.style.width='300px'
            wysy_div.style.border='25px solid rgba(229,229,229,0)'
        }
        num++
    }

    //添加拖拽效果
	function move(){
		if( wysy_div == null) return;
        wysy_div.onmousedown  = function(e){
			var ev = e || window.event;  //兼容ie浏览器
			//鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
			var distanceX = ev.clientX -  wysy_div.offsetLeft;
			var distanceY = ev.clientY - wysy_div.offsetTop;
			document.onmousemove = function(e){
				var ev = e || window.event;  //兼容ie浏览器
                wysy_div.style.left = ev.clientX - distanceX + 'px';
                wysy_div.style.top = ev.clientY - distanceY + 'px';
			};
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			};
		};
	}
	move();
	//给索引写js
    wysy_button.onclick=function(){
        wysy_input.value='按钮被点击了'
    }
    wysy_button.onmousemove=function(){
        wysy_button_img.style.width='26px'
        wysy_button_img.style.height='21px'
        wysy_button_img.style.opacity='0.4'
    }
    wysy_button.onmouseleave=function(){
        wysy_button_img.style.width='25px'
        wysy_button_img.style.height='20px'
        wysy_button_img.style.opacity='1'
    }

以下是完整代码，大家自己研究研究

// ==UserScript==
// @name         网页浮动图标1.0
// @namespace    在校无聊生活
// @version      1.1
// @description  浮动浮动
// @author        Flying cicadas
// @match          *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=wjx.cn
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var body=document.getElementsByTagName('body')[0]
    var wysy_div=document.createElement('div');
    var wysy_neitong_div=document.createElement('div');
    var wysy_input=document.createElement('input');
    var wysy_button=document.createElement('button');
    var wysy_button_img=document.createElement('img');
    var wysy_tbwy_div=document.createElement('div');
    var wysy_js=document.createElement('p');
    var wysy_lxfs=document.createElement('p');
    //wysy_div.setAttribute
    wysy_div.style.backgroundColor='rgba(161,161,161,0.28)'
    wysy_div.style.height='0px'
    wysy_div.style.width='0px'
    wysy_div.style.display='block'

    wysy_div.style.transition='width 1s'
    wysy_div.style.transition='height 1s cubic-bezier(0.25, 0.1, 0, 0.48) 0s'
    //倒角
    wysy_div.style.border='25px solid rgba(229,229,229,1)'
    wysy_div.style. borderRadius='25px'

    wysy_div.style.zIndex='9999'
    wysy_div.style.position='absolute'
    //绝对位置
    wysy_div.style.top='0px'
    wysy_div.style.left='100px'
    wysy_div.style.overflow='hidden'



    wysy_input.style.margin='0px'
    wysy_input.style.height='20px'
    wysy_input.style.border='0px'
    wysy_input.value='抱歉该索引还没完成'

    wysy_button.style.padding='0px'
    wysy_button.style.width='25px'
    wysy_button.style.height='20px'
    wysy_button.style.margin='0px'
    wysy_button.style.border='none'
    wysy_button.style.backgroundColor='rgba(229,229,229,0)'

    wysy_button_img.style.width='25px'
    wysy_button_img.style.height='20px'
    wysy_button_img.style.border='none'
    wysy_button_img.src='https://bpic.588ku.com/element_origin_min_pic/19/06/15/d9950d01fcf1a1cdd20ae600ba7ad18a.jpg'

    //设置内部对齐
    wysy_neitong_div.style.display='flex'
    wysy_neitong_div.style.flexDirection='row'
    wysy_neitong_div.style.flexWrap='nowrap'
    wysy_neitong_div.style.justifyContent='center'
	wysy_neitong_div.style.alignItems='center'

    wysy_neitong_div.style.margin='10px auto'
    wysy_neitong_div.style.width='186px'
    wysy_neitong_div.style.border='5px solid rgba(229,229,229,0)'
    wysy_neitong_div.style.borderRadius='100%'


    var img_array=new Array(8)
    var a_array=new Array(8)
    a_array=['https://www.bilibili.com/','https://www.baidu.com/','https://docs.microsoft.com/','https://www.csdn.net/','https://www.runoob.com/','https://www.unrealengine.com/','http://jwxt.cqrk.edu.cn:18080/','https://music.163.com/']
    img_array=['https://imgoss.ilive.cn/site/202204/27/1651049648678.jpg','https://imgoss.ilive.cn/site/202104/16/1618556981421032.png','https://tse3-mm.cn.bing.net/th/id/OIP-C.aVPAJrpXZB2dm3ZWBPpZLQHaHa?w=184&h=184&c=7&r=0&o=5&dpr=1.5&pid=1.7','https://tse1-mm.cn.bing.net/th/id/R-C.1dbe444fce85d768c6a4715bc2bba725?rik=V1hhNhI3E0Prsw&riu=http%3a%2f%2fpp.myapp.com%2fma_icon%2f0%2ficon_11998967_1576820261%2f256&ehk=DDOo4RU9IjIokq%2bTIPMUfrzVU8BG3ipOa7IMbB51PuU%3d&risl=&pid=ImgRaw&r=0','https://api.iowen.cn/favicon/www.runoob.com.png','https://pic1.zhimg.com/v2-57da9ccd29106a5649091c174cfb1c74_b.jpg','https://cdn.img.up678.com/server/pic/2018/1/9/1515488876314785899.jpg','https://tse4-mm.cn.bing.net/th/id/OIP-C.GbevhzaobtHbCkYpyICF4AHaHa?pid=ImgDet&rs=1']
        for(let i=0;i<8;i++)
    {
        let wysy_tbwy_neirong_div=document.createElement('div');
        let wysy_tbwy_neirong_img=document.createElement('img');
        let wysy_tbwy_neirong_a=document.createElement('a');

        wysy_tbwy_neirong_div.style.width='50px'
        wysy_tbwy_neirong_div.style.height='50px'
        wysy_tbwy_neirong_div.style.borderRadius='30%'
        wysy_tbwy_neirong_div.style.margin='10px'

        wysy_tbwy_neirong_img.style.width='50px'
        wysy_tbwy_neirong_img.style.height='50px'
        wysy_tbwy_neirong_img.style.borderRadius='30%'
        wysy_tbwy_neirong_img.src=img_array[i]

        wysy_tbwy_neirong_a.href=a_array[i]

        wysy_tbwy_neirong_a.appendChild(wysy_tbwy_neirong_img)
        wysy_tbwy_neirong_div.appendChild(wysy_tbwy_neirong_a)
        wysy_tbwy_div.appendChild( wysy_tbwy_neirong_div)
    }

    wysy_tbwy_div.style.display='flex'
    wysy_tbwy_div.style.flexDirection='row-reverse'
    wysy_tbwy_div.style.flexWrap='wrap'
    wysy_tbwy_div.style.justifyContent='space-between'
	wysy_tbwy_div.style.alignItems='center'

    wysy_js.innerHTML='作者:不会飞的知了'
    wysy_js.style.position='absolute'
    wysy_js.style.left='130px'
    wysy_js.style.top='320px'
    wysy_js.style.fontSize='8px'

    wysy_lxfs.innerHTML='联系:2970376230@qq.com'
    wysy_lxfs.style.position='absolute'
    wysy_lxfs.style.left='130px'
    wysy_lxfs.style.top='346px'
    wysy_lxfs.style.fontSize='8px'
    


    wysy_button.appendChild(wysy_button_img)
    wysy_neitong_div.appendChild(wysy_button)
    wysy_neitong_div.appendChild(wysy_input)
    wysy_div.appendChild(wysy_lxfs)
    wysy_div.appendChild(wysy_js)
    wysy_div.appendChild(wysy_neitong_div)
    wysy_div.appendChild(wysy_tbwy_div)

    body.appendChild(wysy_div)
    //阻止事件冒泡
    wysy_neitong_div.ondblclick=function(e){
        e.stopPropagation()
    }
    wysy_neitong_div.onmousedown=function(e){
        e.stopPropagation()
    }
    wysy_div.ondblclick=function(e){
        e.selfPropagation()
    }
    document.onselectstart=new Function("return false");
    //添加一个展开过渡效果
    var num=1
    wysy_div.ondblclick=function () {

        if(num%2==0)
        {
            wysy_div.style.height='0px'
            wysy_div.style.width='0px'
            wysy_div.style.border='25px solid rgba(229,229,229,1)'
        }
        else{
            wysy_div.style.height='400px'
            wysy_div.style.width='300px'
            wysy_div.style.border='25px solid rgba(229,229,229,0)'
        }
        num++
    }

    //添加拖拽效果
	function move(){
		if( wysy_div == null) return;
        wysy_div.onmousedown  = function(e){
			var ev = e || window.event;  //兼容ie浏览器
			//鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
			var distanceX = ev.clientX -  wysy_div.offsetLeft;
			var distanceY = ev.clientY - wysy_div.offsetTop;
			document.onmousemove = function(e){
				var ev = e || window.event;  //兼容ie浏览器
                wysy_div.style.left = ev.clientX - distanceX + 'px';
                wysy_div.style.top = ev.clientY - distanceY + 'px';
			};
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			};
		};
	}
	move();
	//给索引写js
    wysy_button.onclick=function(){
        wysy_input.value='按钮被点击了'
    }
    wysy_button.onmousemove=function(){
        wysy_button_img.style.width='26px'
        wysy_button_img.style.height='21px'
        wysy_button_img.style.opacity='0.4'
    }
    wysy_button.onmouseleave=function(){
        wysy_button_img.style.width='25px'
        wysy_button_img.style.height='20px'
        wysy_button_img.style.opacity='1'
    }
    // Your code here...
})();

效果如下：