成都网站建设小代码之点击可隐藏显示的层

2023-03-26    分类: 网站建设

一个点击可显示再点击隐藏层的代码,并可随浏览器滚动条拉伸而滚动,可广泛适用于广告、在线客服、快捷留言发布等功能的精短代码。

<div style="width:100px;height:100px;position:absolute;left:-200px;top:80px;background:#FFCC00;border:1px solid #999;">点击可隐藏</div>
<div style="position:absolute;left:2px;top:80px;"><img src=http://www.sh-windows.cn alt="点击打开" /></div>
<script type="text/Javascript">
<!--
var i=0, str="";while(i++<100){str+="<br>"}
document.write(str);

var c=0;
var div = document.getElementsByTagName("div")[0];
var img = document.getElementsByTagName("div")[1];

div.Onclick = function(){
img.style.left = "2px";
div.style.left = "-200px";
}

img.Onclick = function(){
div.style.left = "2px";
img.style.left = "-200px";
}

var y = parseInt(div.style.top);
var my = parseInt(img.style.top);

window.onscroll = function(){
clearInterval(c);
c = setInterval(function(){
var cy = parseInt(div.style.top);
var mcy = parseInt(img.style.top);
var dy = document.body.scrollTop || document.documentElement.scrollTop;
div.style.top = (cy + (dy -(cy-y))*0.1) + "px";
img.style.top = (mcy + (dy -(mcy-my))*0.1) + "px";
},10);
}
//-->
</script>

IE6.0和Fire火狐浏览器中测试通过,其他未测试。J和O改成小写的字母j和o

本文名称:成都网站建设小代码之点击可隐藏显示的层
网站地址:https://www.cdcxhl.com/news38/247788.html

成都网站建设公司_创新互联,为您提供网站营销搜索引擎优化云服务器关键词优化全网营销推广网站排名

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设