javascript特效問(wèn)題 頁(yè)面上有許多點(diǎn)一直跟隨著鼠標(biāo)指針的移動(dòng)。如何實(shí)現(xiàn)這個(gè)這個(gè)效果.

新建html復(fù)制黏貼運(yùn)行即可

創(chuàng)新互聯(lián)建站作為成都網(wǎng)站建設(shè)公司，專注網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)成都定制網(wǎng)頁(yè)設(shè)計(jì)方案、改版、費(fèi)用等問(wèn)題，行業(yè)涉及塔吊租賃等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

html

head

title鼠標(biāo)跟隨效果/title

style type="text/css"

html {

overflow: hidden;

}

body {

position: absolute;

height: 100%;

width: 100%;

margin:0;

padding:0;

}

#screen {

background:#000;

position: absolute;

width: 100%;

height: 100%;

}

#screen span {

background: #fff;

font-size: 0;

overflow: hidden;

width: 2px;

height: 2px;

}

/style

script type="text/javascript"

var Follow = function () {

var $ = function (i) {return document.getElementById(i)},

addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},

OBJ = [], sp, rs, N = 0, m;

var init = function (id, config) {

this.config = config || {};

this.obj = $(id);

sp = this.config.speed || 4;

rs = this.config.animR || 1;

m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};

this.setXY();

this.start();

}

init.prototype = {

setXY : function () {

var _this = this;

addEvent(this.obj, 'mousemove', function (e) {

e = e || window.event;

m.x = e.clientX;

m.y = e.clientY;

})

},

start : function () {

var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;

OBJ[N++] = OO = new CObj(null, 0, 0);

for(var i=0;i360;i+=20){

var O = OO;

for(var j=10; j35; j+=1){

var x = fn(i, j).x,

y = fn(i, j).y;

OBJ[N++] = o = new CObj(O , x, y);

O = o;

}

}

setInterval(function() {

for (var i = 0; i N; i++) OBJ[i].run();

}, 16);

}

}

var CObj = function (p, cx, cy) {

var obj = document.createElement("span");

this.css = obj.style;

this.css.position = "absolute";

this.css.left = "-1000px";

this.css.zIndex = 1000 - N;

document.getElementById("screen").appendChild(obj);

this.ddx = 0;

this.ddy = 0;

this.PX = 0;

this.PY = 0;

this.x = 0;

this.y = 0;

this.x0 = 0;

this.y0 = 0;

this.cx = cx;

this.cy = cy;

this.parent = p;

}

CObj.prototype.run = function () {

if (!this.parent) {

this.x0 = m.x;

this.y0 = m.y;

} else {

this.x0 = this.parent.x;

this.y0 = this.parent.y;

}

this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;

this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;

this.css.left = Math.round(this.x) + 'px';

this.css.top = Math.round(this.y) + 'px';

}

return init;

}();

/script/head

body

div id="screen"/div

script type="text/javascript"

new Follow('screen', {speed: 4,

animR : 2,

fn : function (i, j) {

return {

x : j/4*Math.cos(i),

y : j/4*Math.sin(i)

}

}})

/script/body

/html

如何用js使小球來(lái)回彈動(dòng)

你好，

可以通過(guò)判斷小球邊緣和窗口高度來(lái)實(shí)現(xiàn)

例如垂直下落，給小球y方向的初速度和加速度（模擬重力加速度），當(dāng)小球的小邊緣接觸窗口底部時(shí)，將 y = -y；加速度不反向；當(dāng)達(dá)到最高點(diǎn)及y方向速度為零，將y再反向向下落。

來(lái)回彈動(dòng)關(guān)鍵在于 對(duì)邊緣的判斷，和速度方向的判斷和計(jì)算

如何使用javascript實(shí)現(xiàn)小球是沿著操場(chǎng)跑道軌跡運(yùn)動(dòng)

操場(chǎng)軌跡上下兩邊為直線，左右為半圓。

選擇用純css分成四段控制動(dòng)畫，最終效果如圖：

詳細(xì)分析：

創(chuàng)建HTML：

HTML非常簡(jiǎn)單，2個(gè)div嵌套，里面的point就是點(diǎn)，調(diào)整外面的layout的top，left和rotate做出動(dòng)畫效果。

div?class="layout"

div?class="point"/div

/div

核心css：

去掉了瀏覽器兼容用的代碼。

把動(dòng)畫分成四個(gè)部分：上方直線-右邊半圓-下方直線-左邊半圓。

最巧妙的地方在于，layout其實(shí)是一個(gè)長(zhǎng)方型，把點(diǎn)放在長(zhǎng)方型的一頭，通過(guò)旋轉(zhuǎn)layout使點(diǎn)旋轉(zhuǎn)，去掉代碼中注釋的紅色背景就能看到如下效果：

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

}

@-webkit-keyframes?rotate{

0%??{??left:0px;?top:0px;?

transform:rotate(0deg);

}

25%?{ left:150px;?top:0px;?

transform:rotate(0deg);

}

50%?{ left:150px;?top:50px;?

transform:rotate(180deg);

}

75%?{ left:0px;?top:50px;?

transform:rotate(180deg);

}

100%{ left:0px;?top:0px;?

transform:rotate(360deg);

}

}

完整代碼:

html

head

style?

.point{

width:10px;

height:10px;

background:blue;

position:relative;

border-radius:5px;

margin:0?auto;

}

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

/*?Chrome:?*/

-webkit-animation-name:rotate;

-webkit-animation-duration:2s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

-webkit-animation-play-state:running;

-webkit-animation-direction:normal;

/*?Firefox:?*/

-moz-animation-name:rotate;

-moz-animation-duration:2s;

-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-moz-animation-play-state:running;

-moz-animation-direction:normal;

/*?Opera:?*/

-o-animation-name:rotate;

-o-animation-duration:2s;

-o-animation-timing-function:linear;

-o-animation-iteration-count:infinite;

-o-animation-direction:alternate;

-o-animation-play-state:running;

-o-animation-direction:normal;

}

@-webkit-keyframes?rotate{

0%??{??left:0px;?top:0px;?

transform:rotate(0deg);

-ms-transform:rotate(0deg);? /*?IE?9?*/

-moz-transform:rotate(0deg);? /*?Firefox?*/

-webkit-transform:rotate(0deg);?/*?Chrome?*/

-o-transform:rotate(0deg);? /*?Opera?*/

}

25%?{ left:150px;?top:0px;?

transform:rotate(0deg);

-ms-transform:rotate(0deg);? /*?IE?9?*/

-moz-transform:rotate(0deg);? /*?Firefox?*/

-webkit-transform:rotate(0deg);?/*?Chrome?*/

-o-transform:rotate(0deg);? /*?Opera?*/

}

50%?{ left:150px;?top:50px;?

transform:rotate(180deg);

-ms-transform:rotate(180deg);? /*?IE?9?*/

-moz-transform:rotate(180deg);? /*?Firefox?*/

-webkit-transform:rotate(180deg);?/*?Chrome?*/

-o-transform:rotate(180deg);? /*?Opera?*/

}

75%?{ left:0px;?top:50px;?

transform:rotate(180deg);

-ms-transform:rotate(180deg);? /*?IE?9?*/

-moz-transform:rotate(180deg);? /*?Firefox?*/

-webkit-transform:rotate(180deg);?/*?Chrome?*/

-o-transform:rotate(180deg);? /*?Opera?*/

}

100%{ left:0px;?top:0px;?

transform:rotate(360deg);

-ms-transform:rotate(360deg);? /*?IE?9?*/

-moz-transform:rotate(360deg);? /*?Firefox?*/

-webkit-transform:rotate(360deg);?/*?Chrome?*/

-o-transform:rotate(360deg);? /*?Opera?*/

}

}

/style

/head

body

div?class="layout"

div?class="point"/div

/div

/body

/html

網(wǎng)頁(yè)標(biāo)題：javascript圓球,js畫圓形
當(dāng)前URL：http://chinadenli.net/article9/dsicpoh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、靜態(tài)網(wǎng)站、網(wǎng)站策劃、服務(wù)器托管、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)