<html>
<head>
<title>文字跟隨鼠標</title>
<style type="text/css">
<!--
body{
background-color:#004593;
}
.spanstyle{
color:#fff000;
font-family:"Courier New";
font-size:18px;
font-weight:bold;
position:absolute; /* 絕對定位 */
top:-50px;
}
-->
</style>
<script language="javascript">
var x,y; //鼠標當前在頁面上的位置
var step=10; //字符顯示間距,為了好看,step=0則字符顯示沒有間距
var flag=0;
var message="Cascading Style Sheet"; //跟隨鼠標要顯示的字符串
message=message.split(""); //將字符串分割為字符數組
var xpos=new Array() //存儲每個字符的x位置的數組
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存儲每個字符的y位置的數組
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //動態生成顯示每個字符span標記,
//使用span來標記字符,是為了方便使用CSS,并可以自由的絕對定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //從事件得到鼠標光標在頁面上的位置
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake() { //重定位每個字符的位置
if (flag==1 && document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //從尾向頭確定字符的位置,每個字符為前一個字符“歷史”水平坐標+step間隔,
//這樣隨著光標移動事件,就能得到一個動態的波浪狀的顯示效果
ypos[i]=ypos[i-1]; //垂直坐標為前一字符的歷史“垂直”坐標,后一個字符跟蹤前一個字符運動
}
xpos[0]=x+step //第一個字符的坐標位置緊跟鼠標光標
ypos[0]=y
//上面的算法將保證,如果鼠標光標移動到新位置,則連續調用makenake將會使這些字符一個接一個的移動的新位置
// 該算法顯示字符串就有點象人類的游行隊伍一樣,
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style"); //妙用eval根據字符串得到該字符串表示的對象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else if (flag==1 && document.layers) {
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];
}
}
var timer=setTimeout("makesnake()",10) //設置10毫秒的定時器來連續調用makesnake(),時刻刷新顯示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html>
天接著來給大家分享一個非常好玩的小動畫,是在HTML5實訓中了解到并學習到的。它是一只可愛的鯨魚,會隨著鼠標的移動而移動,鼻尖會跟隨著鼠標。
先來張萌圖:
我們先來看看動畫的效果:
這個有趣的案例使用了SVG的<defs>元素,它用于預定義一個元素使其能夠在SVG圖像中重復使用。例如你可以將一些圖形制作為一個組,并用<defs>元素來定義它,然后你就可以在SVG圖像中將它當做簡單圖形來重復使用。
簡單說下SVG吧,全稱可縮放矢量圖形(Scalable Vector Graphics),是基于可擴展標記語言(XML),用于描述二維矢量圖形的一種圖形格式。SVG嚴格遵從XML語法,并用文本格式的描述性語言來描述圖像內容,是一種和圖像分辨率無關的矢量圖形格式。
接下來瞅瞅源代碼吧:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>鯨魚</title>
</head>
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
}
#whale {
height: 99.5%;
width: 100%;
}
</style>
<body>
<div id="whale"></div>
</body>
<script>
var whale = (function() {
var element = document.getElementById("whale"),
width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
fps = 30,
easy = 6,
maxspeed = 150,
delay = 15,
mouse = {
x: width / 2,
y: height / 2
},
defs, parts;
defs = '<defs><linearGradient gradientTransform="matrix(0 -2038 1116.5 0 -157 2622)" gradientUnits="userSpaceOnUse" id=":s6y" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/>
(此處省略若干行.....)
<linearGradient gradientTransform="matrix(0 -230 639 0 -126 -470)" gradientUnits="userSpaceOnUse" id=":sbt" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(20,22,21)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(33,35,33)" stop-opacity="1.000"/></linearGradient></defs>';
parts = [{
x: mouse.x,
y: mouse.y,
z: 43,
data: '<path d="M -3910 5327 Q -4485 5547 -4894 5547 Q -4901 5547 -4909 5547 L -4909 5547 Q -4756 5589 -4564 5590 Q -4293 5590 -4100 5506 Q -3927 5431 -3910 5327 Z M 3489 5312 Q 3494 5425 3681 5506 Q 3873 5590 4142 5590 Q 4394 5589 4579 5517 L 4579 5517 Q 4528 5535 4446 5535 Q 4159 5535 3489 5312 Z" fill="url(#:s98)"/><path d="M 4142 5017 Q 3873 5017 3681 5101 Q 3488 5185 3489 5304 L 3489 5312 Q 4159 5535 4446 5535 Q 4528 5535 4579 5517 L 4594 5511 L 4605 5506 Q 4797 5423 4797 5304 Q 4797 5185 4605 5101 Q 4413 5017 4142 5017 Z M -4564 5017 Q -4833 5017 -5025 5101 Q -5217 5185 -5217 5304 Q -5217 5423 -5025 5506 Q -4970 5530 -4909 5547 Q -4902 5547 -4894 5547 Q -4484 5547 -3910 5327 L -3908 5304 Q -3908 5185 -4100 5101 Q -4293 5017 -4564 5017 Z" fill="rgb(0,0,0)" fill-opacity="1.000"/>'
},
(此處省略若干行.....)
{
x: mouse.x,
y: mouse.y,
z: 0,
data: '<path d="M -63 -206 Q -430 -206 -765 -110 L -770 -18 Q -770 274 -580 482 Q -391 689 -125 689 Q 143 689 333 482 Q 522 277 522 -18 Q 522 -82 513 -142 Q 235 -206 -63 -206 Z" fill="url(#:sbs)"/><path d="M -125 -729 Q -394 -729 -580 -521 Q -740 -346 -765 -110 Q -430 -206 -63 -206 Q 235 -206 513 -142 Q 481 -358 333 -521 Q 143 -729 -125 -729 Z" fill="url(#:sbt)"/><path d="M 535 158 Q -69 23 -821 183" fill="none" stroke="rgb(188,188,188)" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1.000" stroke-width="63.481906870545906"/>'
}]
function init() {
document.addEventListener('mousemove', mousemove);
setInterval(loop, 1000 / fps);
}
function mousemove(e) {
mouse = {
x: e.clientX,
y: e.clientY
}
}
function loop() {
for (var i = 0; i < parts.length; i++) {
var params = {
mouse: mouse,
part: parts[i]
};
setTimeout(transform, parts[i].z * delay, params);
};
element.innerHTML = svg();
}
function svg() {
var svg = '<svg color-interpolation-filters="sRGB" style="fill-rule: evenodd; pointer-events: none; -moz-user-select: none; width: 100%; height: 100%;">';
for (var i = 0; i < parts.length; i++) {
svg += '<g transform="matrix(0.05 0 0 0.05 ' + parts[i].x + " " + parts[i].y + ')">';
svg += parts[i].data;
svg += '</g>';
};
svg += defs;
svg += '</svg>';
return svg;
}
function transform(params) {
params.part.x = definemaxspeed(params.mouse.x - params.part.x) / easy + params.part.x;
params.part.y = definemaxspeed(params.mouse.y - params.part.y) / easy + params.part.y;
}
function definemaxspeed(speed) {
if (speed > 0 && speed > maxspeed) return maxspeed;
if (speed < 0 && speed < -maxspeed) return -maxspeed;
return speed;
}
return {
init: init
};
})();
whale.init();
</script>
</html>
上面由于部分類似代碼過多將其省略,省略的地方工作量還挺大。如果想要全部代碼可以私聊哦~最后獻上一張被玩壞的圖:
這個用戶體驗為王的時代,有各種酷炫主流的畫面操作,毫無疑問是非常重要的,今天我們就來實現鼠標特效——火焰
代碼實現:
<html> <head> <meta charset="utf-8"> <title>HTML5 Canvas火焰跟隨鼠標動畫DEMO演示</title> <style> html, body { margin:0; padding:0; height: 100%; } </style> </head> <body> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <canvas id="fire"></canvas> <script> var Fire = function(){ this.canvas = document.getElementById('fire'); this.ctx = this.canvas.getContext('2d'); this.canvas.height = window.innerHeight; this.canvas.width = window.innerWidth; this.aFires = []; this.aSpark = []; this.aSpark2 = []; this.mouse = { x : this.canvas.width * .5, y : this.canvas.height * .75, } this.init(); } Fire.prototype.init = function() { this.canvas.addEventListener('mousemove', this.updateMouse.bind( this ), false); } Fire.prototype.run = function(){ this.update(); this.draw(); if( this.bRuning ) requestAnimationFrame( this.run.bind( this ) ); } Fire.prototype.start = function(){ this.bRuning = true; this.run(); } Fire.prototype.stop = function(){ this.bRuning = false; } Fire.prototype.update = function(){ this.aFires.push( new Flame( this.mouse ) ); this.aSpark.push( new Spark( this.mouse ) ); this.aSpark2.push( new Spark( this.mouse ) ); for (var i = this.aFires.length - 1; i >= 0; i--) { if( this.aFires[i].alive ) this.aFires[i].update(); else this.aFires.splice( i, 1 ); } for (var i = this.aSpark.length - 1; i >= 0; i--) { if( this.aSpark[i].alive ) this.aSpark[i].update(); else this.aSpark.splice( i, 1 ); } for (var i = this.aSpark2.length - 1; i >= 0; i--) { if( this.aSpark2[i].alive ) this.aSpark2[i].update(); else this.aSpark2.splice( i, 1 ); } } Fire.prototype.draw = function(){ this.ctx.globalCompositeOperation = "source-over"; this.ctx.fillStyle = "rgba( 15, 5, 2, 1 )"; this.ctx.fillRect( 0, 0, window.innerWidth, window.innerHeight ); this.grd = this.ctx.createRadialGradient( this.mouse.x, this.mouse.y - 200,200,this.mouse.x, this.mouse.y - 100,0 ); this.grd.addColorStop(0,"rgb( 15, 5, 2 )"); this.grd.addColorStop(1,"rgb( 30, 10, 2 )"); this.ctx.beginPath(); this.ctx.arc( this.mouse.x, this.mouse.y - 100, 200, 0, 2*Math.PI ); this.ctx.fillStyle= this.grd; this.ctx.fill(); this.ctx.font = "15em Amatic SC"; this.ctx.textAlign = "center"; this.ctx.strokeStyle = "rgb(50, 20, 0)"; this.ctx.fillStyle = "rgb(120, 10, 0)"; this.ctx.lineWidth = 2; this.ctx.strokeText("Fire",this.canvas.width/2, this.canvas.height * .72 ); this.ctx.fillText("Fire",this.canvas.width/2, this.canvas.height * .72 ); this.ctx.globalCompositeOperation = "overlay";//or lighter or soft-light for (var i = this.aFires.length - 1; i >= 0; i--) { this.aFires[i].draw( this.ctx ); } this.ctx.globalCompositeOperation = "soft-light";//"soft-light";//"color-dodge"; for (var i = this.aSpark.length - 1; i >= 0; i--) { if( ( i % 2 ) === 0 ) this.aSpark[i].draw( this.ctx ); } this.ctx.globalCompositeOperation = "color-dodge";//"soft-light";//"color-dodge"; for (var i = this.aSpark2.length - 1; i >= 0; i--) { this.aSpark2[i].draw( this.ctx ); } } Fire.prototype.updateMouse = function( e ){ this.mouse.x = e.clientX; this.mouse.y = e.clientY; //this.aFires.push( new Flame( this.mouse ) ); } var Flame = function( mouse ){ this.cx = mouse.x; this.cy = mouse.y; this.x = rand( this.cx - 25, this.cx + 25); this.y = rand( this.cy - 5, this.cy + 5); this.vy = rand( 1, 3 ); this.vx = rand( -1, 1 ); this.r = rand( 20, 30 ); this.life = rand( 3, 6 ); this.alive = true; this.c = { h : Math.floor( rand( 2, 40) ), s : 100, l : rand( 80, 100 ), a : 0, ta : rand( 0.8, 0.9 ) } } Flame.prototype.update = function() { this.y -= this.vy; this.vy += 0.05; this.x += this.vx; if( this.x < this.cx ) this.vx += 0.1; else this.vx -= 0.1; if( this.r > 0 ) this.r -= 0.1; if( this.r <= 0 ) this.r = 0; this.life -= 0.15; if( this.life <= 0 ){ this.c.a -= 0.05; if( this.c.a <= 0 ) this.alive = false; }else if( this.life > 0 && this.c.a < this.c.ta ){ this.c.a += .08; } } Flame.prototype.draw = function( ctx ){ ctx.beginPath(); ctx.arc( this.x, this.y, this.r * 3, 0, 2*Math.PI ); ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a/20) + ")"; ctx.fill(); ctx.beginPath(); ctx.arc( this.x, this.y, this.r, 0, 2*Math.PI ); ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")"; ctx.fill(); } var Spark = function( mouse ){ this.cx = mouse.x; this.cy = mouse.y; this.x = rand( this.cx -40, this.cx + 40); this.y = rand( this.cy, this.cy + 5); this.lx = this.x; this.ly = this.y; this.vy = rand( 1, 3 ); this.vx = rand( -4, 4 ); this.r = rand( 0, 1 ); this.life = rand( 4, 5 ); this.alive = true; this.c = { h : Math.floor( rand( 2, 40) ), s : 100, l : rand( 40, 100 ), a : rand( 0.8, 0.9 ) } } Spark.prototype.update = function() { this.lx = this.x; this.ly = this.y; this.y -= this.vy; this.x += this.vx; if( this.x < this.cx ) this.vx += 0.2; else this.vx -= 0.2; this.vy += 0.08; this.life -= 0.1; if( this.life <= 0 ){ this.c.a -= 0.05; if( this.c.a <= 0 ) this.alive = false; } } Spark.prototype.draw = function( ctx ){ ctx.beginPath(); ctx.moveTo( this.lx , this.ly); ctx.lineTo( this.x, this.y); ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 2) + ")"; ctx.lineWidth = this.r * 2; ctx.lineCap = 'round'; ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.moveTo( this.lx , this.ly); ctx.lineTo( this.x, this.y); ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")"; ctx.lineWidth = this.r; ctx.stroke(); ctx.closePath(); } rand = function( min, max ){ return Math.random() * ( max - min) + min; }; onresize = function () { oCanvas.canvas.width = window.innerWidth; oCanvas.canvas.height = window.innerHeight; }; var oCanvas; init = function() { oCanvas = new Fire(); oCanvas.start(); } window.onload = init; </script> </body> </html>
學習從來不是一個人的事情,要有個相互監督的伙伴,想要學習或交流前端問題的小伙伴可以私信回復小明“學習” 獲取前端學習資料,一起學習!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。