html布局右下角_html布局右下角

html布局右下角_html布局右下角用jQuery实现网页右下角弹出广告效果,这种广告形式很普遍,今天主要分享一种方法,先贴出效果代码:html测试.divCss{bottom:0;display:block;height:25px;overflow:

html布局右下角_html布局右下角

用jQuery实现网页右下角弹出广告效果,这种广告形式很普遍,今天主要分享一种方法,先贴出效果代码:html>

测试

.divCss{

bottom:0;

display:block;

height:25px;

overflow:hidden;

padding:0;

position:fixed;

right:20px;

}

.contentCss{

background:#666;

height:200px;

width:200px;

}

.contentCssHeight{

}

.titleCss{

width:200px;

height:25px;

line-height:25px;

text-align:right;

margin:0px;

background:#999999;

}

#close{

cursor:pointer;

}

测试Div

打开

这是一些测试内容

测试Div

$(function(){

//标题层的高度–提示打开或关闭

var titHeight=$(“#ditTitle”).height();

//内容层的高度

var conHeight=$(“#divContent”).height();

//打开或关闭

$(“#close”).toggle(function(){

//改变提示

$(“#close”).text(“关闭”);

//动画–一秒内消息层高度增加,top增加

$(“#msgDiv”).animate({height:titHeight+conHeight},1000,function(){

/    /展开后执行的函数

});

},function(){

//改变提示

$(“#close”).text(“打开”);

//alert(temp+” “+titHeight);

$(“#msgDiv”).animate({height:titHeight},1000,function(){

//关闭后执行的函数

});

})

//执行

var myTimer,i=8;

function starFun()

{

//触发click事件,显示

if(i==4)

{

$(“#close”).click();

}

//清除timeout,触发click事件,关闭层

if(i==0)

{

window.clearTimeout(myTimer);

if($(“#close”).text()!=”打开”)

$(“#close”).click();

}

myTimer=window.setTimeout(starFun,1000);

i=i-1;

}

starFun()

});

大家复制到HTML文件里去看下效果。

从上面的代码可以看出其核心代码主要是JS那部分。

至于兼容性支持IE7+,足以满足主流兼容了,试试吧!!

今天的文章html布局右下角_html布局右下角分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/77309.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注