一阶段项目素材集合

在项目开始之后,才发现自己有很多不会的,有时候很长一段时间都没有什么想法。但是吧自己还不喜欢仿,还想着原创,结果弄得乱七八糟的,速度也很慢。模块之间的融合经常弄得比较尴尬,漏洞也比较多一些,需要不断地调试,更改。即便如此我也感觉原创好一些,虽然这样速度慢,问题多,样式有些也不好看,可是我感觉这样可以发现自己的最大的兴趣点.但是不可避免的这样的问题就是网站很不规整。今天下午基本完成项目,整合完成,然后整理一些在这次或者以后项目可以用到的样式,有些介绍性的网页自己做,总是做的不好,没有思路,也不能做的很美观,还是自己做的见过的网站少。还有就是一些学过的标签样式运用不熟练。在做项目期间也学到了不少自己不会的东西,收获颇多。

3D翻转样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> DHTML特效,非常酷的3D翻转相册展示特效</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #fff;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #fff;
}
#screen img {
position: absolute;
cursor: pointer;
width: 0px;
height: 0px;
-ms-interpolation-mode:nearest-neighbor;
}
#bankImages {
visibility: hidden;
}
#FPS {
position: absolute;
right: 5px;
bottom: 5px;
font-size: 10px;
color: #666;
font-family: verdana;
}

</style>

<script type="text/javascript">
/* ==== Easing function ==== */
var Library = {};
Library.ease = function () {
this.target = 0;
this.position = 0;
this.move = function (target, speed) {
this.position += (target - this.position) * speed;
}
}

var tv = {
/* ==== variables ==== */
O : [],
fps : 0,
screen : {},
angle : {
x : new Library.ease(),
y : new Library.ease()
},
camera : {
x : new Library.ease(),
y : new Library.ease()
},
create3DHTML : function (i, x, y, z, sw, sh) {
/* ==== create HTML image element ==== */
var o = document.createElement(‘img‘);
o.src = i.src;
tv.screen.obj.appendChild(o);
/* ==== 3D coordinates ==== */
o.point3D = {
x : x,
y : y,
z : new Library.ease(),
sw : sw,
sh : sh,
w : i.width,
h : i.height
};
o.point3D.z.target = z;
/* ==== push object ==== */
o.point2D = {};
tv.O.push(o);

/* ==== on mouse over event ==== */
o.onmouseover = function () {
if (this != tv.o) {
this.point3D.z.target = tv.mouseZ;
tv.camera.x.target = this.point3D.x;
tv.camera.y.target = this.point3D.y;
if (tv.o) tv.o.point3D.z.target = 0;
tv.o = this;
}
return false;
}

/* ==== on mousedown event ==== */
o.onmousedown = function () {
if (this == tv.o) {
if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
else {
tv.o = false;
this.onmouseover();
}
}
}

/* ==== main 3D function ==== */
o.animate = function () {
/* ==== 3D coordinates ==== */
var x = this.point3D.x - tv.camera.x.position;
var y = this.point3D.y - tv.camera.y.position;
this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
/* ==== rotations ==== */
var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
var yz = tv.angle.cy * xz - tv.angle.sy * x;
var yx = tv.angle.sy * xz + tv.angle.cy * x;
/* ==== 2D transform ==== */
var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
x = yx * scale;
y = xy * scale;
var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
/* ==== HTML rendering ==== */
var o = this.style;
o.left = Math.round(x + tv.screen.w - w * .5) + ‘px‘;
o.top = Math.round(y + tv.screen.h - h * .5) + ‘px‘;
o.width = w + ‘px‘;
o.height = h + ‘px‘;
o.zIndex = 10000 + Math.round(scale * 1000);
}
},

/* ==== init script ==== */
init : function (structure, FL, mouseZ, rx, ry) {
this.screen.obj = document.getElementById(‘screen‘);
this.screen.obj.onselectstart = function () { return false; }
this.screen.obj.ondrag = function () { return false; }
this.mouseZ = mouseZ;
this.camera.focalLength = FL;
this.angle.rx = rx;
this.angle.ry = ry;
/* ==== create objects ==== */
var i = 0, o;
while( o = structure[i++] )
this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
/* ==== start script ==== */
this.resize();
mouse.y = this.screen.y + this.screen.h;
mouse.x = this.screen.x + this.screen.w;
/* ==== loop ==== */
setInterval(tv.run, 16);
setInterval(tv.dFPS, 1000);
},

/* ==== resize window ==== */
resize : function () {
var o = tv.screen.obj;
if (o) {
tv.screen.w = o.offsetWidth / 2;
tv.screen.h = o.offsetHeight / 2;
for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {
tv.screen.x += o.offsetLeft;
tv.screen.y += o.offsetTop;
}
}
},

/* ==== main loop ==== */
run : function () {
tv.fps++;
/* ==== motion ease ==== */
tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
tv.camera.x.move(tv.camera.x.target, .025);
tv.camera.y.move(tv.camera.y.target, .025);
/* ==== angles sin and cos ==== */
tv.angle.cx = Math.cos(tv.angle.x.position);
tv.angle.sx = Math.sin(tv.angle.x.position);
tv.angle.cy = Math.cos(tv.angle.y.position);
tv.angle.sy = Math.sin(tv.angle.y.position);
/* ==== loop through images ==== */
var i = 0, o;
while( o = tv.O[i++] ) o.animate();
},

/* ==== trace frames per seconds ==== */
dFPS : function () {
document.getElementById(‘FPS‘).innerHTML = tv.fps + ‘ FPS‘;
tv.fps = 0;
}
}

/* ==== global mouse position ==== */
var mouse = {
x : 0,
y : 0
}
document.onmousemove = function(e) {
if (window.event) e = window.event;
mouse.x = e.clientX;
mouse.y = e.clientY;
return false;
}

/* ==== starting script ==== */
onload = function() {
onresize = tv.resize;
/* ==== build grid ==== */
var img = document.getElementById(‘bankImages‘).getElementsByTagName(‘img‘);
var structure = [];
for (var i = -300; i <= 300; i += 120)
for (var j = -300; j <= 300; j += 120)
structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });
/* ==== let‘s go ==== */
tv.init(structure, 350, -200, .005, .0025);
}

</script>
</head>

<body>

<div id="screen"></div>

<div id="bankImages">
<img alt="" src="http://www.alixixi.cn/skins/GRAY2010/logo3.gif">
</div>
<div id="FPS"></div>

</body>
</html>

鼠标移上图片放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
 <div>
   <img src="../图片/20120808114607_yhVUJ.jpeg" width="360px" height="160px" onmouseover="l(this)" onmouseout="w(this)"/>
 </div>
</body>
<script>

function l(b){
 b.style.width="400px";
 b.style.height="200px";
 b.style.marginLeft = "-10px";
 b.style.marginTop = "-10px";

    }
function w(b){

b.style.width="360px";
b.style.height="160px";
 b.style.marginLeft = "0px";
 b.style.marginTop = "0px";

}
</script>
</html>

用css样式的鼠标移上图片变大

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        img{transition: all 1s;}
        img:hover{transform: scale(1.3);}
    </style>
    <body>
        <img src="try/t01ab7a9225899effde.jpg" alt="" />
    </body>
</html>

鼠标移上字体划上显示

   <div class="neirongzi1" style="font-size:18px ; ">
    <div style="width: 100%;height: 650px;position: relative;overflow: hidden;">
            <img style="width: 100%;height: 400px;" src="../图片/333.jpg" alt="" />
            <p id="show" style=" color:white;height: 215px;width: 96%;position: absolute;bottom: 0;transform: translateY(200px);transition: all 1s;padding: 2%;";>对于主流传感器对比,我们可以从以下几方面来描述:
</p></div>

<script type="text/javascript">

var a1 = document.getElementsByClassName("neirongzi1")[0];
    var showp = document.getElementById("show");
    console.log(a1)
    a1.onmouseover = function(){
        showp.style.transform = "translateY(0)";
    };
    a1.onmouseout = function(){
        showp.style.transform = "translateY(300px)";
    }
</script>

多种样式的图片滑动字体显示

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多款炫酷鼠标悬停图文动画效果</title>
    <link rel="stylesheet" type="text/css" href="css/lanren.css">
</head>
<body>

    <!-- 代码部分begin -->
    <div class="lanren">
        <div class="full-length">
            <div class="container">
                <!-- Effect-1 -->显示图片透明度变暗,文字面显示
                <h2><span>Effects 1</span></h2>
                <ul>
                    <li>
                        <div class="port-1 effect-1">
                            <div class="image-box">
                                <img src="images/img-1.jpg" alt="Image-1">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>

                <!-- Effect-1 End -->

                <!-- Effect-2 -->图片页滑下显示在文字页上
                <h2><span>Effects 2</span></h2>
                <ul>
                    <li>
                        <div class="port-2 effect-1">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-1">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>

                <!-- Effect-2 End -->

                <!-- Effect-3 -->文字页直接将图片页覆盖
                <h2><span>Effects 3</span></h2>
                <ul>
                    <li>
                        <div class="port-3 effect-1">
                            <div class="image-box">
                                <img src="images/img-1.jpg" alt="Image-1">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>

                <!-- Effect-3 End -->

                <!-- Effect-4 -->图片页旋转换成文字页
                <h2><span>Effects 4</span></h2>
                <ul>
                    <li>
                        <div class="port-4 effect-1">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-1">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-4 effect-2">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-2">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-4 effect-3">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-3">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- Effect-4 End -->

                <!-- Effect-5 -->图片页变小到文字页上,图片页超出文字页
                <h2><span>Effects 5</span></h2>
                <ul>
                    <li>
                        <div class="port-5 effect-1">
                            <div class="image-box">
                                <img src="images/img-1.jpg" alt="Image-1">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-5 effect-2">
                            <div class="image-box">
                                <img src="images/img-1.jpg" alt="Image-2">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-5 effect-3">
                            <div class="image-box">
                                <img src="images/img-1.jpg" alt="Image-3">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- Effect-5 End -->

                <!-- Effect-6 -->图片页变小到文字页上
                <h2><span>Effects 6</span></h2>
                <ul>
                    <li>
                        <div class="port-6 effect-1">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-1">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-6 effect-2">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-2">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-6 effect-3">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-3">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- Effect-6 End -->

                <!-- Effect-7 -->
                <h2><span>Effects 7</span></h2>
                <ul>
                    <li>
                        <div class="port-7 effect-1">
                            <div class="image-box">
                                <img src="images/img-1.jpg" alt="Image-1">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-7 effect-2">
                            <div class="image-box">
                                <img src="images/img-1.jpg" alt="Image-2">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-7 effect-3">
                            <div class="image-box">
                                <img src="images/img-1.jpg" alt="Image-3">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- Effect-7 End -->

                <!-- Effect-8 -->
                <h2><span>Effects 8</span></h2>
                <ul>
                    <li>
                        <div class="port-8 effect-1">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-1">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-8 effect-2">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-2">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="port-8 effect-3">
                            <div class="image-box">
                                <img src="images/img-2.jpg" alt="Image-3">
                            </div>
                            <div class="text-desc">
                                <h3>Your Title</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                                <a href="#" class="btn">Learn more</a>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- Effect-8 End -->
            </div>
        </div>
    </div>
    <!-- 代码部分end -->

</html>

时间: 2024-10-19 11:06:19

一阶段项目素材集合的相关文章

Beta阶段项目展示博客

Beta阶段项目展示 团队成员的简介 详细见团队简介 角色 姓名 照片 项目经理,策划 游心 策划 王子铭 策划 蔡帜 美工 赵晓宇 美工 王辰昱 开发.架构师 解小锐 开发 陈鑫 开发 李金奇 开发 杨森 团队成员个人博客地址 游心:http://www.cnblogs.com/jefhq/ 王子铭:http://www.cnblogs.com/514DNA/ 蔡帜: http://www.cnblogs.com/felixcaae/ 赵晓宇: http://www.cnblogs.com/z

【ASP.NET实战教程】ASP.NET实战教程大集合,各种项目实战集合

[ASP.NET实战教程]ASP.NET实战教程大集合,各种项目实战集合,希望大家可以好好学习教程中,有的比较老了,但是一直很经典!!!!论坛中很多小伙伴说.net没有实战教程学习,所以小编连夜搜集整理出一些比较好的教程,望君好好珍惜,资源不易,且保持,且珍惜直接上资源截图: 下载地址[回复可见]:http://www.fu83.cn/thread-282-1-1.html 感觉文章写的好,一定要回复 推荐哦!!!

自我总结(六)---(学习j2ee+j2ee第一阶段项目)

自我完善的过程就是在不断的自我总结不断的改进. 学习了Struts2 Spring Hibernate. 十天前结束了这个课程.也考试了.这次考试老师说机试考的还不错.其实就是一个简单的用户登录,进行一个增删改的功能.因为实在元旦过后来就考试嘛!我是在元旦期间的时候也做了增删改的一个作业.所以在考试的时候也就快一些.但是在考试的时候也遇到一个问题,由于少导入了一个包,我的验证就不行了.我把这样写的运用到我后面的项目区就完全不行了.这是我最搞不明白的事.笔试题刚刚及格.课程结束了. 但是对于ssh

一阶段项目 家养

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>不是所有猫咪都适合家养</title> <style> /** { margin:10px; padding:10px; border:0px; background-image:url(猫爪1.jpg); }*/ #top1 { width:1

一阶段项目 猫天下

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>宠喵club</title> <style> /** { margin:0px; padding:0px; }*/ #top1 { width:100%; height:35px; /*border:1px solid black;*/ bord

web项目中 集合Spring&amp;使用junit4测试Spring

web项目中 集合Spring 问题: 如果将 ApplicationContext applicationContext = new ClassPathXmlApplicationContext("applicationContext.xml"); HelloService helloService = (HelloService) applicationContext.getBean("helloService"); helloService.sayHello(

一阶段项目 买猫注意事项

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>买猫注意事项</title> <style> /** { margin:10px; padding:10px; border:0px; background-image:url(猫爪1.jpg); }*/ #top1 { width:100%;

一阶段项目 流浪猫

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>流浪猫援助</title> <style> #top1 { width:100%; height:35px; /*border:1px solid black;*/ border-bottom:0.1px solid #9E9E9E; } .to

第一阶段项目冲刺报告会

5月12号我们进行了第一阶段项目冲刺报告会,事实证明,仅仅第一个十天冲刺阶段,不同的项目组就拉开了很大的差距.以下是我们致一团队在听报告会中作出的总结: 1.移山小分队 二手书交易平台 这是一个网上卖二手书的平台,第一阶段冲刺结束后,该团队的进度很快,实现了图书的搜索.查看评论的功能,并且建立的六个数据库也连上了.实现了各参数的传递.美中不足的是,该小组的界面是套用的模板,虽然模板简洁大方,但如果是自己亲自做出来的会更好.当然,他们的界面还是很值得我们学习的. 2.BBW 快递来了 该组之前定的