html个人空间制作,html+css+js制作简单网站首页

一个简单的网站主页

主要由html+css+js制作

1.图片展示

html个人空间制作,html+css+js制作简单网站首页_第1张图片

这是首页的上半部分,主要内容有:顶部标头、顶部导航栏、图片轮播图。

html个人空间制作,html+css+js制作简单网站首页_第2张图片这是首页的下半部分,主要内容有:首页主要内容、底部。

2.代码展示

index.html

我们的恋爱小屋

window.οnlοad=function(){

var wrap=document.getElementById('wrap'),

pic=document.getElementById('pic').getElementsByTagName("li"),

list=document.getElementById('list').getElementsByTagName('li'),

index=0,

timer=null;

// 定义并调用自动播放函数

timer = setInterval(autoPlay, 2000);

// 鼠标划过整个容器时停止自动播放

wrap.onmouseover = function () {

clearInterval(timer);

}

// 鼠标离开整个容器时继续播放至下一张

wrap.onmouseout = function () {

timer = setInterval(autoPlay, 2000);

}

// 遍历所有数字导航实现划过切换至对应的图片

for (var i = 0; i < list.length; i++) {

list[i].onmouseover = function () {

clearInterval(timer);

index = this.innerText - 1;

changePic(index);

};

};

function autoPlay () {

if (++index >= pic.length) index = 0;

changePic(index);

}

// 定义图片切换函数

function changePic (curIndex) {

for (var i = 0; i < pic.length; ++i) {

pic[i].style.display = "none";

list[i].className = "";

}

pic[curIndex].style.display = "block";

list[curIndex].className = "on";

}

};

欢迎宝贝

我们的恋爱小屋

  • 我的首页
  • 纪念日志
  • 爱的约定
  • 服务商城
  • 成长日志
  • 关于我们
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
爱情宝典
平凡的世界
即使有一天我要远走他乡,但愿我还能在梦中再回到这里来…——路遥《平凡的世界》
简爱
我无法控制自己的眼睛,忍不住要去看他,就像口干舌燥的人明知水里有毒却还要喝一样。我本来无意去爱他,我也曾努力的掐掉爱的萌芽,但当我又见到他时,心底的爱又复活了。

——夏洛蒂 勃朗特 《简爱》

好物文章
  • 文章1
  • 文章2
  • 文章3
  • 文章4
  • 文章5
  • 文章6
  • 文章7
  • 文章8
联系我们
@right:白燕&欢迎您的投稿

//定义画布宽高和生成点的个数

var WIDTH = window.innerWidth,

HEIGHT = window.innerHeight,

POINT = 35;

var canvas = document.getElementById('Mycanvas');

canvas.width = WIDTH,

canvas.height = HEIGHT;

var context = canvas.getContext('2d');

context.strokeStyle = 'rgba(255,255,255,255.255)',

context.strokeWidth = 1,

context.fillStyle = 'rgba(255,255,255,255.255)';

var circleArr = [];

//线条:开始xy坐标,结束xy坐标,线条透明度

function Line(x, y, _x, _y, o) {

this.beginX = x,

this.beginY = y,

this.closeX = _x,

this.closeY = _y,

this.o = o;

}

//点:圆心xy坐标,半径,每帧移动xy的距离

function Circle(x, y, r, moveX, moveY) {

this.x = x,

this.y = y,

this.r = r,

this.moveX = moveX,

this.moveY = moveY;

}

//生成max和min之间的随机数

function num(max, _min) {

var min = arguments[1] || 0;

return Math.floor(Math.random() * (max - min + 1) + min);

}

// 绘制原点

function drawCricle(cxt, x, y, r, moveX, moveY) {

var circle = new Circle(x, y, r, moveX, moveY)

cxt.beginPath()

cxt.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)

cxt.closePath()

cxt.fill();

return circle;

}

//绘制线条

function drawLine(cxt, x, y, _x, _y, o) {

var line = new Line(x, y, _x, _y, o)

cxt.beginPath()

cxt.strokeStyle = 'rgba(255,255,255,' + o + ')'

cxt.moveTo(line.beginX, line.beginY)

cxt.lineTo(line.closeX, line.closeY)

cxt.closePath()

cxt.stroke();

}

//每帧绘制

function draw() {

context.clearRect(0, 0, canvas.width, canvas.height);

for(var i = 0; i < POINT; i++) {

drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);

}

for(var i = 0; i < POINT; i++) {

for(var j = 0; j < POINT; j++) {

if(i + j < POINT) {

var A = Math.abs(circleArr[i + j].x - circleArr[i].x),

B = Math.abs(circleArr[i + j].y - circleArr[i].y);

var lineLength = Math.sqrt(A * A + B * B);

var C = 1 / lineLength * 7 - 0.009;

var lineOpacity = C > 0.03 ? 0.03 : C;

if(lineOpacity > 0) {

drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i + j].x, circleArr[i + j].y, lineOpacity);

}

}

}

}

}

//初始化生成原点

function init() {

circleArr = [];

for(var i = 0; i < POINT; i++) {

circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10) / 40, num(10, -10) / 40));

}

draw();

}

//调用执行

window.onload = function() {

init();

setInterval(function() {

for(var i = 0; i < POINT; i++) {

var cir = circleArr[i];

cir.x += cir.moveX;

cir.y += cir.moveY;

if(cir.x > WIDTH) cir.x = 0;

else if(cir.x < 0) cir.x = WIDTH;

if(cir.y > HEIGHT) cir.y = 0;

else if(cir.y < 0) cir.y = HEIGHT;

}

draw();

}, 10);

}

你可能感兴趣的:(html个人空间制作)