整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 文字跟隨鼠標

          <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>
          

          學習從來不是一個人的事情,要有個相互監督的伙伴,想要學習或交流前端問題的小伙伴可以私信回復小明“學習” 獲取前端學習資料,一起學習!


          主站蜘蛛池模板: 福利电影一区二区| 蜜桃无码AV一区二区| 国产精品高清一区二区人妖| 日产亚洲一区二区三区| 亚洲国产综合无码一区| 亚洲日本va午夜中文字幕一区| 久久精品国产免费一区| 国产高清一区二区三区| 高清一区高清二区视频| 日本在线不卡一区| 国产乱码精品一区二区三区四川人 | 日韩av片无码一区二区不卡电影| 国产精品成人免费一区二区| 日韩动漫av在线播放一区| 精品国产一区二区三区久久| 亚洲中文字幕乱码一区| 精品人体无码一区二区三区| 亚洲美女视频一区二区三区| 精品中文字幕一区在线| 91在线一区二区| 亚洲午夜日韩高清一区| 国产精品视频一区麻豆| 国产一区在线视频| 国产精品亚洲专一区二区三区| 91福利国产在线观看一区二区| 亚洲欧美日韩国产精品一区| 亚洲色无码一区二区三区| 综合一区自拍亚洲综合图区| 无码午夜人妻一区二区三区不卡视频| 久久一区二区三区精华液使用方法| 国产激情一区二区三区成人91| 竹菊影视欧美日韩一区二区三区四区五区| 国产福利一区视频| 美女视频一区三区网站在线观看| 亚洲一区二区三区无码影院| 人妻夜夜爽天天爽一区| 久久久国产精品亚洲一区| 精品国产不卡一区二区三区| 国产福利一区二区| 亚洲日韩一区精品射精| 人妻无码第一区二区三区|