![](http://files.jb51.net/file_images/article/201402/20140210094829.png)
核心代码:
1.css:16sucai.css
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
a {outline: none;}
img{ border:0;}
a img {vertical-align: top;}
a img.last {margin-right: 0; }
.box {
width: 850px;
height: auto;
overflow: hidden;
background: #666;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
}
.box ul {
margin: 0px;
padding: 0px;
float: left;
list-style-type: none;
}
.box li {
width: 150px;
height: 100px;
float: left;
cursor: pointer;
display: inline;
margin: 0 10px 10px 0;
border: 5px solid #333;
}
#bg {
width: 100%;
height: 898px;
position: absolute;
left: 0px;
top: 0px;
background: #000;
filter: alpha(opacity : 50);
opacity: 0.5;
display: none;
}
#bg1 {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background: #000;
filter: alpha(opacity : 50);
opacity: 0.5;
display: none;
}
#bottom {
width: 215px;
height: 50px;
position: absolute;
left: 50%;
bottom: 0px;
margin: 0 0 0 -107px;
border: 1px solid #232323;
background: #444;
padding: 1px;
z-index: 1;
display: none;
}
#bottom ul {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
background: #000;
}
#bottom li {
background: url(../images/ico.jpg) no-repeat;
float: left;
display: inline;
margin: 8px 0 0 18px;
cursor: pointer;
}
#bottom li.prev {
width: 30px;
height: 33px;
background-position: 0 0;
}
#bottom li.next {
width: 30px;
height: 33px;
background-position: -35px 0;
}
#bottom li.img {
width: 30px;
height: 33px;
background-position: -106px 0;
}
#bottom li.close {
width: 31px;
height: 33px;
background-position: -70px 0;
}
#frame {
background: #fff;
padding: 3px;
position: absolute;
z-index: 2;
display: none;
filter: alpha(opacity : 0);
opacity: 0;
text-align: center;
}
#bottom1 {
width: 215px;
height: 50px;
position: absolute;
left: 50%;
bottom: 0px;
margin: 0 0 0 -107px;
border: 1px solid #232323;
background: #444;
padding: 1px;
z-index: 1;
display: none;
}
#bottom1 ul {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
background: #000;
}
#bottom1 li {
background: url(../../images/ico.jpg) no-repeat;
float: left;
display: inline;
margin: 8px 0 0 18px;
cursor: pointer;
}
#bottom1 li.prev {
width: 30px;
height: 33px;
background-position: 0 0;
}
#bottom1 li.next {
width: 30px;
height: 33px;
background-position: -35px 0;
}
#bottom1 li.img {
width: 30px;
height: 33px;
background-position: -106px 0;
}
#bottom1 li.close {
width: 31px;
height: 33px;
background-position: -70px 0;
}
#frame1 {
background: #fff;
padding: 3px;
position: absolute;
z-index: 2;
display: none;
filter: alpha(opacity : 0);
opacity: 0;
text-align: center;
}
/
html,body {
height: 100%;
margin: 0px;
font-size: 12px;
}
.mydiv {
background-color: #FFCC66;
background:url(../images/loginbg.png) no-repeat;
border: 0px solid #f00;
overflow-y:auto;
overflow-x:auto;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index: 999;
width: 434px;
height: 238px;
left: 50%;
top: 50%;
margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */
margin-top: -80px !important; /*FF IE7 该值为本身高的一半*/
margin-top: 0px;
position: fixed !important; /* FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document . compatMode &&
document . compatMode == 'CSS1Compat') ?
documentElement . scrollTop + ( document .
documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
document . body . scrollTop + ( document . body .
clientHeight - this . clientHeight )/ 2 ); /*IE5 IE5.5*/
}
.mydiv1 {
background-color: #FFCC66;
border: 0px solid #f00;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
overflow-y:auto;
overflow-x:auto;
z-index: 999;
width: 434px;
height: 238px;
left: 50%;
top: 50%;
margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */
margin-top: -80px !important; /*FF IE7 该值为本身高的一半*/
margin-top: 0px;
position: fixed !important; /* FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document . compatMode &&
document . compatMode == 'CSS1Compat') ?
documentElement . scrollTop + ( document .
documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
document . body . scrollTop + ( document . body .
clientHeight - this . clientHeight )/ 2 ); /*IE5 IE5.5*/
}
.bg,.popIframe {
background-color: #666;
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0; /*FF IE7*/
filter: alpha(opacity = 50); /*IE*/
opacity: 0.5; /*FF*/
z-index: 1;
position: fixed !important; /*FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document . compatMode &&
document . compatMode == 'CSS1Compat') ?
documentElement . scrollTop + ( document .
documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
document . body . scrollTop + ( document . body .
clientHeight - this . clientHeight )/ 2 );
}
.popIframe {
filter: alpha(opacity = 0); /*IE*/
opacity: 0; /*FF*/
}
2.js事件:
相关文章推荐
• 浅析Angular+rxjs怎么实现拖拽功能?• 值得了解的几个实用JavaScript优化小技巧• JavaScript学习理解之JSON(总结分享)• 你能搞懂JS的this指向问题吗?看看这篇文章• 一起聊聊JavaScript函数式编程独孤九贱(3)_JavaScript视频教程
javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。没有它,你的前端生涯是不完整的。《php.cn独孤九贱(3)-JavaScript视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了javascript知识。
JavaScript教程122821次播放
独孤九贱(6)_jQuery视频教程
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。
jQuery教程101439次播放
jQuery与Ajax基础与实战
jQuery是最流行的JS函数库,封装了许多实用的功能,其中最引人入胜的就是Ajax。 jQuery中的Ajax操作,语法简单,操作方便,使Ajax从未如此轻松,前端人员从此不再为与服务器异步交互而发愁,本套课程,精选了最常用的几个方法,从基本的语法到每个参数,再到具体实例进行了全面的讲解。
AJAX教程3218次播放
Git教程(60分钟全程无废话版)
Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持
JavaScript教程2498次播放