网页项目里的收获
Posted 左剃头
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页项目里的收获相关的知识，希望对你有一定的参考价值。
1.CSS3中的3D转换
<style type="text/css">
*{
margin:0 auto;
padding:0;
}
#a01{
width:270px;
height:270px;
position:absolute;
top:300px;
left:500px;
transition:3s; /*旋转时的间隔时间*/
perspective:200px; /*规定透视效果*/
transform-style:preserve-3d;
}
#a01:hover{
transform:rotateY(180deg); /*transform:定义的是转换类型，应用的是3D转换。绕y轴旋转，360度转。 */
}
#a02{
width:270px;
height:270px;
position:absolute;
transform-style:preserve-3d;
background-position:center;
background-repeat:no-repeat;
background-image:url(../Pictures/%E6%A0%A1%E5%BE%BD.jpg); /*后面的图片*/
background-size:250px 250px;
transform-origin:left; /*改变被转换元素的位置*/
}
#a03{
width:270px;
height:270px;
position:absolute;
background-image:url(../Pictures/%E6%96%87%E9%9D%A9.jpg); /*最前面的图片*/
background-position:center;
background-repeat:no-repeat;
transform-style:preserve-3d;
background-size:250px 250px;
left:0px;
transform:translateZ(0.5px); /* 在z轴的方向，正值的话就是在最上边，负值的话就在最后边*/
}
</style>
<body>
<div id="a01">
<div id="a02"></div>
<div id="a03"></div>
</div>
</body>
2.CSS3中的文本效果，
::before 和 ::after 两个伪元素中添加阴影效果
出现如图效果：
<style >
#tu {
position: relative;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background:#FC6;
}
/* Make the image fit the box */
#tu img {
width: 100%;
border: 3px solid #FBF3E2;
border-style: inset;
}
#tu::after {
content: \'\';
position: absolute;
z-index: -1; /* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;}
</style>
<body>
<div id="tu">
<img src="../图片/滚动1.jpg" width="750" height="315" />
</div>
</body>
3.出现如下图的效果,点哪个框,那个框的背景色会变成白色,字体颜色变红,同时,最上方会有一个红色的线.
<body>
<div id="new">
<div class="new-lan" style="background-color:#999;
color:#666;" onclick=" Dian(\'0\')" >New
</div>
<div class="new-lan" onclick="Dian(\'1\')" style="background-color:#999;
color:#666;">书讯</div>
<div class="new-lan" onclick="Dian(\'2\')" style="background-color:#999;color:#666;" >少儿
</div>
<div class="new-lan" onclick="Dian(\'3\')" style="background-color:#999;color:#666;">小说</div>
<div class="new-lan" onclick="Dian(\'4\')"style="background-color:#999;color:#666;">财经</div>
<div class="new-lan" onclick="Dian(\'5\')" style="background-color:#999;color:#666;">活动</div>
</div>
</body>
<script type = "text-javascript">
function Dian(a)
{
var x = document.getElementsByClassName("new-mu");
for( var i=0;i< x.length;i++)
{
x[i].style.display = "none";
}
x[a].style.display = "block";
var y = document.getElementsByClassName("new-lan") /*为了改变背景色,字体颜色,添加上边的框的颜色*/
for( var j=0;j<y.length;j++)
{
y[j].style.backgroundColor = "#999";
y[j].style.borderTop="4px solid #999";
y[j].style.color = "#666";
}
y[a].style.borderTop="4px solid #C00";
y[a].style.backgroundColor = "#FFF";
y[a].style.color = "#C00";
}
</script>
4.轮播想要实现的效果,不移上鼠标时,是一个小框在轮播,变颜色,随着图片的轮播,框也变颜色,移上,会出来一个大框,移出,又变成一个小框,效果如下图所示
移上之后
<body>
<div id="bo">
<img class="tu" src="../图片/90.jpg" style="display:block;"/>
<img class="tu" src="../图片/90 2.jpg"/>
<img class="tu" src="../图片/90 3.jpg" />
<img class="tu" src="../图片/90 4.jpg"/>
<div id="lan7" onmouseout="Chu()">
<div class="k" style="background-color:#F60;" onmouseover="Dian(\'0\')" >
快节奏的生活 慢一些 放空心灵
</div>
<div class="k" onmouseover="Dian(\'1\')" >美好青春 书写不一样的人生</div>
<div class="k" onmouseover="Dian(\'2\')" >每个人心中都有一个暗兽</div>
<div class="k" style="width:262px; height:50px;" onmouseover="Dian(\'3\')" >游戏背后的历史故事</div>
</div>
<div id="lan8" onmousemove="Zai()">
<div class="k2" style="background-color:#F60;" >
</div>
<div class="k2" ></div>
<div class="k2" ></div>
<div class="k2" style="width:262px; height:5px;" ></div>
</div>
</div>
</body>
<script type="text/javascript" src="../JS语言/90后特效.js">
var sy = 0; /* 定了一个索引值的变量*/
window.setInterval("Lun()",5000); /*间隔是4秒出来一次图片*/
function Lun() /*赋这个函数，是让图片来轮播*/
{
var tu = document.getElementsByClassName("tu");
sy++; // sy加1
if(sy>=tu.length) //当sy那个索引值大于等于图片的总长度时，图片轮回到第一张图片
{
sy = 0;
}
//让图片循环显示，循环隐藏
for( var i=0;i<tu.length;i++)
{
tu[i].style.display = "none";
}
tu[sy].style.display = "block";
//框随着图片的轮播，变成蓝色。
var k = document.getElementsByClassName("k");
for( var j=0;j<k.length;j++)
{
k[j].style.backgroundColor = "#666";
}
k[sy].style.backgroundColor = "#FF8C00";
}
//点哪个框，变蓝色，而且换成哪个图片
function Dian(a)
{
sy = a; //a是形参，连着点击框，框里索引着图片
var tu = document.getElementsByClassName("tu");
for( var i=0;i<tu.length;i++)
{
tu[i].style.display = "none"; // 图片循环显示，循环隐藏
}
tu[a].style.display = "block";
var k = document.getElementsByClassName("k"); //框里的颜色循环变颜色
for( var j=0;j<k.length;j++)
{
k[j].style.backgroundColor = "#666";
}
k[a].style.backgroundColor = "#FF8C00";
}
/*轮播的演变*/
function Zai()
{
var g = document.getElementById("lan7");
g.style.display = "block";
var h = document.getElementById("lan8");
h.style.display = "none";
}
function Chu()
{
var lan8 = document.getElementById("lan8");
lan8.style.display = "block";
var lan7 = document.getElementById("lan7");
lan7.style.display = "none";
}
/*小框的演变*/
window.setInterval("Kuan()",5000);
function Kuan()
{
/* 框随着图片的轮播，变成蓝色。*/
var k2 = document.getElementsByClassName("k2");
for( var f=0;f<k2.length;f++)
{
k2[f].style.backgroundColor = "#666";
}
k2[sy].style.backgroundColor = "#FF8C00";
}
</script>
以上是关于网页项目里的收获的主要内容，如果未能解决你的问题，请参考以下文章