哎呀呀,做了接近一个月的答辩作品终于答辩完啦,心里很开心就是了;诺,你看我这不是跑过来总结我的答辩了嘛,作品整体是一个以购物为主题的网站,大致风格比较简约没有一般商业网站那么拥挤的感觉,但是呢内容又比较少;用的css<div>布局,结合boostrap的网格系统做的响应式,用了一些boostrap和jq里面的框架;使用了一些hover和动画效果,加了一些好玩的js特效。这是第一次自己从设计到完成一整个网站的前端,有几点需要提醒一下的:
首先就是文件夹的放置,想起我刚开始做的时候,简直乱的可怕,后来在看了我师傅的文件夹的分类和摆放以后重新整理了下,感觉用这个层次来整理还不错,很方便找文件。
然后就是关于boostrap网格系统的使用,我是直接下载的网上的文件包,然后<link>调用的,如果引用线上的boostrap的话那就一定要在有网的环境下了;不得不说使用起来着实方便,直接去改边距为你想要的就可以了,但是一定要注意啊,网格系统里面自带box-sizing,会使一些盒子在用的时候被挤来挤去的,这里推荐一个链接:http://blog.sina.com.cn/s/blog_877284510101kt87.html
好了,开始说我的网页里面的好玩的东西:
1,点击特效的实现,说起这个呀,是在一个学姐的博客里面看到了这个效果当时就觉得很有意思,后来偶然看到我师傅也做了这个特效我便去偷学了来,其实原理也很简单啦,首先给整个html,body设置点击函数,定义随机运动的函数,因为我是直接输出的一些符号所以需要设置颜色,然后考虑显现在最顶层设置一下Z-index,设置点击点左边10px上面20px出产生图片,图片大小也是用随机函数Math.random()产生一个随机0~1之间的函数根据需要+ -像素就可以了;图片消失是根据高度增加而改了图片的透明度,透明度为零时图片消失。
完整代码:
onload = function() {
var $html = document.getElementsByTagName("html")[0];
var $body = document.getElementsByTagName("body")[0];
$html.onclick = function(e) {
var click_cnt = Math.round(Math.random()*10);//Math.round 四舍五入,Math.random()产生0~1之间的一个随机数;
var $elem = document.createElement("b");
$elem.style.color = "#FF3E96";
$elem.style.zIndex = 9999;
$elem.style.position = "absolute";
$elem.style.select = "none";
var x = e.pageX;
var y = e.pageY;
$elem.style.left = (x - 10) + "px";
$elem.style.top = (y - 20) + "px";
clearInterval(anim);
var emoji = new Array("❤","☆","☆","★","★","♡","♪","♬","☆","☆","☆");
$elem.innerText = emoji[click_cnt];
$elem.style.fontSize = Math.random() * 10 + 5 + "px";
var increase = 0;
var anim;
setTimeout(function() {
anim = setInterval(function() {
if (++increase == 150) {
clearInterval(anim);
$body.removeChild($elem);
}
$elem.style.top = y - 20 - increase + "px";
$elem.style.opacity = (150 - increase) / 120;
}, 8);
}, 70);
$body.appendChild($elem);
};
};
2.回到顶部,由于网页有时候主页做的比较长嘛,所以用个回到顶部的特效是很有意思的,再给回到顶部的图片设置一个动画可以成网页的一个亮点了,这次我的回到顶部运用了下滚动监听,设置了滑动小于100px时图片透明度的改变,我是把图标固定在右下角底部了;对了,关于回到顶部的图标这里推荐 阿里的矢量图标库 里面的图标齐全,好用而且不要钱:http://www.iconfont.cn/.
完整代码:
<div id="top" style="position: fixed;bottom: 0;right: 0;z-index: 1000000">
<a href="buy.html"><img src="img/返回顶部.png" width="80px" height="80px"></a>
</div>
<script>
$(document).ready(function(e) {
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){ //大于100行才出现图片
$("#top").fadeIn(1500); //大于1500行时图片慢慢透明显示
}
else{
$("#top").fadeOut(1500); //大于1500行时图片慢慢透明消失
}
});
//当点击跳转链接后,回到页面顶部位置
$("#top").click(function(){
$('body,html').animate({scrollTop:0},1000);//1s完成回到顶部
return false;});
});
});
</script>
3.星级评分,这个在一般的购物网页中比较常见,我是用两张图片的转化来实现的,一张有颜色的一张没有颜色的实现点击切换;直接奉上代码。
完整代码:
<div id="QuacorGrading" style="margin:20px 12px 0 60px;padding-left: 10%;"><strong style="font-size: 20px;">评分</strong>
<input name="1" type="button" />
<input name="2" type="button" />
<input name="3" type="button" />
<input name="4" type="button" />
<input name="5" type="button" />
<span id="QuacorGradingValue"><b><font size="5" color="#fd7d28" >0</font></b><span style="font-size: 15px;">分</span></span>
</div>
<script type="text/javascript">
function buyNum(num){
function $(id){
return document.getElementById(id);
}
var numValue = $("numValue");
if (num) {
numValue.innerHTML =numValue.innerHTML - 0 + 1;
}
else if (numValue.innerHTML > 1) {
numValue.innerHTML -= 1;
}
}
var GradList = document.getElementById("QuacorGrading").getElementsByTagName("input");
for(var di=0;di<parseInt(document.getElementById("QuacorGradingValue").getElementsByTagName("font")[0].innerHTML);di++){
GradList[di].style.backgroundPosition = 'left center';
}
for(var i=0;i < GradList.length;i++){
GradList[i].onmousedown = function(){
for(var Qi=0;Qi<GradList.length;Qi++){
GradList[Qi].style.backgroundPosition = 'right center';
}
for(var Qii=0;Qii<this.name;Qii++){
GradList[Qii].style.backgroundPosition = 'left center';
}
document.getElementById("QuacorGradingValue").innerHTML = '<b><font size="5" color="#fd7d28">'+this.name+'</font></b>分';
}
}
</script>
因为有答辩要做啊,我的暑假生活就充实不少呢,看了不少乱七八糟的东西,东学学西看看的,这三个内容加在网页里面感觉会生动不少。