jQuery仿商务通弹出框插件其实原理很简单,简单的来说其实就是一个层的隐藏和显示,再加上一个时间延迟执行的函数就搞定了
写jq之前当然要这个了:jquery-1.4.4.min
新建一个html页面,名字随意然后包含上述文件,新建一个css文件取名随意,然后在html包含此文件html部分代码:
setTimeout(function (){$(".jszx").show()},1000)//表示1000毫秒后执行第一次显示层
$(function(){
$(".jszx3").click(function(){
$(".jszx").hide();//点击关闭层
//每3000毫秒执行一次显示当前层
$(this).stop().fadeTo(30000, 1, function(){
$(".jszx").show();
});
});
$(".jszx2").click(function(){
window.open("/swt.htm");//表示在新窗口打开
})
});
css部分代码:
/*
*position:absolute;top:35%; z-index:9999;position:fixed !important; position:absolute; top:expression(offsetParent.scrollTop+10);left:20%;
css部分定义层的悬浮一直停留在某一位置
*/
.jszx{width:200px; height:100px; border:2px solid #900; position:absolute;top:35%;
z-index:9999;position:fixed !important; position:absolute;
top:expression(offsetParent.scrollTop+10);left:20%;}
.jszx1{ line-height:50px; text-align:center; font-size:14px; color:#999}
.jszx2,.jszx3{width:50px; height:20px; background-color:#900; margin:10px 0 0 30px; float:left;
text-align:center; font-size:14px; line-height:20px; color:#FFF; cursor:pointer; display:inline}