内容比较多，代码比较长，阅读需谨慎！
虽然截止到今天距离十天还有一天，不过由于现在已经在做毕业的博客设计，所以也不必太介意啦。
经过前面这么多天的学习，还有从老师的一些直播里面，慢慢的体会到，前端其实是一门非常有用的知识，特别是JS部分。
话不多说，直接来看一下我们毕业的课题吧，其实在看到的时候突然有点晕菜的赶脚，才学习了6天，6天，6天，这个结业课题也太难了吧。
里面涉及了HTML CSS JS 三部分，而且还要做成一个博客界面哟。
好吧，先让我静一静！
OK，静完后，让我们来看看怎么把课题完成吧。如下：
（1）在博客中加入轮播图。（2）博客头像可上传本地图片。（3）部分图片实现点击看大图功能。
预览：
1）首先还是先找个设计图吧，当然对于小白来说，这个肯定越简单越好的咯。（图片来源于网络）
2）图片找好了，那就先来说说我的思路，首先进行页面的一个分解，把整个图片分为了三个部分header，conter，footer 三个部分。
2-1）header部分：标题，头像，左图右文字的排列方式（其中头像找设计图上是没有的，用于完成课题的上传图片）
2-2）conter部分：右边（标题，说明，更多），左边（手机样式图，轮播，点击放大）（课题2,3将在这里来完成）
2-3）footer部分：为了页面的完整性，纯粹打酱油。
3）代码&最终效果图展示 （百度网盘链接:点击打开链接 密码: yvi9 ）失效的话就直接看下面的代码吧。
文件夹的设置，用了两个不同的名称的文件夹去装JS文件，是因为有两个不同版本的JQ文件，又懒得更改它们的名字了，大家可以把它放在一起并修改一下路径即可。
3-1）src装的是需要用到的一些JS文件，有些没用到是因为时间有点赶，想要做的功能并没有去弄，又没有删除而已。
3-2）这个是打开doc文件里面的内容，（编写的时候忘记我之前已经建了一个img,后面又多建了一个，本来想去修改一下的。但还是因为时间紧迫，有事做，所以就先
这样吧， 等有时间再去修正了）
好了，下面就是我最终弄好的效果图。
代码如下所示（400多行，建议大家需要看的话，可复制到编辑器上面看哟。。。）
<!DOCTYPE html>
<html lang="en">
<head>
<title>波波的博客</title>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
<link rel="stylesheet" type="text/css" href="../src/carousel-image.css">
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/require.js"></script>
<script type="text/javascript" src="../src/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgbox.pack.js"></script>
<script>
// 此处为头像上传
function previewImage(file)
{
var MAXWIDTH = 90;
var MAXHEIGHT = 90;
var div = document.getElementById('preview');
if (file.files && file.files[0])
{
div.innerHTML ='<img id=imghead οnclick=$("#previewImg").click()>';
var img = document.getElementById('imghead');
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
// img.style.marginLeft = rect.left+'px';
img.style.marginTop = rect.top+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight ){
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight ){
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
</script>
<!-- 此处为图片轮播 -->
<script>
requirejs.config({
baseUrl: '../src',
paths: {
$: 'zepto'
}
});
require(['carousel-image','$'], function(CarouselImage,$) {
var cs = new CarouselImage();
cs.init({
target:$('.carousel-image'),
num:$('.carousel-num'),
repeat:true,
timer:2000,
height:350,
width:210
});
});
</script>
<!-- 此处为点击图片放大 -->
<script type="text/javascript">
$(document).ready(function() {
$("#example2-1, #example2-2").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});
});
</script>
<style type="text/css">
/*此处为开头部分开始*/
.bg{
margin: 0 auto;
width: 100%;
height: 1824px;
/*border: 1px solid #000;*/
}
.header{
width: 900px;
height: 900px;
margin: 20px auto;
/*border: 1px solid red;*/
}
.header .biaoti{
text-align: center;
font-size: 45px;
}
/*此处以下是头像上传部分*/
.header .touxiang{
text-align:center;
}
/*此处以上是头像上传部分*/
.header1{
margin: 28px auto;
background: center;
overflow: hidden;
width: 800px;
}
.header1 img{
float: left;
margin-top: 0;
width: 130px;
height: 130px;
}
.header1 .right{
float: right;
width: 650px;
text-align: left;
}
.header1 .right h2{
margin-top: 6px;
height: 24px;
line-height: 18px;
overflow: hidden;
}
/*此处为中间部分开始*/
.conter{
width: 100%;
height: 600px;
margin: 0 auto;
background-color: #c4c2c2;
color: #ffffff;
}
.conter .text-left{
position: absolute;
float: left;
width: 550px;
overflow: hidden;
margin: 100px 0 0 180px;
}
.conter .text-left h1{
font-size: 60px;
}
.conter .text-left p{
font-size: 20px;
}
.conter .text-left span{
font-size: 20px;
}
.conter .img-right{
position: absolute;
float: right;
margin: 70px 0 0 865px;
}
.conter .gundong{
position: absolute;
float: right;
margin: 130px 0 0 880px;
border: 1px solid #8e8e8e;
width: 210px;
height: 350px;
z-index: 1;
}
/*此处为点击图片放大*/
.clear {
clear: both;
line-height: 1px;
font-size: 1px;
}
#imgbox-loading {
position: absolute;
top: 0;
left: 0;
background: url('imgbox-spinner.gif') center center no-repeat;
cursor: pointer;
display: none;
z-index: 90;
}
#imgbox-loading div {
background: #FFF;
width: 100%;
height : 100%;
}
#imgbox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
display: none;
z-index: 80;
}
.imgbox-wrap {
position: absolute;
top: 0;
left: 0;
background: #FFF;
display: none;
z-index: 90;
}
.imgbox-img {
padding: 0;
margin: 0;
border: none;
width: 100%;
height: 100%;
vertical-align: top;
}
.imgbox-close {
position: absolute;
top: -15px;
right: -15px;
height: 30px;
width: 30px;
background: url('imgbox-close.png') top left no-repeat;
cursor: pointer;
outline: none;
}
.imgbox-title {
padding-top: 10px;
font-size: 11px;
text-align: center;
font-family: Arial;
color: #333;
display: none;
}
.imgbox-bg-wrap {
position: absolute;
padding: 0;
margin: 0;
display: none;
}
.imgbox-bg {
position: absolute;
width: 20px;
height: 20px;
}
.imgbox-bg-n {
left: 0;
top: -20px;
width: 100%;
background: url(imgbox-bg-n.png) repeat-x;
}
.imgbox-bg-ne {
right: -20px;
top: -20px;
background: url(imgbox-bg-ne.png) no-repeat;
}
.imgbox-bg-e {
right: -20px;
top: 0;
height: 100%;
background: url(imgbox-bg-e.png) repeat-y;
}
.imgbox-bg-se {
right: -20px;
bottom: -20px;
background: url(imgbox-bg-se.png) no-repeat;
}
.imgbox-bg-s {
left: 0;
bottom: -20px;
width: 100%;
background: url(imgbox-bg-s.png) repeat-x;
}
.imgbox-bg-sw {
left: -20px;
bottom: -20px;
background: url(imgbox-bg-sw.png) no-repeat;
}
.imgbox-bg-w {
left: -20px;
top: 0;
height: 100%;
background: url(imgbox-bg-w.png) repeat-y;
}
.imgbox-bg-nw {
left: -20px;
top: -20px;
background: url(imgbox-bg-nw.png) no-repeat;
}
/*此处为尾部部分开始*/
.footer{
width: 1080px;
height: 120px;
margin: 70px auto;
overflow: hidden;
}
.footer .footer1{
float: left;
height: 100px;
width: calc(24%);
margin-right: 10px;
margin: 10px 0 0 10px;
}
.footer .footer1 img{
float: left;
}
.footer .footer1 .f-r{
float: left;
margin: 0 0 0 10px;
}
.f-r h1{
margin-left: 2px;
}
.f-r p{
margin-left: 4px;
}
</style>
</head>
<body>
<div class="bg">
<!-- 此处为开头部分开始 -->
<div class="header">
<h1 class="biaoti">WELCOME TO MY BLOG</h1>
<!-- <img class="touxiang" src="Shape5.png"> -->
<div></div>
<div id="preview" class="touxiang">
<img id="imghead" border="0" src="img/photo_icon.png" width="90" height="90" onClick="$('#previewImg').click();">
</div>
<input type="file" onChange="previewImage(this)" style="display: none;" id="previewImg">
<!-- 以上部分为上传头像 -->
<div class="header1">
<img src="img/icon1.png">
<div class="right">
<h2>BEAUTIFUL & ENJOYABLE DESIGNS</h2>
<p>We produce top class code</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.<span>...<a href="#">[详细]</a></span></p>
</div>
</div>
<div class="header1">
<img src="img/icon2.png">
<div class="right">
<h2>BEAUTIFUL & ENJOYABLE DESIGNS</h2>
<p>We produce top class code</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="header1">
<img src="img/icon3.png">
<div class="right">
<h2>BEAUTIFUL & ENJOYABLE DESIGNS</h2>
<p>We produce top class code</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="header1">
<img src="img/icon4.png">
<div class="right">
<h2>BEAUTIFUL & ENJOYABLE DESIGNS</h2>
<p>We produce top class code</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<!-- 此处为中间部分开始 -->
<div class="conter">
<div class="text-left">
<h1>点击右边图片看看</h1>
<p>Our last responsive work in process. Just use the link below Our last responsive work in process. Just use the link below</p>
<span><a href="">查看更多</a></span>
</div>
<div class="gundong">
<div class="carousel-image">
<div id="images">
<a id="example2-1" href="images/fangda.jpg"><img src="img/a4.png"/></a>
<a id="example2-1" href="images/fangda.jpg"><img src="img/a1.png"/></a>
<a id="example2-1" href="images/fangda.jpg"><img src="img/a2.png"/></a>
<a id="example2-1" href="images/fangda.jpg"><img src="img/a3.png"/></a>
</div>
<span class="carousel-num"></span>
</div>
</div>
<div class="img-right">
<img src="img/iphone.png">
</div>
</div>
<!-- 此处为尾部部分开始 -->
<div class="footer">
<div class="footer1">
<img src="img/Shape1.png">
<div class="f-r">
<h2>今天晴天</h2>
<p>适合出门</p>
</div>
</div>
<div class="footer1">
<img src="img/Shape2.png">
<div class="f-r">
<h2>今天雨天</h2>
<p>适合在家</p>
</div>
</div>
<div class="footer1">
<img src="img/Shape3.png">
<div class="f-r">
<h2>今天雾霾</h2>
<p>不宜出门</p>
</div>
</div>
<div class="footer1">
<img src="img/Shape4.png">
<div class="f-r">
<h2>又到冬天</h2>
<p>想念夏天</p>
</div>
</div>
</div>
</div>
</body>
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
