网页主页上的背景动态的，随鼠标移动汇聚，这算是啥网页设置

Posted 2023-05-08

很多网站都有这个效果，要想达到这个，您可以把这段JS代码放到HTML的Script标签中：

!function()function n(n,e,t)return n.getAttribute(e)||tfunction e(n)return document.getElementsByTagName(n)function t()var t=e("script"),o=t.length,i=t[o-1];returnl:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)function o()a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeightfunction i()r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x)for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))),x(i)var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n)window.setTimeout(n,1e3/45),w=Math.random,y=x:null,y:null,max:2e4;m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n)n=n||window.event,y.x=n.clientX,y.y=n.clientY,window.onmouseout=function()y.x=null,y.y=null;for(var s=[],f=0;d.n>f;f++)var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push(x:h,y:g,xa:v,ya:p,max:6e3)u=s.concat([y]),setTimeout(function()i(),100)();

求采纳

谢谢

有疑问在追问问我

参考技术A 你好 最近我也在查找关于怎么实现这种网页背景知识的文件 因为对做网页的知识很匮乏 所以找起来像大海捞针 不知道您是否实现了呢？如果有什么建议希望能够得到指点。多谢。 参考技术B 这个应该不是背景吧，是鼠标特效吧，使用程序写的吧追问

肯定是程序写出来的，是什么方式，什么软件写的呢

追答

鼠标特效可以使用JS做出来的呀，可能其他方式也可以把

VC++随鼠标移动显示坐标和坐标映射模式学习

VC6，新建一个单文档工程；

把这两个加到视类头文件；

        CPoint m_ptOut; //用来保存鼠标坐标
        CString strPosition; //用来保存输出的内容

视类CPP的构造函数中初始化，

        m_ptOut.x = 0;
        m_ptOut.y = 0;

用类向导为视类添加鼠标移动消息处理函数，该函数代码如下；

void CMmView::OnMouseMove(UINT nFlags, CPoint point) 

	// TODO: Add your message handler code here and/or call default
	//this->GetDC()->SetMapMode(MM_HIENGLISH);
	m_ptOut.x = point.x;
	m_ptOut.y = point.y;
	Invalidate();
	
	CView::OnMouseMove(nFlags, point);

OnDraw()函数代码如下；
 

void CMmView::OnDraw(CDC* pDC)

	CMmDoc* pDoc = GetDocument();
	ASSERT_VALID(pDoc);
	// TODO: add draw code for native data here
	//pDC->SetMapMode(MM_TEXT);
	//pDC->SetMapMode(MM_HIENGLISH);
	strPosition.Format("当前鼠标坐标:%d,%d", m_ptOut.x,m_ptOut.y);
	pDC->TextOut(m_ptOut.x,m_ptOut.y,strPosition);

运行如下；

这时是默认的坐标映射模式MM_TEXT；

坐标映射模式的概念；

由逻辑窗口到物理视口的映射过程：

    在窗口坐标系（一般是X轴向右递增，Y轴向上递增，即与笛卡尔坐标系一致，而坐标单位是用户自定义的）上绘图，然后要在视口坐标系（一般坐标原点在屏幕视图的左上角，X轴向右递增，Y轴向下为正方向）下显示，坐标映射方式则规定了窗口和视口的范围，各轴的相对方向、原点或缩放比例等；

八种映射方式：
        MM_TEXT（默认的坐标映射方式）
        MM_HIENGLISH（高精度英制坐标系） 1单位 = 0.001英寸
         MM_LOENGLISH（低精度英制坐标系） 1单位 = 0.01英寸
         MM_HIMETRIC（高精度公制坐标系） 1 单位 = 0.01毫米
         MM_LOMETRIC（低精度公制坐标系） 1 单位 = 0.1毫米
         MM_TWIPS（排版坐标系） 1 单位 = 1缇 = 1/1440英寸

        MM_ISOTROPIC（各向同性坐标系，x与y单位相等）
        MM_ANISOTROPIC（各向异性坐标系，x与y单位不等）

想看一下改为其他映射方式的情况；

MFC提供的SetMapMode函数是从pDC来调用；

    pDC->SetMapMode(MM_HIENGLISH);

如果在OnDraw()里加上这句，或者在OnMouseMove里也加上这句，

    this->GetDC()->SetMapMode(MM_HIENGLISH);

则运行如下，只能在很小的范围内显示数值；有时间继续；