一款鼠标跟随特效代码

合集下载

WinForm实现鼠标拖动控件跟随效果

WinForm实现鼠标拖动控件跟随效果

WinForm实现⿏标拖动控件跟随效果本⽂实例为⼤家分享了WinForm实现⿏标拖动控件跟随效果的具体代码,供⼤家参考,具体内容如下1. 运⾏初始窗⼝如下:2. 拖动后效果如下:3. 代码如下:public partial class Form1 : Form{/** 理解了下⾯的⼏个概念,就能完全明⽩相对坐标的变化.* MouseEventArgs e 为事件⿏标参数,因此,e.Location 指⽰了位于事件源上的光标坐标* Cursor.Position 获取的是相对于⽤户屏幕的光标坐标* PointToClient() ⽅法可将屏幕坐标 Cursor.Position 换算成⼯作区的坐标* 因此,换算后的 Cursor.Position 减去 e.Location 得到的始终是事件源的 Location*//// <summary>/// ⿏标按下为true/// </summary>private bool Mousedown;/// <summary>/// ⿏标在事件源的位置/// </summary>private int CurX = 0;private int CurY = 0;public Form1(){InitializeComponent();}private void Controls_MouseDown(object sender, MouseEventArgs e){CurX = e.X;CurY = e.Y;Mousedown = true;if (sender is TextBox){((TextBox)sender).Cursor = Cursors.Arrow;}}private void Controls_MouseMove(object sender, MouseEventArgs e){if (Mousedown){// 获取当前屏幕的光标坐标Point pTemp = new Point(Cursor.Position.X, Cursor.Position.Y);// 转换成⼯作区坐标pTemp = this.PointToClient(pTemp);// 定位事件源的 LocationControl control = sender as Control;control.Location = new Point(pTemp.X - CurX, pTemp.Y - CurY);}}private void Controls_MouseUp(object sender, MouseEventArgs e){Mousedown = false;if (sender is TextBox){((TextBox)sender).Cursor = Cursors.IBeam;}}}以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

用Javascript实现鼠标移动跟随

用Javascript实现鼠标移动跟随

用Javascript实现鼠标移动跟随一、一个简单的图片、动画或文字随鼠标移动的例子制作方法:1、在 Dreamweaver5中,插入一个图层,在图层上写上要跟随鼠标移到的文字或图片。

2、在图层的属性面板上把“Layer ID”(图层的ID号)改为“div1”,以便程序操作;“T”值改为“-50”,使其初始位置在页面外;“Z-index”(层序号)值改为“50”,使其在最上层,不被其它层遮盖。

完成后的图层代码如下,不是使用 Dreamweaver的网友可把代码复制到<body>标记的后面:<div id="div1" style="position:absolute; left:250px; top:118px; width:60px; height:37px; z-index:"50"><img src="image/0050.gif" width="32" height="32">图、文跟鼠标试验</div> ,这里的图片和文字可换成你所需要的。

3、在<head>与</head>之间加上这样一段程序:<SCRIPT language="javascript"><!--var x,y; //声明存放当前鼠标位置坐标的变量var can=0 //声明能否移动的控制变量function canmove() { //控制能否移动的函数x=document.body.scrollLeft+event.clientX; //获取当前鼠标位置的X坐标y=document.body.scrollTop+event.clientY; //获取当前鼠标位置的Y坐标can=1;} //设置为可以移动function move() { //移动图层的函数if (can) {div1.style.posLeft=x+20; //设置图层位置的X坐标div1.style.posTop=y;} // 设置图层位置的Y坐标setTimeout("move()",30)} //每30毫秒刷新一次图层位置坐标--></SCRIPT>只要这几行代码就能使图片或文字跟着鼠标跑,有点出乎意料吧!事实就是这么简单。

鼠标跟随特效代码

鼠标跟随特效代码

鼠标跟随代码物体对鼠标的跟随可以采用在帧上添加as语句starDrag的方法来实现。

但是采用这种方法所实现的跟随过程太生硬,跟得实在是紧,也就是当鼠标移动到别的位置,物体也很快的移动了过来,假如要让物体慢慢(速度可以控制)的靠近鼠标,使用starDrag 这条语句就不能做到。

starDrag语句的功能其实是和下面的代码相同的。

onClipEvent (enterFrame) { xTarget = _root._xmouse; yTarget = _root._ymouse; _x = xTarget; _y = yTarget;}这几行代码是添加在物体(影片剪辑)上面的。

其中,语句_x = xTarget 和_y = yTarget的作用是使物体的坐标定位到(xTarget,yTarget)上,而(xTarget,yTarget)就是鼠标的当前坐标。

修改这几行代码,就可以使物体在鼠标移动后,慢慢的靠近鼠标。

_x = xTarget 等价于_x = xTarget + _x - _x(加一个减一个)即:_x =_x + (xTarget - _x)其中的(xTarget - _x)是物体的目标位置与当前位置的坐标差如果让(xTarget - _x)乘上一个小于1的系数,那么物体就不会突然移动到坐标(xTarget,yTarget)上,而是慢慢的靠过去。

于是,修改后的代码如下:onClipEvent (enterFrame) { xTarget = _root._xmouse; yTarget = _root._ymouse; fraction=0.5; _x = _x + (xTarget-_x)fraction; _y = _y + (yTarget-_y)fraction; }实现了慢慢靠近对“慢慢靠近”的加以利用:一个跟一个场景上放置一个影片剪辑,instance name命名为darg0在帧上添加代码:copies = 5;for (var i = 1; i=copies; i++) { duplicateMovieClip (drag0, drag+i, i); (drag+i).num = i;}上面的代码复制了5个,drag1~drag5,连同drag0,场景上共6个其中,还给drag1~drag5定义了内部变量drag1.num~drag5.num在场景上的drag0上面添加代码:onClipEvent (enterFrame) { if (num) { xTarget = (_root.drag+(num-1))._x; yTarget =(_root.drag+(num-1))._y; } else { xTarget = _root._xmouse; yTarget = _root._ymouse; } fraction = .5; _x += (xTarget-_x)fraction; _y += (yTarget-_y)fraction;}这几行代码使得drag0跟随着鼠标,drag1跟随着drag0,drag2跟随着drag1,……,drag5跟随着drag4解释一下if这个判断语句因为drag1.num~drag5.num的值都不为空,所以对于drag1~drag5这5个影片剪辑,执行的代码是:xTarget = (_root.drag+(num-1))._x;yTarget = (_root.drag+(num-1))._y;也就是跟随着前一个而对于drag0,由于没有给它定义num,它的值为空,所以对于drag0,执行的代码是:xTarget = _root._xmouse;yTarget = _root._ymouse;也就是跟随着鼠标“一个跟一个”代码的另一种写法上面的“一个跟一个”的制作,是在场景上只放置了一个影片剪辑,然后在影片剪辑上添加as代码,再通过在帧上添加as代码(duplicateMovie)来复制影片剪辑。

flash鼠标跟随代码怎么打

flash鼠标跟随代码怎么打

flash鼠标跟随代码怎么打flash鼠标跟随代码怎么打?方法一:1、先做个影片剪辑代替你的鼠标2、给你要跟随的影片剪辑起个名字叫aa3、在你这个影片剪辑中写onclipevent (enterframe) {this._x=_level0._xmouse;this._x=_level0._ymouse;}4、隐藏鼠标 mouse.hide();写在主场景的帧上方法二:mc为屏幕中的剪辑对象startdrag(mc,true);//mc可拖动,拖动点为mc的中心mouse.hide();//隐藏鼠标var i:number = 0;//定义变量i,值为0onmousemove = function(){//当鼠标移动时attachmovie("mc","mc"+i,i);//从库中加载链接名为mc的元件到屏幕中作为实例,命名为mc+1this["mc"+i]._x = _xmouse;this["mc"+i]._y = _ymouse;//这些实例与鼠标坐标位置相同i+=1//随着鼠标移动,实例数量递增};方法三:1.新建一个影片剪辑元件,画上你要想跟随的效果2.把影片剪辑拖到场景中,点中影片剪辑,到属性面板取实例名为:cursor_mc3.新建一个图层把脚本粘贴到图层二的第一桢,控制测试影片const speed:int = 10;stage.addeventlistener(event.enter_frame,onenter);function onenter(evt:event){if(math.abs(evt.target.mousex-cursor_mc.x)>2||math.abs(e vt.target.mousey-cursor_mc.y)>2){cursor_mc.x+=(evt.target.mousex-cursor_mc.x)/speed;//缓动就靠这个cursor_mc.y+=(evt.target.mousey-cursor_mc.y)/speed;//缓动就靠这个}else{cursor_mc.x = evt.target.mousex;cursor_mc.y = evt.target.mousey;}}。

html5实现鼠标跟随

html5实现鼠标跟随

Html5 实现鼠标跟随,纯js代码,没有flash或者图片之类的,chrome浏览器,firefix或者ie9以上支持。

代码很容易看懂效果图:源代码:<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript">var data = 0;window.onload = function() {C = Math.cos;S = Math.sin;U = 0;w = window;j = document;d = j.getElementById("c");c = d.getContext("2d");W = d.width = w.innerWidth;H = d.height = w.innerHeight;c.fillRect(0, 0, W, H);c.globalCompositeOperation = "lighter";c.lineWidth = 0.2;c.lineCap = "round";var count = 0;var bool = 0, t = 0; // thetavar fun = function(e) {if (window.T) {clearTimeout(T);count = 0;if (D == 9) {D = Math.random() * 15;f();}}X = e.pageX;Y = e.pageY;a = 0;b = 0;A = X;B = Y ;R = (e.pageX / W * 999 >> 0) / 999;r = (e.pageY / H * 999 >> 0) / 999;U = e.pageX / H * 360 >> 0;D = 9;g = 360 * Math.PI / 180;f = function(e) {count++;c.save();c.globalCompositeOperation = "source-over";if (e != 1) {c.fillStyle = "rgba(0,0,0,0.04)";c.fillRect(0, 0, W, H);}c.restore();i = 25;if (count <= data) {while (i--) {c.beginPath();if (D > 450 || bool) {if (!bool) {bool = 1;}if (D < 0.1) {bool = 0;}t -= g;D -= 0.1;}if (!bool) {t += g;D += 0.1;}q = (R / r - 1) * t;x = (R - r) * C(t) + D * C(q)+ (A + (X - A) * (i / 25)) + (r - R);y = (R - r) * S(t) - D * S(q)+ (B + (Y - B) * (i / 25));if (a) {c.moveTo(a, b);c.lineTo(x, y);}c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,1)";c.stroke();a = x;b = y;}}U -= 0.5;A = X;B = Y;};T = setInterval(f, 10);};d.onmousemove = function(e) {data = 2;fun(e);};};</script></head><body><canvas id="c" width="600px" height="500px"></canvas></body></html>。

鼠标跟随的制作(转载)

鼠标跟随的制作(转载)

鼠标跟随的制作(转载)鼠标跟随的制作鼠标跟随其实并不难,最简单的就是startDrag(),配合mouse.h ide()就可以改变鼠标在播放器内的样子,例如:onClipEvent(enterF rame){mouse.hide()startDrag(this,true)}好,稍微复杂一点,让鼠标移动的时候,后面会有几个mc跟着运动。

建立一个空白mc,用来放代码。

建立3个key frameframe1:i=0frame2:if(i<=7){duplicateMovieClip("_root.mc","_root.cm"+i,i);}i++//复制mcframe3:if(i>=7){i=0}gotoAndPlay(2)运行一下试试:)在复杂一点呢?让一些文字跟着鼠标运动呢?xposition_Array=new Array()yposition_Array=new Array()//定义两个数组,用来存放mous e的位置myword = function(depth){attachMovie("word","word" + depth,depth);return this["word" + depth];}//加载一个影片word,返回起name["word"+depth]function mymouse (word_string, wordx){if(wordx == undefined) this.lx = 20;else this.lx = wordx;this.string = word_string;this.Read_String();};//定义mymouse这个类,里面进行初试化Mymouse.prototype.Read_String = function(){this.word_mc = new Array();this.wordlenth = this.string.length;//wordlenth等于字符串长度for (var i = 0; i < this.wordlenth; i ++) {this.word_mc[i] = myword(i);//myword有reture this["word"+depth],所以this.word_mc[i]就等于"word" +depththis.word_mc[i].word = this.string.slice(i, i + 1);//从string中读取文字,写如this.word_mc[i]中的文本框word中}};Mymouse.prototype.move = function (){x_position=_root._xmousey_position=_root._ymouseif(xposition_Array.length>=this.wordlength&&yposition_Arr ay.length>=this.wordlength){xposition_Array.shift()yposition_array.shift()xposition_Array.push(x_position)yposition_Array.push(y_position)}else{xposition_Array.push(x_position)yposition_Array.push(y_position)}//将mouse的位置写入数组,记录下来for(i=0;i<=this.wordlength-1;i++){this.word_mc[i]._x=xposition_Array[this.wordlength-i-1]this.word_mc[i]._y=yposition_Array[this.wordlength-i-1]}for(i=0;i<=this.wordlenth-1;i++){if(xposition_Array[i]==xposition_Array[i-1]&&yposition_Arra y[i]==yposition_Array[i-1]){this.word_mc[i]._x=this.word_mc[i-1>._x+this.lx}}//定义鼠标静止后文字的位置}好,函数的定义部分就完成了,下面就新建一个图层写下my_mouse = new Mymouse("我真的好爱你哦",20);}_root.onEnterFrame = function(){my_mouse.Mymove();}好了,运行一下试试:) move部分可以自己修改,达到自己想要的效果。

jQuery实现炫酷的鼠标轨迹特效

jQuery实现炫酷的鼠标轨迹特效

jQuery实现炫酷的⿏标轨迹特效代码:复制代码代码如下:<!DOCTYPE html><html xmlns="/1999/xhtml"><head><title>jQuery实现炫酷的⿏标轨迹特效</title><base target="_blank" /><script type="text/javascript"> window.onload = function () {C = Math.cos; S = Math.sin; U = 0; w = window; j = document; d = j.getElementById("kele"+"yi_com"); c = d.getContext("2d"); W = d.width = w.innerWidth; H = d.height = w.innerHeight; c.fillRect(0, 0, W, H); c.globalCompositeOperation = "lighter"; c.lineWidth = 0.2; c.lineCap = "round"; var bool = 0, t = 0; d.onmousemove = function (e) {if (window.T) {if (D == 9) { D = Math.random() * 15; f(1); }clearTimeout(T);}X = e.pageX; Y = e.pageY; a = 0; b = 0; A = X, B = Y; R = (e.pageX / W * 999 >> 0) / 999; r = (e.pageY / H * 999 >> 0) / 999; U = e.pageX / H * 360 >> 0; D = 9; g = 360 * Math.PI / 180; T = setInterval(f = function (e) {c.save(); c.globalCompositeOperation = "source-over"; if (e != 1) { c.fillStyle = "rgba(0,0,0,0.02)"; c.fillRect(0, 0, W, H); }c.restore(); i = 25; while (i--) {c.beginPath(); if (D > 450 || bool) {if (!bool) { bool = 1; }if (D < 0.1) { bool = 0; }t -= g; D -= 0.1;}if (!bool) { t += g; D += 0.1; }q = (R / r - 1) * t; x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25)); if (a) { c.moveTo(a, b); c.lineTo(x, y) }c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; c.stroke(); a = x; b = y;}U -= 0.5; A = X; B = Y;}, 16);}j.onkeydown = function (e) { a = b = 0; R += 0.05 }d.onmousemove({ pageX: 300, pageY: 290 })}</script><style>body{margin:0;overflow:hidden}div{padding:1px 5px;background:#333;position:absolute;z-index:2;color:#555;font-family:arial}a{color:#ccf}a:hover{color:red}</style></head><body><div id="text"></div><canvas id="keleyi_com"></canvas></body></html>以上就是本⽂的内容了,希望⼩伙伴们喜欢此特效,快过年了,给⾃⼰的个⼈主页增添些⾊彩吧。

html+css+js实现canvas跟随鼠标的小圆特效源码

html+css+js实现canvas跟随鼠标的小圆特效源码

html+css+js实现canvas跟随⿏标的⼩圆特效源码效果(源码在最后):实现:1.定义标签:<h1>北极光之夜</h1><canvas id="draw" style=" position: fixed; display: block;">当前浏览器不⽀持Canvas,请更换浏览器后再试</canvas>2. ⽂字的基本样式:h1{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 5em;font-family: 'fangsong';color: rgb(38, 205, 247);}top: 50%;left: 50%;transform: translate(-50%,-50%); 居中对齐3. js部分,详细看注释:<script>/* ⾸先获取canvas画布 */var canvas = document.querySelector("#draw");var yuan = canvas.getContext("2d");/* 绑定窗⼝⼤⼩发⽣改变事件,让canvas随时铺满浏览器可视区 */window.onresize=resizeCanvas;function resizeCanvas(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}resizeCanvas();/* 定义数组,存下⾯触发移动事件时产⽣的⼩圆 */var arr = [];/* 绘制⼩圆形的⽅法,x与y是初始位置,r是圆半径 */function circle (x,y,r){this.x=x;this.y=y;this.r=r;/* 得⼀个随机颜⾊ */this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`/* 圆的移动⽅向,random函数为随机返回⼀个0.0到1.0的数,x可得随机正负数,y为随机正数 */this.xZou = parseInt(Math.random()*10-5);this.yZou = parseInt(Math.random()*10);/* 向arr数组末尾添加这个元素 */arr.push(this);}/* 更新圆形的⽅法 */circle.prototype.updated = function() {/* x和y增加,呈现圆形⼀直⾛ */this.x = this.x + this.xZou ;this.y = this.y + this.yZou ;/* 半径慢慢减少 */this.r = this.r - 0.1 ;/* 当半径⼩于1清除这个圆 */if(this.r<0){this.remove();}}/* 删除⼩圆的函数 */circle.prototype.remove = function (){/* 遍历数组,找到和调⽤这个函数相同的圆后⽤splice函数删除 */for(let i=0;i<arr.length;i++){if(this==arr[i]){arr.splice(i,1);}}}/* 渲染⼩圆 */circle.prototype.render = function(){yuan.beginPath();yuan.arc(this.x,this.y,this.r,0,2*3.14,false);yuan.fillStyle = this.color;yuan.fill();}/* 给画布绑定⿏标经过事件 */canvas.addEventListener('mousemove',function(e){/* 传⼊x,y,r。

鼠标特效代码及用法

鼠标特效代码及用法
7、流氓兔代码:
<STYLE>body{cursor:url(); }<流氓兔></STYLE>
8、小提琴代码:
<STYLE>body{CURSOR: url('/cursor/mouse001.cur');}</STYLE>
9、萨克斯代码:
<STYLE>body{CURSOR: url('/cursor/mouse051.cur');}</STYLE>
4、小白玫瑰花代码:
<STYLE> body{CURSOR:url('/cursor/mouse025.ani');}</STYLE>
5、小蜜蜂代码:
<STYLE>BODY{CURSOR:url('/cursor/mouse004.ani');}</STYLE>
6、小白兔代码:
<STYLE>body{CURSOR: url('/cursor/mouse031.ani ');}</STYLE>
鼠标特效代码及用法
全屏欣赏查看源文件代码
鼠标特效代码及用法
一、鼠标特效代码
1、小红旗代码:
<STYLE>body{CURSOR: url('/cursor/mouse038.ani');}</STYLE>
2、大红花代码:
<STYLE>body{cursor:url(/http%253A%252F%252Fplugin%252Esmileycentral%252Ecom%252Fassetserver%252Fcursor%252Ejhtml%253Fcur%253D1%2526i%253D9646a/image.gif); }</STYLE>

10个经典的网页鼠标特效代码

10个经典的网页鼠标特效代码

10个经典的⽹页⿏标特效代码1、⿏标指向出现实⽤特殊提⽰<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-CN" /><title>css打造⿏标触发效果</title><style type="text/css"><!--body {margin: 0;padding: 0;color: #000;font-size: 12px;line-height: 160%;text-align: left;height: 100%;font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode';}*{ margin:0; padding:0;}h2,h2 a:link,h2 a:hover,h2 a:visited{font-size: 14px;text-decoration: none;color: #000000;}.kw_from {padding:20px 0 0 0px;margin: auto;height: 300px;overflow: hidden;width: 650px;}.kw_from .sbtn{float:left;width:80px;padding: 16px 0 0 0;}.kw_from .searchMore{float:left;width:80px;padding: 4px;}#searchNav {width:430px;float: left;}#searchNav #conter1, #searchNav #conter3{float:left;width:250px;}#searchNav #conter2, #searchNav #conter4{float:left;width:180px;}#searchNav ul {padding: 0;margin: 0;list-style: none;}#searchNav li {float: left;}#searchNav li ul {display: none;top: 20px;}#searchNav li:hover ul, #searchNav li.over ul {display: block;float:left;}#searchNav ul li a{float:left;display:block;font-size:12px;padding:3px;text-decoration: none;color: #777;}#searchNav ul li a:hover{background-color:#f4f4f4;}#searchNav #jobKw{width:220px;height:18px;}#searchNav #cityKw{width:130px;height:18px;}--></style><script type="text/javascript"><!--//--><![CDATA[//><!--startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("searchNav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";}node.onmouseout=function() {this.className=this.className.replace(" over", "");}}}}}window.onload=startList;//--><!]]></script></head><li id="conter1"><h2>找什么</h2><input id="jobKw" name="jobKw" type="text" /><ul id="conter3"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="externa </ul></li><li id="conter2"><h2>在那⾥</h2><input id="cityKw" name="cityKw" type="text" /><ul id="conter4"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="externa </ul></li></ul><div class="sbtn"><input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索⼯作" /></div><div class="searchMore"><a href="search_expert.html" rel="external nofollow" >⾼级搜索</a><br /><a href="search_sort.html" rel="external nofollow" >分类搜索</a> </div></form></div></body></html>2、跟随⿏标的流星<html><head><title>⽹页特效---跟随⿏标的流星</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><script language="JavaScript"><!--Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')var speed=1;var RunTime = 0;var cntr=0;var xcntr=100;var Nslayers;var pulse=25;var onClrs;var Xpos = 421;var Ypos = 231;var _y;if (yers){window.captureEvents(Event.MOUSEMOVE);function xFollowMouse(evnt){Xpos = evnt.pageX;Ypos = evnt.pageY;}window.onMouseMove = xFollowMouse;document.write('<layer name="a0" left=10 top=10 bgcolor="#ff0000" clip="0,0,2,2"></layer>'+'<layer name="a1" left=10 top=10 bgcolor="#00ff00" clip="0,0,2,2"></layer>'+'<layer name="a2" left=10 top=10 bgcolor="#ffffff" clip="0,0,2,2"></layer>'+'<layer name="a3" left=10 top=10 bgcolor="#ffa500" clip="0,0,2,2"></layer>'+'<layer name="a4" left=10 top=10 bgcolor="#ff00ff" clip="0,0,2,2"></layer>'+'<layer name="a5" left=10 top=10 bgcolor="#8888ff" clip="0,0,2,2"></layer>'+'<layer name="a6" left=10 top=10 bgcolor="#fff000" clip="0,0,2,2"></layer>');}else if (document.all){function FollowMouse(){Xpos = document.body.scrollLeft+event.x;Ypos = document.body.scrollTop+event.y;}document.onmousemove = FollowMouse;document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">'+'<div id="c" style="position:relative">'+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff0000;font-size:2px"></div>'+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#00ff00;font-size:2px"></div>'+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></div>'+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffa500;font-size:2px"></div>'+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff00ff;font-size:2px"></div>'+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#8888ff;font-size:2px"></div>'+'<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#fff000;font-size:2px"></div>'+'</div>'+'</div>');}function sv2(){if (yers){for (i=0;i<7;i++){Nslayers="a"+i;yers[0].top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);yers[0].left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);var randCol=Math.round(Math.random()*8);yers[0].bgColor=Clrs[randCol];}cntr+=1;RunTime+=speed;stp=setTimeout('sv2()',10);if (cntr>=100){cntr=100;speed=2.5;for (i=0;i<7;i++){Nslayers="a"+i;yers[Nslayers].top=Ypos+cntr*Math.cos((RunTime-100)*i/90);yers[Nslayers].left=Xpos+cntr*Math.sin((RunTime-100)*i/90);}}if (RunTime>182){yers[Nslayers].top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);yers[Nslayers].left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5);}}}else if (document.all){for (i=0;i<ieDiv.all.c.all.length;i++){var randCol=Math.round(Math.random()*8);ieDiv.all.c.all[0].style.background=Clrs[randCol];ieDiv.all.c.all[0].style.top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);ieDiv.all.c.all[0].style.left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);}cntr+=1;RunTime+=speed;window.status=RunTime;stp=setTimeout('sv2()',10);if (cntr>=100){cntr=100;speed=2.5;for (i=0;i<ieDiv.all.c.all.length;i++){ieDiv.all.c.all[i].style.top=Ypos+cntr*Math.cos((RunTime-100)*i/90);ieDiv.all.c.all[i].style.left=Xpos+cntr*Math.sin((RunTime-100)*i/90);}}if (RunTime>182){speed=0.5;for (i=0;i<ieDiv.all.c.all.length;i++){ieDiv.all.c.all[i].style.top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);ieDiv.all.c.all[i].style.left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5);}}}if (RunTime>210){xcntr-=10;}if (yers)_y=-window.innerWidth-90;else if (document.all)_y=-document.body.clientWidth-90;if (xcntr <= _y){RunTime=0;speed=1;cntr=0;xcntr=100;}}sv2()//--></script></body></html>3、跟随⿏标的三⾊彩带<html><head><title>⽹页特效--很酷的跟随⿏标的三⾊彩带</title></head><body bgColor=#000000><!--将以下代码加⼊HTML的<Body></Body>之间--><script language="JavaScript"><!--var a_Colour='fff000';var b_Colour='00ff00';var c_Colour='ff00ff';var Size=120;var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;if (yers){window.captureEvents(Event.MOUSEMOVE);function nsMouse(evnt){xpos = window.pageYOffset+evnt.pageX+6;ypos = window.pageYOffset+evnt.pageY+16;}window.onMouseMove = nsMouse;}else if (document.all){function ieMouse(){xpos = document.body.scrollLeft+event.x+6;ypos = document.body.scrollTop+event.y+16;}document.onmousemove = ieMouse;}function swirl(){for (i = 0; i < 3; i++){YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);}ThisStep+=step;setTimeout('swirl()',10);}var amount=10;if (yers){for (i = 0; i < amount; i++){document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');}}else if (document.all){document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'+'<div id="IDiv" style="position:relative">');for (i = 0; i < amount; i++){document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>'); document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>'); document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>'); }document.write('</div></div>');}if (i < amount-1){ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;}else{ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];}}}else if (document.all){for (i = 0; i < amount; i++){if (i < amount-1){msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;}else{msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];}}}setTimeout("prepos()",10);}function Start(){swirl(),prepos()}window.onload=Start;// --></script></body></html>4、⿏标经过滚动提⽰⽂字<a href="http://www.⽹址.com" rel="external nofollow" _fcksavedurl="http://www.⽹址.com" target="_blank" onMouseOver="helpor_net_show(this,event,'⽹页⿏标特效')" onMouseOut="helpor_net_hide()">把⿏标放上来试试</a> <div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell"><layer name="nstip" width="1000px" bgColor="seashell"></layer></div><SCRIPT language="JavaScript"><!--if (!yers&&!document.all)event="test"function helpor_net_show(current,e,text){if (document.all&&document.readyState=="complete"){document.all.tooltip2.innerHTML='<marquee style="border:1px solid #3399ff">'+text+'</marquee>'document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10document.all.tooltip2.style.visibility="visible"}else if (yers){document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')document.tooltip2.document.nstip.document.close()document.tooltip2.document.nstip.left=0currentscroll=setInterval("scrolltip()",100)document.tooltip2.left=e.pageX+10document.tooltip2.top=e.pageY+10document.tooltip2.visibility="show"}}function helpor_net_hide(){if (document.all)document.all.tooltip2.style.visibility="hidden"else if (yers){clearInterval(currentscroll)document.tooltip2.visibility="hidden"}}function scrolltip(){if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)document.tooltip2.document.nstip.left-=5elsedocument.tooltip2.document.nstip.left=150}//--></SCRIPT>5、围绕⿏标旋转的三叶空间旋浆<html><head><title>围绕⿏标旋转的三叶空间旋浆</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><scriptlanguage="JavaScript"><!--//To add more stars simply add more colours in below array!!colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')//Alter nothing below!!amount=colours.length;YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,ns=(yers)?1:0,step=0.2,currStep=0,my=0,mx=0;if (ns){for (i=0; i < amount; i++)document.write('<LAYER NAME="nsstars'+i+'" BGCOLOR='+colours[i]+' CLIP="0,0,2,2"></LAYER>');}else{document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');for (i=0; i < amount; i++)document.write('<span id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:'+colours[i]+';font-size:2px"></span>');document.write('</div></div>');}if (ns){window.captureEvents(Event.MOUSEMOVE);function nMouse(evnt){my=evnt.pageY;mx=evnt.pageX}window.onMouseMove=nMouse;document.onmousemove=iMouse}function stars(){if (!ns)ie.style.top=document.body.scrollTop;for (i=0; i < amount; i++){var layer=(yers)?yers["nsstars"+i]:iestars[i].style;layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);}currStep+=step;}function delay(){Ydelay = YgetDelay+=(my-YgetDelay)*1/20;Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;stars();setTimeout('delay()',10);}delay();//--></script><script language="JavaScript"><!-- hidefunction goHist(a){history.go(a);}//--></script></body></html>6、围绕⿏标的⽴体星环(摩天轮)<html><head><title>围绕⿏标的⽴体星环</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><script language="JavaScript"><!--ns=(yers)?1:0;Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')var amount=8var step=0.3;var currStep=0;var Ypos=0;var Xpos=0;if (ns){for (i=0; i < amount; i++)document.write('<LAYER NAME="n'+i+'" LEFT=0 TOP=0 BGCOLOR=#FFFFFF CLIP="0,0,2,2"></LAYER>');window.captureEvents(Event.MOUSEMOVE);function nMouse(evnt){Ypos = evnt.pageY;Xpos = evnt.pageX;}window.onMouseMove=nMouse;}else{document.write('<div style="position:absolute;top:0px;left:0px">');document.write('<div style="position:relative">');for (i=0; i < amount; i++)document.write('<div id="me" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#00aaff"></div>'); document.write('</div></div>');function iMouse(){Ypos=event.y+document.body.scrollTop;Xpos=event.x+document.body.scrollLeft;}document.onmousemove = iMouse;}function Comet(){for (i=0; i < amount; i++){var randCol=Math.floor(Math.random()*Clrs.length);var layer=(yers)?yers['n'+i]:me[i].style;layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);if (ns) layer.bgColor=Clrs[randCol];else layer.background=Clrs[randCol];}currStep+=step;setTimeout("Comet()",10);}window.onload=Comet;// --></script></head><body bgcolor="#000000"></body></html>7、围绕⿏标的⽴体旋转⽂字<html><head><title>围绕⿏标的⽴体旋转⽂字</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><meta content="Microsoft FrontPage 5.0" name="GENERATOR"></head><body><script LANGUAGE="JavaScript"><!-- Beginif (document.all) {yourLogo = "⽹页制作⼤宝库"; //Not less than 2 letters!logoFont = "Arial";logoColor = "ff0000";//Nothing needs altering below!yourLogo = yourLogo.split('');L = yourLogo.length;TrigSplit = 360 / L;Sz = new Array()logoWidth = 100;logoHeight = -30;ypos = 0;xpos = 0;step = 0.09;currStep = 0;document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i = 0; i < L; i++) {document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'function Mouse() {ypos = event.y;xpos = event.x - 5;}document.onmousemove=Mouse;function animateLogo() {outer.style.pixelTop = document.body.scrollTop;for (i = 0; i < L; i++) {ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);Sz[i] = ie[i].style.pixelTop - ypos;if (Sz[i] < 5) Sz[i] = 5;ie[i].style.fontSize = Sz[i] / 1.7;}currStep -= step;setTimeout('animateLogo()', 20);}window.onload = animateLogo;}// End --></script></body></html>8、跟随⿏标的⽇期时间表盘<html><head><title>跟随⿏标的⽇期时间表盘</title></head><BODY><!--将以下代码加⼊HTML的<Body></Body>之间--><SCRIPT language=JavaScript><!--dCol="0000FF"fCol="FF0000"sCol="00FF00"mCol="000000"hCol="000000"ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;d=new Array("星期⽇","星期⼀","星期⼆","星期三","星期四","星期五","星期六");m=new Array("1⽉","2⽉","3⽉","4⽉","5⽉","6⽉","7⽉","8⽉","9⽉","10⽉","11⽉","12⽉");date=new Date();day=date.getDate();year=date.getYear();if (year < 2000) year=year+1900;TodaysDate="年 "+m[date.getMonth()]+" "+day+"⽇ "+d[date.getDay()]+" "+year;D=TodaysDate.split('');H='...';H=H.split('');M='....';M=M.split('');S='.....';S=S.split('');Face='1 2 3 4 5 6 7 8 9 10 11 12';font='Arial';size=1;speed=0.6;ns=(yers);ie=(document.all);Face=Face.split(' ');n=Face.length;a=size*10;ymouse=0;xmouse=0;scrll=0;props="<font face="+font+" size="+size+" color="+fCol+">";props2="<font face="+font+" size="+size+" color="+dCol+">";Split=360/n;Dsplit=360/D.length;HandHeight=ClockHeight/4.5HandWidth=ClockWidth/4.5HandY=-7;HandX=-2.5;scrll=0;step=0.06;currStep=0;y=new Array();x=new Array();Y=new Array();X=new Array();for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}if (ns){for (i=0; i < D.length; i++)document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');for (i=0; i < n; i++)document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');for (i=0; i < S.length; i++)document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');for (i=0; i < M.length; i++)document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');for (i=0; i < H.length; i++)document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');}if (ie){document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < D.length; i++)document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>');document.write('</div></div>');document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < n; i++)document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>');document.write('</div></div>');document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < H.length; i++)document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>'); document.write('</div></div>');document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < M.length; i++)document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>'); document.write('</div></div>')document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < S.length; i++)document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>'); document.write('</div></div>')}(ns)?window.captureEvents(Event.MOUSEMOVE):0;。

【前端】javascript实现鼠标跟随特效

【前端】javascript实现鼠标跟随特效

【前端】javascript实现⿏标跟随特效实现效果:实现代码:<!DOCTYPE html><html><head><title>⿏标跟随</title><meta charset="utf-8"><style type="text/css">body{height: 5000px;}div{position: absolute;border: 1px solid #ccc;cursor: pointer;width: 100px;height: 100px;background-color: #03c03c;opacity: 0.8;}</style></head><body><div></div><script type="text/javascript" src="myScroll.js"></script><script type="text/javascript">// ⿏标跟随// pageY和pageX的ie67ie兼容写法// 在页⾯的位置 = 看得见的 + 看不见的// pageY/pageX = event.clientY/clientX + scroll().top/scroll().leftvar obj = document.getElementsByTagName("div")[0];var timer = null;var targetX = 0,targetY = 0,leaderX = 0,leaderY = 0;// 给整个⽂档绑定点击事件获取⿏标位置document.onclick = function(event){// 兼容获取事件对象event = event || window.event;// ⿏标在页⾯的位置 = 被卷去的部分 + 可视区域部分var pageY = event.pageY || scroll().top + event.clientY;var pageX = event.pageX || scroll().left + event.clientX;targetY = pageY - obj.offsetHeight/2;targetX = pageX - obj.offsetWidth/2;// 清除定时器clearInterval(timer);timer = setInterval(function(){// X,先左右,后上下// 为盒⼦的位置获取值leaderX = obj.offsetLeft;// 获取步长var stepX = (targetX - leaderX)/10;// ⼆次处理步长stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);leaderX = leaderX + stepX;// 赋值obj.style.left = leaderX + "px";// YleaderY = obj.offsetTop;var stepY = (targetY - leaderY)/10;stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);leaderY = leaderY + stepY;obj.style.top = leaderY + "px";}, 30);}</script></body></html> myScroll.jsfunction scroll() { // 开始封装⾃⼰的scrollTopif(window.pageYOffset !== undefined) { // ie9+ ⾼版本浏览器// 因为 window.pageYOffset 默认的是0,所以需要判断return {left: window.pageXOffset,top: window.pageYOffset}}else if(patMode === "CSS1Compat") {// 标准浏览器,来判断有没有声明DTD return {left: document.documentElement.scrollLeft,top: document.documentElement.scrollTop}}return {// 未声明 DTDleft: document.body.scrollLeft,top: document.body.scrollTop}}。

FLASH里实现鼠标跟随的两种方法

FLASH里实现鼠标跟随的两种方法

FLASH里实现鼠标跟随的两种方法FLASH是一种流行的多媒体平台,可以创建富有互动性和动画效果的网页内容。

实现鼠标跟随效果可以增加网页的交互性,并为用户提供更好的使用体验。

下面将介绍两种实现鼠标跟随的方法,以及它们的实现原理和示例代码。

方法一:使用鼠标事件和坐标计算首先,我们可以利用Flash中的事件监听器和鼠标事件来实现鼠标跟随的效果。

具体步骤如下:1. 创建一个MovieClip并将其命名为“follower”。

2.在舞台上添加一个事件监听器,监听鼠标的移动事件。

3.在事件处理函数中获取鼠标的当前坐标。

4. 将“follower” MovieClip 的坐标设置为鼠标的当前坐标。

以下是示例代码:```actionscriptimport flash.events.MouseEvent;// 创建一个follower MovieClipvar follower:MovieClip = new MovieClip(;follower.graphics.beginFill(0xFF0000);follower.graphics.drawRect(0, 0, 50, 50);follower.graphics.endFill(;addChild(follower);//监听舞台上鼠标的移动事件stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);//鼠标移动事件处理函数function mouseMoveHandler(event:MouseEvent):void//获取鼠标的当前坐标var mouseXPos:Number = stage.mouseX;var mouseYPos:Number = stage.mouseY;// 设置follower MovieClip的坐标为鼠标的当前坐标follower.x = mouseXPos;follower.y = mouseYPos;```方法二:使用鼠标速度和缓动动画第二种方法是利用鼠标的移动速度和缓动动画来实现鼠标跟随的效果。

案例4鼠标跟随动画制作步骤

案例4鼠标跟随动画制作步骤

案例4鼠标跟随动画制作步骤鼠标跟随动画是一种很有趣的特效,它可以使页面更加生动有趣,增加用户的体验感。

在这个案例中,我们将学习如何使用HTML、CSS和JavaScript来制作一个简单的鼠标跟随动画。

步骤1:设置HTML文件首先,我们需要创建一个HTML文件来放置我们的代码。

我们可以使用以下代码来创建一个基本的HTML文件:```html<!DOCTYPE html><html><head><title>鼠标跟随动画</title><link rel="stylesheet" type="text/css" href="style.css"><script src="script.js"></script></head><body><div id="container"><div id="circle"></div></div></body></html>```步骤2:设置CSS文件接下来,我们需要创建一个CSS文件来设置动画的样式。

我们可以使用以下代码来创建一个基本的CSS文件:```css#containerwidth: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;#circlewidth: 100px;height: 100px;background-color: red;border-radius: 50%;position: absolute;transition: transform 0.3s;```在这个样式中,我们设置了一个容器 `container` ,用来放置鼠标跟随的圆形 `circle`。

编程语言控制鼠标跟随实例

编程语言控制鼠标跟随实例

4编程语言控制鼠标跟随实例本实例是制作一个Flash的动态鼠标跟随实例。

效果图如图52和图53所示。

图52 效果图一图53 效果图二4.1 设置文档属性(1) 按Ctrl+N组合键,新建一个文档。

(2) 按Ctrl+M组合键,打开【文档属性】对话框,并设置影片的尺寸宽为780像素,高为440像素(图中在数字之后以px表示像素),背景颜色为#99CC33,如图54所示。

图54 设置属性4.2 制作元件跟随鼠标的文字串为“Hi,look at me”,其所包含的文字为a,e,H,i,k,l,m,o,和t。

(1) 按Ctrl+F8组合键打开【创建新元件】对话框。

(2) 将元件命名为“a”,并选择元件的行为为“影片剪辑”。

(3) 选择【文字】工具,在元件“a”窗口中输入文字a,并设置其字体为“Comic Sans MS”,大小为20,颜色为红色,如图55所示。

(4) 重复步骤(1)~(3),分别建立元件e,H,i,k,l,m,o,t和一个空元件dummy(即什么也没有)。

(5) 按下Ctrl+L组合键打开【库】面板,在【库】面板中,按下按钮,新建一个目录Letters。

并把刚新建的所有元件拖动到目录中去,如图56所示。

图55 输入文字图56 【库】面板(6) 按Ctrl+F8组合键打开【创建新元件】对话框。

(7) 将元件命名为“period”,并选择元件的行为为“影片剪辑”。

(8) 在元件period编辑窗口中单击时间轴的第5帧,按“F6”键插入一个关键帧。

(9) 选择文本工具,输入一个“.”号。

(10) 单击时间轴第10帧,按F6键插入一个关键帧。

(11) 选择文本工具后,单击刚插入的“.”号,然后在其后面插入一个“.”号。

(12) 单击时间轴第15帧,按F6键插入一个关键帧。

(13) 选择文本工具后,单击刚插入的“.”号,再在其后面插入一个“.”号。

(14) 单击时间轴第20帧,按F5键插入一个帧,时间轴如图57所示。

AS代码制作超炫的圆环鼠标跟随特效 flashAS3实例

AS代码制作超炫的圆环鼠标跟随特效  flashAS3实例

基本步骤:1.复制出Num个鼠标,鼠标的透明度递减(如果i是递增的,N-i 就是递减的);2.改变了鼠标跟随的样式;3.使小的鼠标透明度大,大的鼠标透明度小(如果i是递增的,N-i 就是递减的)。

制作过程1:绘制出圆圈绘制一个鼠标,保存为影片剪辑,连接—>导出—>标志符"mouse"步骤2:加入AS代码:Mouse.hide();//隐藏原有鼠标var Num = 10;//鼠标跟随的数量for (var i = 0; i<Num ; i++){_root.attachMovie("mouse", "m"+i, i);this["m"+i]._xscale = this["m"+i]._yscale=i/Num*100;//鼠标的尺寸递增this["m"+i]._alpha = (Num-i)/Num*100;//鼠标的透明度递减}_root.onEnterFrame = function() {this["m"+0]._x = _xmouse;this["m"+0]._y = _ymouse;for (var i = 1; i<Num ; i++){this["m"+i]._x += ((this["m"+(i-1)]._x)-this["m"+i]._x)*0.5;this["m"+i]._y += ((this["m"+(i-1)]._y)-this["m"+i]._y)*0.5;}};。

鼠标跟随代码

鼠标跟随代码

鼠标跟随代码<STYLE>.spanstyle {COLOR: #0066ff; FONT-FAMIL Y: 宋体; FONT-SIZE: 9pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</STYLE><SCRIPT language=javascript>var message="同学们好";var x,y;var step=12;var flag=0;message=message.split("");var xpos=new Array();for (i=0;i<=message.length-1;i++) {xpos[i]=-50;}var ypos=new Array();for (i=0;i<=message.length-1;i++) {ypos[i]=-50;}function handlerMM(e) {x = (yers) ? e.pageX : document.body.scrollLeft+event.clientX+10;y = (yers) ? e.pageY : document.body.scrollTop+event.clientY;flag=1;}function makesnake() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step;ypos[i]=ypos[i-1];}xpos[0]=x+step;ypos[0]=y;for (i=0; i<=message.length-1; i++) {var thisspan = eval("span"+(i)+".style");thisspan.posLeft=xpos[i];thisspan.posTop=ypos[i];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}else if (flag==1 && yers) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step;ypos[i]=ypos[i-1];}xpos[0]=x+step;ypos[0]=y;for (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i);thisspan.left=xpos[i];thisspan.top=ypos[i];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}}</SCRIPT><SCRIPT language=javascript>for (i=0;i<=message.length-1;i++) {document.write("<span id='span"+i+"' class='spanstyle'>");document.write(message[i]);document.write("</span>");}if (yers) {document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;</SCRIPT><SCRIPT language=javascript>function pageonload() {makesnake();window.setTimeout("pageonload();", 2);}</SCRIPT><body onload=javascript:pageonload()>第二个要完成此效果需要三个步骤第一步:把如下代码加入到<head>区域中<STYLE>.spanstyle {COLOR: #0066ff; FONT-FAMIL Y: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</STYLE>第二步:把如下代码加入到<body>区域中<SCRIPT language=javascript>var message="我爱你一生一世!";var x,y;var step=12;var flag=0;message=message.split("");var xpos=new Array();for (i=0;i<=message.length-1;i++) {xpos[i]=-50;}var ypos=new Array();for (i=0;i<=message.length-1;i++) {ypos[i]=-50;}function handlerMM(e) {x = (yers) ? e.pageX : document.body.scrollLeft+event.clientX+10;y = (yers) ? e.pageY : document.body.scrollTop+event.clientY;flag=1;}function makesnake() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step;ypos[i]=ypos[i-1];}xpos[0]=x+step;ypos[0]=y;for (i=0; i<=message.length-1; i++) {var thisspan = eval("span"+(i)+".style");thisspan.posLeft=xpos[i];thisspan.posTop=ypos[i];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}else if (flag==1 && yers) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step;ypos[i]=ypos[i-1];}xpos[0]=x+step;ypos[0]=y;for (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i);thisspan.left=xpos[i];thisspan.top=ypos[i];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}}</SCRIPT><SCRIPT language=javascript>for (i=0;i<=message.length-1;i++) {document.write("<span id='span"+i+"' class='spanstyle'>");document.write(message[i]);document.write("</span>");}if (yers) {document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;</SCRIPT><SCRIPT language=javascript>function pageonload() {makesnake();window.setTimeout("pageonload();", 2);}</SCRIPT>第三步:把“onload=javascript:pageonload()”加在<body>标记里例如:<body onload=javascript:pageonload()>。

鼠标跟随flash特效

鼠标跟随flash特效

鼠标跟随flash特效鼠标跟随flash特效一、鼠标特效展示方法:请将FLASH地址添加到下例代码中,设置好宽度和高度即可。

&lt;EMBED align=middle src=flash文件地址width=宽度height=高度type=application/x-shockwave-flash allowscripttAccess="sameDomain" quality="high"&gt;&lt;/EMBED&gt;/flash/2009571/17.swf二、图片添加鼠标特效代码&lt;TABLE style="WIDTH: 540px; HEIGHT: 121px" border=0 cellPadding=0 width=540 background=背景图地址.jpg&gt; &lt;TBODY&gt;&lt;TR&gt;&lt;TD&gt;&lt;EMBED style="WIDTH: 540px; HEIGHT: 400px" height=400 type=application/x-shockwave-flash align=right width=540 src=鼠标特效地址quality="high"wmode="transparent"&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBOD Y&gt;&lt;/TABLE&gt;&lt;FONT size=+0&gt;&lt;/FONT&gt;&lt;P&gt;&lt;/P&gt;。

JavaScript实现鼠标移动粒子跟随效果

JavaScript实现鼠标移动粒子跟随效果

JavaScript实现⿏标移动粒⼦跟随效果本⽂实例为⼤家分享了JavaScript实现⿏标移动粒⼦跟随效果的具体代码,供⼤家参考,具体内容如下※如上图是最终显⽰效果,跟随⿏标的移动,⽣成的粒⼦跟随。

需要⽤到的js库:。

是⼀个JavaScript实⽤库,提供了⼀整套函数式编程的实⽤功能,但是没有扩展任何JavaScript内置对象。

它是这个问题的答案:“如果我在⼀个空⽩的HTML页⾯前坐下,并希望⽴即开始⼯作,我需要什么?”...它弥补了部分jQuery没有实现的功能,同时⼜是Backbone.js必不可少的部分。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>⿏标粒⼦demo</title><style>canvas { background: #333; }</style></head><body><canvas width="800" height="500">您的浏览器不⽀持此标签!</canvas><script src="js/underscore.min.js"></script><script>// 获取canvas元素var cvs = document.querySelector("canvas");// 获取上下⽂对象var ctx = cvs.getContext("2d");// 声明⼀个空数组,⽤来放后⾯⽣成的⼩球var ballsArr = [];// 创建⼀个⼩球类function Balls (x, y){// 坐标x为传进来的xthis.x = x;// 坐标y为传进来的ythis.y = y;// ⽣成的⼩球半径为5到10中的任⼀整数(参数随便)this.r = _.random(5, 10);// ⽣成的⼩球的颜⾊为这七种颜⾊中的随机⼀种(参数随便)this.c = _.sample(["red", "orange", "yellow", "green", "cyan", "blue", "white"]);// ⼩球坐标x的增量为-4到4之间的整数(参数随便)this.dx = _.random(-4, 4);// ⼩球坐标y的增量为-4到4之间的整数(参数随便)this.dy = _.random(-4, 4);// 把⽣成的⼩球存⼊数组ballsArrballsArr.push(this);}// 给所有Balls绑定⼀个⽅法update,⽬的是为了每次都能按照随机⽅向移动Balls.prototype.update = function (){// 每次x坐标加上增量dxthis.x += this.dx;// 每次y坐标加上增量dythis.y += this.dy;// 每次半径缩⼩0.5(参数随便)this.r -= 0.5;// 半径⼩于等于0的话,就从⼩球数组中移出if(this.r <= 0){_.without(ballsArr, this);}}// 给所有Balls绑定⼀个⽅法render,⽬的是画圆。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
flash常见的鼠标跟随效果flash常见的鼠标跟随效果flash中的鼠标可以更有个性些做起来也不算复杂比如把鼠标指针换成你喜欢的样子或让鼠标指针有一个灵动飘逸的跟随如下图中的效果怎么样
一款鼠标跟随特效代码
篇一:网页制作特效——鼠标特效代码
网页制作特效——鼠标特效
说明:选择下列特效中的一种,选择其中蓝色的部分,粘贴在html的之间,预览效果。
for (i; i<_; i++) {
arrTextSprite[i] = addTextField(_(i));
(arrTextSprite[i]);
}
arrTextSprite[0].startDrag(false);
(_FRAME,myMouse);
function myMouse(evt:Event) {
mouse_ = mouseX;
mouse_ = mouseY;
}
();
其中(); 的作用是隐藏默认的鼠标指针,如果要恢复显示:();
二、例2:鼠标指针后面跟随飘逸的枫叶:
过程:
1)把这几张图下载到你的电脑上,并导入到flash库中去。
2)把这些图拖到舞台上去,按图从小到大的顺序依次分别右击他们,并选“转换成元件——影片剪辑——确定”:
4)将十字和圆圈叠起来,调好适当大小位置,并组合;将组合图中心点对齐到“十”字上,大小设为16*16像素,一个小星星,如图:
(三)制作星星播放动画:
1)插入一个元件,类型为“影片剪辑”,进入到元件编辑视图下,在第一帧上,将刚才做好星星拖入,中心点对齐到中间“十”字上。
2)在第10帧上插入一个关键帧,将星星Y轴下调130像素,旋转90度,并与第一帧之间创建补动画。
一、例1:让鼠标指针变变样:
把鼠标变成上面第一个图的样子,当然你爱咋样子的都行,比如一个字,一种形状,一张图片都行。
过程:
1)插入一个元件,类型为影片剪辑,自己动手画个形状吧,像上面图一那样的也行,这不要紧,要紧的是在元件编辑视图下,要将这个图形的左上角对准中心的十字,否则鼠标定位时会有误差,如图:
arrTextSprite[0].x = + 20;
arrTextSprite[0].y = + 10;
var speed:uint = 3;
for (i = 1; i<; i++) {
arrTextSprite[i].x += (arrTextSprite[i-1].x - arrTextSprite[i].x + 15)/speed; arrTextSprite[i].y += (arrTextSprite[i-1].y - arrTextSprite[i].y)/speed; }
this[“level”+i].y += (this[“level”+ (i-1)].y - this[“level”+ i].y )/speed;
}
}
三、例3:鼠标跟随飘动的文字
这个其实和例2是一样的,把图片换成一个个文字,其他的过程一样,数量有些不同,改改相关的代码即可。但这个例子,想和大家一起用代码方式做,代码如下,不理解也没关系,复制到第一帧上,可以改一改跟随文字,比如把“打倒日本帝国主义”改成“钓鱼岛是中国的固有领土”,呵呵:
function Mouse(evnt){
ymouse = (ns)?+ClockFromMouseY-():+ClockFromMouseY; xmouse = (ns)?+ClockFromMouseX:+ClockFromMouseX;
}
(ns)?=Mouse:=Mouse;
function ClockAndAssign(){
2)画一个无线框圆,白色,透明度33%,再调成纵向窄条;画一个无边线六边形,白色,透明66%,拽一拽上下两个顶点,让它们不那么冒尖,然后再调成窄条;再制一个窄条,透明度调成100%,即不透明。将三个窄条组合,调整长短、宽窄,然后叠起来;最后再复制一下,叠成十字形状,如下图:
3)画三个圆,无边线,白色,透明分别为33%、66%、100%,再将它们组合、重叠起来,调整好大小位置,如图:
= config || {};
= $(id);
sp = || 4;
rs = || 1;
m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight* .5};
();
();
}
= {
setXY : function () {
var _this = this;
按“从小到大”的顺序操作,是为了叠放次序,后来居上:虽然在同一时间轴图层上,但后转换成影片剪辑的会居上方。
3)同样从小到大,依次取实例名为:
level0、 level1、 level2、 level3、 level4、level5
4)在帧上加一些简单的代码即可:
(false);
(_FRAME,myMouse);
(一)时钟环绕鼠标
之间-->
”;
props2=““;
Split=360/n;
Dsplit=360/;
HandHeight=ClockHeight/
HandWidth=ClockWidth/
HandY=-7;
HandX=-;
scrll=0;
step=;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
(二)很酷的跟随鼠标的三色彩带
之间-->
篇二:简单的网页鼠标跟随代码
放入标签中就OK
html {
overflow: hidden;
}
body {
position: absolute;
height: 100%;
width: 100%;
margin:0;
padding:0;
}
#screen {
background:#000;
time = new Date ();
secs = ();
sec = - + * secs/30;
mins = ();
min = - + * mins/30;
hr = ();
hrs = - + * hr/6+*parseInt(())/360;
if (ie){
=;
=;
=;
=;
=;
}
for (i=0; i
}
//*********************复制到这一行结束
*******************************************
四、例4:群星飞瀑鼠标跟随效果
过程:
(一)新建一个flash文档,背景为黑色,帧频为20。
(二)绘制星星:
1)插入一个元件,类型为“图形”,确定后进入到元件编辑状态下,适当放大视图,然后进行绘图。
= 20;
= 20;
= false;
= false;
= myTextFormat;
= str;
////将文本框加入到Sprite,就像是在舞台上将一个文本框转换成影片剪辑
var mySprite:Sprite = new Sprite();
(myTextField);
return mySprite;
var $ = function (i) {return (i)},
addEvent = function (o, e, f) { ? (e, f, false) : (‘on’+e, function(){(o)})},
OBJ = , sp, rs, N = 0, m;
var init = function (id, config) {
for(var i=0;i
new Follow(‘screen’, {speed: 4,
animR : 2,
fn : function (i, j) {
return {
x : j/4*(i),
y : j/4*(i)
}
}})
篇三:Flash常见的鼠标跟随效果
[Flash常见的鼠标跟随效果
flash中的鼠标可以更有个性些,做起来也不算复杂,比如把鼠标指针换成你喜欢的样子,或让鼠标指针有一个灵动飘逸的跟随,如下图中的效果,怎么样?动手试试:
//*************************从这里复制开始
**************************************
var _text:String =“打倒日本帝国主义”;
var i:uint = 0;
var arrTextSprite:Array = new Array();
6)图层1的最后一帧(第30帧)添加代码stop(),即播放到最后停止。
( 四)添加类:
在库中找到刚才做好的动画影片剪辑元件, “右击——链接”,如图勾选两个选项,“类”后面输入:mouse_mc,基类保留默认。
(五)在主场景第一帧中加入代码:
(_MOVE,onMove);
var nCount:uint = 0;
3)在时间轴上,再添加四个图层,分别为“图层2到图层5”,再将“图层1”已经做
好的帧分别复制粘贴到这四个图层上,如下图左:
4)由下往上,将各图层第一帧上的星星透明度分别调整为20%、40%、60%、80%、100%,最后一帧上的星星透明度都调为0%全透明。
5)再如上图右边那样,将各图层的第一层和最后一帧的位置拖动到适当的位置上
相关文档
最新文档