以下是 满屏带登陆框jQuery焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.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=gb2312" />
<title>满屏带登陆框jQuery焦点图</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--focus start-->
<div class="focus" id="focus">
<div class="login_box">
<div class="login">
<div class="login_bg"></div>
<div class="login_content">
<!--login main start-->
<ul id="login_main" class="login_main">
<li class="li_0"><a title="站长统计用户" hidefocus="true" href="javascript:void(0)" class="active" >站长统计用户</a></li>
<li class="li_1"><a title="全景统计用户" hidefocus="true" href="#" target="_blank" >全景统计用户</a></li>
</ul>
<!--login main end-->
<!--login sub start-->
<div id="login_sub" class="login_sub">
<!--login_` start-->
<div id="login_cnzz" class="login_cnzz">
<table>
<tbody>
<tr>
<td class="td_0">用户名：</td><td class="td_1"><input type="text" autocomplete="off" name="username_cnzz" id="username_cnzz" value="请输入用户名" tabindex="1"></td>
</tr>
<tr>
<td class="td_0">密 码：</td><td class="td_1"><input type="password" autocomplete="off" name="password_cnzz" id="password_cnzz" value="******" tabindex="2"></td>
</tr>
<tr>
<td class="td_0"></td><td class="td_2"><input type="checkbox" id="login_cnzz_remeber" autocomplete="off"> <label for="login_cnzz_remeber">记住用户名密码</label></td>
</tr>
<tr>
<td></td><td class="td_4"><p class="clearFix"><span id="submit_cnzz">登陆</span><a hidefocus="true" class="a_1" title="忘记密码？" href="#">忘记密码？</a></p></td>
</tr>
<tr>
<td colspan="2" id="error_cnzz" class="login_error"></td>
</tr>
</tbody>
</table>
<a class="register" id="register_cnzz" title="注册" hidefocus="true" href="#">注册</a>
</div>
<!--login_cnzz end-->
</div>
<!--login sub end-->
</div>
</div>
</div>
<div id="focus_m" class="focus_m">
<ul>
<li class="li_1"><a href="#" hidefocus="true"></a></li>
<li class="li_2"><a href="#" hidefocus="true"></a></li>
<li class="li_3"><a href="#" hidefocus="true"></a></li>
</ul>
</div>
<a href="javascript:;" class="focus_l" id="focus_l" hidefocus="true" title="上一张"><b></b><span></span></a>
<a href="javascript:;" class="focus_r" id="focus_r" hidefocus="true" title="下一张"><b></b><span></span></a>
</div>
<!--focus end-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>JS代码(common.js):
//全局window.tui={
}
;
//loadingtui.Loading=new Function();
tui.Loading.prototype={
init:function(o){
this.o=o;
this.oImg=document.createElement('div');
this.oImg.className='loading';
this.oImg.style.display='none';
this.oB=document.createElement('b');
this.oB.innerHTML='loading';
this.oImg.appendChild(this.oB);
this.o.appendChild(this.oImg);
if (this.oTop){
this.oImg.style.top=this.oTop+'px'}
;
}
,funcShow:function(){
var that=this;
var i=0;
this.oImg.style.display='block';
this.oAuto=setInterval(loading,80);
function loading(){
i==11?i=0:i++;
that.oB.style.top="-"+i*40+"px"}
;
}
,funcStop:function(){
clearInterval(this.oAuto);
this.oImg.style.display='none';
}
}
;
//alerttui.Alert=function (text,title){
var o=document.getElementById('alert_mask');
var out=document.getElementById('alert_out');
out.innerHTML='';
o.style.display='none';
title=title || '提示';
out.innerHTML='<div class="alert_inn"><h3><b>X</b>'+title+'</h3><h4>'+text+'</h4><p class="p_0"><a href="javascript:;
" hidefocus="true" title="确定">确定</a></p>';
var a=o.getElementsByTagName('a');
var b=o.getElementsByTagName('b')[0];
o.style.height=Math.max(document.body.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)+'px';
out.style.top=(Math.max(document.body.scrollTop,document.documentElement.scrollTop)+200)+'px';
b.onclick=a[0].onclick=function(){
out.innerHTML='';
o.style.display='none';
}
;
o.style.display='block';
}
;
//confirmtui.Confirm=function (set){
var o=document.getElementById('alert_mask');
var out=document.getElementById('alert_out');
set.title=set.title || '提示';
set.callBack=set.callBack || false;
out.innerHTML='';
o.style.display='none';
out.innerHTML='<div class="alert_inn"><h3><b>X</b>'+set.title+'</h3><h4>'+set.text+'</h4><p class="p_0"><a href="javascript:;
" hidefocus="true" title="确定">确定</a><a href="javascript:;
" hidefocus="true" title="取消">取消</a></p>';
var a=o.getElementsByTagName('a');
var b=o.getElementsByTagName('b')[0];
o.style.height=Math.max(document.body.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)+'px';
out.style.top=(Math.max(document.body.scrollTop,document.documentElement.scrollTop)+200)+'px';
b.onclick=a[1].onclick=function(){
out.innerHTML='';
o.style.display='none';
}
;
a[0].onclick=function(){
out.innerHTML='';
o.style.display='none';
set.callBack();
}
;
o.style.display='block';
}
;
//addEventtui.addEvent=function(Elem,type,handle){
if (Elem.addEventListener){
Elem.addEventListener(type,handle,false);
}
else if (Elem.attachEvent){
Elem.attachEvent("on" + type,handle);
}
;
}
;
//delEventtui.delEvent=function(Elem,type,handle){
if (Elem.removeEventListener){
Elem.removeEventListener(type,handle,false);
}
else if (Elem.detachEvent){
Elem.detachEvent("on" + type,handle);
}
;
}
;
tui.getElemPos=function(obj){
var pos ={
"top":0,"left":0}
;
if (obj.offsetParent){
while (obj.offsetParent){
pos.top += obj.offsetTop;
pos.left += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if(obj.x){
pos.left += obj.x;
}
else if(obj.x){
pos.top += obj.y;
}
return{
x:pos.left,y:pos.top}
;
}
;
//placeHoldertui.placeHolder=function(input){
for (var i=0;
i<input.length;
i++){
input[i].onfocus=function(){
var that=this;
that.className='i_0';
setTimeout(function(){
that.select()}
,10);
}
;
input[i].onblur=function(){
this.className='';
}
;
}
;
}
;
//useragenttui.Sys=function (){
var Sys={
}
;
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1]:(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1]:(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1]:(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1]:(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1]:0;
return Sys;
}
;
//正则tui.regular=function(type,value){
//正则表达式var regular={
}
;
//域名//regular['domain']=/^([a-zA-Z0-9]([a-zA-Z0-9\-]{
0,61}
[a-zA-Z0-9])?\.)+[a-zA-Z]{
2,6}
$/;
var strRegex = "^((https|http|ftp|rtsp|mms)?://)"+ "?(([0-9a-z_!~*'().&=+$%-]+:)?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@ + "(([0-9]{
1,3}
\.){
3}
[0-9]{
1,3}
" // IP形式的URL- 199.194.52.184 + "|" // 允许IP和DOMAIN（域名） + "([0-9a-z_!~*'()-]+\.)*" // 域名- www. + "([0-9a-z][0-9a-z-]{
0,61}
)?[0-9a-z]\." // 二级域名 + "[a-z]{
2,6}
)" // first level domain- .com or .museum + "(:[0-9]{
1,4}
)?" // 端口-:80 + "((/?)|" // a slash isn't required if there is no file name + "(/[0-9a-z_!~*'().;
?:@&=+$,%#-]+)+/?)$";
regular['domain']=new RegExp(strRegex);
//二级域名regular['subDomain']=/([0-9a-z][0-9a-z-]{
0,61}
)?[0-9a-z]\./;
//正整数regular['num']=/^[1-9]\d*$/;
//中文 英文 数字regular['text']=/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[\w])*$/;
//邮箱regular['email']=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{
2,3}
){
1,2}
)$/;
return regular[type].test(value);
}
;
function Sys(){
var Sys={
}
;
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1]:(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1]:(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1]:(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1]:(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1]:0;
return Sys;
}
;
function addEvent(Elem,type,handle){
if (Elem.addEventListener){
Elem.addEventListener(type,handle,false);
}
else if (Elem.attachEvent){
Elem.attachEvent("on" + type,handle);
}
;
}
;
JS代码(index.js):
/***********幻灯*****************/
auto=null;
timer=null;
var focus=new Function();
focus.prototype={
init:function(){
//默认动画频率this.aTime=this.aTime || 10;
//默认间隔this.sTime=this.sTime || 5000;
//图片容器this.oImg=document.getElementById('focus_m').getElementsByTagName("ul")[0];
this.oImgLi=this.oImg.getElementsByTagName("li");
//左右按钮this.oL=document.getElementById('focus_l');
this.oR=document.getElementById('focus_r');
//创建文字容器this.createTextDom();
//默认第一帧this.target=0;
//开始动画this.autoMove();
//鼠标this.oAction();
}
,createTextDom:function(){
var that=this;
//创建文字容器this.oText=document.createElement("div");
this.oText.className="focus_s";
var ul=document.createElement('ul');
var frag=document.createDocumentFragment();
for (var i=0;
i<this.oImgLi.length;
i++){
var li=document.createElement("li");
li.innerHTML='<b></b>';
if (i==0){
li.className="active";
}
;
frag.appendChild(li);
}
;
ul.appendChild(frag);
this.oText.appendChild(ul);
this.o.insertBefore(this.oText,this.o.firstChild);
//文字容器绑定动作this.oTextLi=this.oText.getElementsByTagName("li");
}
,autoMove:function(){
var that = this;
auto=setInterval(function(){
that.goNext()}
,that.sTime);
}
,goNext:function(){
this.target=this.nowIndex();
this.target==this.oTextLi.length-1 ? this.target=0:this.target++;
this.aStep=(this.target-this.nowIndex())*this.step;
this.removeClassName();
this.oTextLi[this.target].className="active";
this.startMove();
}
,goPrev:function(){
this.target=this.nowIndex();
this.target==0 ? this.target=this.oTextLi.length-1:this.target--;
this.aStep=(this.target-this.nowIndex())*this.step;
this.removeClassName();
this.oTextLi[this.target].className="active";
this.startMove();
}
,startMove:function (){
var that=this;
var t=0;
this.timer='';
function set(){
if (t>100){
clearInterval(that.timer);
}
else{
for (var i=0;
i<that.oImgLi.length;
i++){
that.oImgLi[i].style.display='none';
}
;
that.oImgLi[that.target].style.display='block';
that.setOpacity(that.oImg,t);
t+=5;
}
;
}
;
timer=setInterval(set,that.aTime);
}
,setOpacity:function(elem,level){
if(elem.filters){
elem.style.filter = 'alpha(opacity=' + level + ')';
elem.style.zoom = 1;
}
else{
elem.style.opacity = level / 100;
}
;
}
,nowIndex:function(){
for (var i=0;
i<this.oTextLi.length;
i++){
if (this.oTextLi[i].className=='active'){
return i;
break;
}
}
;
}
,oAction:function(){
var that=this;
for (var i=0;
i<this.oTextLi.length;
i++){
this.oTextLi[i].index=i;
this.oTextLi[i].onclick=function(){
clearInterval(auto);
clearInterval(timer);
that.setOpacity(that.oImg,100);
that.target=this.index;
that.removeClassName();
this.className='active';
that.startMove();
}
}
;
/*mouseEnter (that.o,'mouseenter',function(e){
clearInterval(auto);
}
);
*/
mouseEnter (that.o,'mouseleave',function(e){
clearInterval(auto);
that.autoMove();
}
);
this.oL.onclick=function(){
that.goPrev();
}
;
this.oR.onclick=function(){
that.goNext();
}
;
}
,removeClassName:function(){
for (var i=0;
i<this.oTextLi.length;
i++){
this.oTextLi[i].className=""}
;
}
}
;
var focusRun=new focus();
focusRun.o=document.getElementById("focus");
function mouseEnter(ele,type,func){
if(window.document.all)ele.attachEvent('on'+type,func);
else{
//ffif(type==='mouseenter')ele.addEventListener('mouseover',this.withoutChildFunction(func),false);
else if(type==='mouseleave')ele.addEventListener('mouseout',this.withoutChildFunction(func),false);
elseele.addEventListener(type,func,false);
}
;
}
;
function withoutChildFunction(func){
return function(e){
var parent=e.relatedTarget;
while(parent!=this&&parent){
try{
parent=parent.parentNode;
}
catch(e){
break;
}
}
if(parent!=this)func(e);
}
;
}
;
/***********marquee*****************/
marqueeTime=null;
var marquee=function(){
var o=document.getElementById('marquee').getElementsByTagName('ul')[0];
var li=o.getElementsByTagName('li');
var l=document.getElementById('marquee_l');
var r=document.getElementById('marquee_r');
var m=li.length-1;
var w=135;
var aTime=10;
function goPrev(){
clearTimeout(marqueeTime);
startMove(false);
}
;
function goNext(){
clearTimeout(marqueeTime);
startMove(true);
}
;
function startMove(type){
if (type){
var tt=0;
}
else{
var tt=w;
var t1=document.createElement('li');
var t2=o.getElementsByTagName('li')[m];
t1.innerHTML=t2.innerHTML;
o.insertBefore(t1,o.firstChild);
o.removeChild(t2);
o.style.marginLeft='-'+tt+'px';
}
;
function set(){
if (type){
if (tt>=w){
clearInterval(marqueeTime);
var t1=document.createElement('li');
var t2=o.getElementsByTagName('li')[0];
t1.innerHTML=t2.innerHTML;
o.appendChild(t1);
o.removeChild(t2);
o.style.marginLeft=0;
}
else{
o.style.marginLeft='-'+tt+'px';
tt+=Math.ceil((w-tt)*0.1);
}
;
}
else{
if (tt<=0){
clearInterval(marqueeTime);
o.style.marginLeft=0;
}
else{
o.style.marginLeft='-'+tt+'px';
tt=Math.floor(0.9*tt);
}
;
}
}
;
marqueeTime=setInterval(set,aTime);
}
;
if (li.length<7){
l.style.display=r.style.display='none'}
else{
r.onclick=function(){
goNext();
}
;
l.onclick=function(){
goPrev();
}
;
}
;
}
;
window.onload=function(){
focusRun.init();
marquee();
}
;
CSS代码(main.css):
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,textarea,p,th,td,tr,table,tbody,thead,tfoot,em,strong,span{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0 none;}
em{font-weight:normal;font-style:normal;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
.clearFix:after{content:' ';display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
.clearFix{*zoom:1;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
input,textarea{font-size:12px;outline:0 none;}
/*body*/
body,input,textarea{font-family:tahoma,'\5fae\8f6f\96c5\9ed1',simsun;font-size:12px;color:#333;}
html,body{line-height:1.5;background:#fff;}
body{background:url(../images/null.png) 0 0 no-repeat fixed #fff;min-width:1000px;_width:auto;}
a{color:#333;outline:0 none;}
/*focus*/
.focus{height:390px;overflow:hidden;position:relative;background:#ccc;}
.focus_m ul{width:100%;height:390px;overflow:hidden;}
.focus_m li{width:100%;height:390px;_float:left;}
.focus_m li.li_1{background:url(../images/1.jpg) center 0 no-repeat #288cc0;}
.focus_m li.li_2{background:url(../images/2.jpg) center 0 no-repeat #76b7d8;}
.focus_m li.li_3{background:url(../images/3.jpg) center 0 no-repeat #bb3838;}
.focus_s{height:0;position:relative;margin:0 auto;z-index:2;width:1000px;}
.focus_s ul{height:12px;overflow:hidden;position:absolute;left:10px;top:360px;}
.focus_s li{float:left;cursor:pointer;height:12px;width:12px;overflow:hidden;margin-right:10px;}
.focus_s li b{display:block;text-indent:-999em;background:url(../images/circle.png) 0 0 no-repeat;width:12px;height:32px;overflow:hidden;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src='images/circle.png');_background:none;}
.focus_s li.active b{margin-top:-20px;}
.focus_l,.focus_r{position:absolute;display:block;width:50px;height:75px;overflow:hidden;z-index:2;top:150px;}
.focus_l{left:0;}
.focus_r{right:0;}
.focus_l b,.focus_r b{position:absolute;z-index:1;display:block;width:50px;height:75px;overflow:hidden;background:#000;opacity:0.3;filter:alpha(opacity=30);cursor:pointer;}
.focus_l span,.focus_r span{display:block;position:relative;z-index:2;width:22px;height:33px;top:21px;cursor:pointer;}
.focus_l span{left:12px;background:url(../images/l.png) 0 0 no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src='images/l.png');_background:none;}
.focus_r span{left:16px;background:url(../images/r.png) 0 0 no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src='images/r.png');_background:none;}
.focus_l:hover,.focus_r:hover{*zoom:1;}
.focus_l:hover b,.focus_r:hover b{opacity:0.5;filter:alpha(opacity=50);}
/*login*/
.login_box{height:0;position:relative;margin:0 auto;z-index:2;width:1000px;}
.login{position:absolute;width:304px;height:314px;overflow:hidden;padding:10px;top:28px;right:0;}
.login_bg{position:absolute;z-index:1;width:400px;height:400px;background:#e8e8e8;opacity:0.4;filter:alpha(opacity=40);left:0;top:0;}
.login_content{border:1px solid #8a9eaa;position:relative;width:302px;height:312px;overflow:hidden;z-index:2;background:url(../images/login_bg.png) 0 0 repeat-x;}
.login_main{height:41px;overflow:hidden;}
.login_main li{width:151px;height:41px;overflow:hidden;float:left;}
.login_main a{display:block;width:150px;height:40px;text-align:center;font-size:14px;letter-spacing:1px;line-height:40px;border:1px solid #8a9eaa;background:#f9f9f9;}
.login_main a.active{background:none;border-color:#f0f0f0;}
.login_main a:hover{color:#f60;}
.login_main .li_0 a{border-width:0 1px 1px 0;}
.login_main .li_1 a{border-width:0 0 1px 1px;}
.login_cnzz{padding:0 10px;position:relative;}
.login_cnzz table{table-layout:fixed;width:100%;}
.login_cnzz td{padding-top:10px;}
.login_cnzz td.td_0{width:60px;text-align:right;}
.login_cnzz td.td_1{}
.login_cnzz td.td_1 input{width:180px;height:26px;line-height:26px;background:#fff;border:1px solid #ccc;padding:0 5px;color:#919191;}
.login_cnzz td.td_1 input:focus{border-color:#8fb5cf;color:#000;}
.login_cnzz td.td_2 input{vertical-align:middle;margin-top:-2px;margin-bottom:1px;}
.login_cnzz td.td_3 input{width:60px;height:26px;line-height:26px;background:#fff;border:1px solid #ccc;padding:0 5px;color:#919191;}
.login_cnzz td.td_3 input:focus{border-color:#8fb5cf;color:#000;}
.login_cnzz td.td_4 a{float:left;overflow:hidden;height:32px;line-height:32px;overflow:hidden;}
.login_cnzz td.td_4 span{display:block;text-indent:-999em;float:left;overflow:hidden;height:32px;line-height:32px;overflow:hidden;width:73px;height:32px;overflow:hidden;background:url(../images/btn.png) 0 -100px no-repeat;cursor:pointer;}
.login_cnzz td.td_4 span:hover{background-position:-100px -100px;}
.login_cnzz td.td_4 a.a_1{color:#0387cf;margin-left:10px;}
.login_cnzz td.td_4 a.a_1:hover{text-decoration:underline;}
.register{position:absolute;width:257px;height:40px;overflow:hidden;background:url(../images/btn.png) 0 0 no-repeat;display:block;text-indent:-999em;cursor:pointer;left:50%;margin-left:-129px;top:220px;}
.register:hover{background-position:0 -50px;}
.login_error{text-align:center;color:#f00;}
.index_box{margin-top:15px;}
.index_box h3{height:30px;line-height:30px;overflow:hidden;font-size:14px;}
分享到QQ
分享到微博
微信扫一扫
