必威官网登录-betway必威官网|体育在线

热门关键词: 必威体育,betway必威官网,必威官网登录,必威app下载

点击时候会隐藏在屏幕在左侧betway必威官网,如

作者: 计算机网络  发布:2019-09-09
<style type="text/css">
*{margin:0;padding:0;}
body{height:2000px;}
.floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px;right:0; _position:absolute; background:url(//files.jb51.net/demoimg/2014/bg_slide2_120_270.png) no-repeat;}
.floatAd a{display:block;}
.floatAd img{border:none;}
.floatAd .closeAd{width:50px; height:20px; display:block; cursor:pointer;margin:9px 0 0 auto;}
</style>
<div class="floatAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第3张图"></a>
<a href="#" target="_blank" style="display:none;"><img src="#" width="120" height="270" alt="第4张图"></a>

</div>
<script type="text/javascript">
$(".closeAd").click(function(){
 $(".floatAd").hide();
})
/*隔时切换飘浮广告*/
function changePic(obj,times){
 var num=0,
  obj =$("." + obj+" >a"),
  times=times*1000,
  len=obj.length;
 //alert(len);
 setInterval(function(){
  num++;
  num=num>len-1?0:num;//console.log(num);
  $(obj).eq(num).show().siblings("a").hide();
  },times)
 }
/*for ie6*/
function scrollAd(obj) {
 var obj = "." + obj;
 var adTop = $(".floatAd").offset().top;
 //alert(adTop);
 $(window).scroll(function () {
  $(".floatAd").css({
   top : $(window).scrollTop() + adTop
  })
 })
}
$(function () {
 //针对ie6,模拟position:fixed效果
 if ($.browser.msie && parseInt($.browser.version) == 6) {
  scrollAd("floatAd");
 }
 //执行定时切换图片广告
 changePic("floatAd",2);//每隔2秒切换一次广告图片展示,间隔时间可控
})
</script>

本文实例讲述了JS实现可点击展开与关闭的左侧广告代码。分享给大家供大家参考。具体如下:

1

我们还可以改下代码,实现“单边展示飘浮广告,多个广告轮播展示”的效果,更改后的源代码:

betway必威官网 1

符合标准的正常工作的对联广告

源码如下:

希望本文所述对大家的javascript程序设计有所帮助。

1

<style type="text/css">
*{margin:0;padding:0;}
body{height:2000px;}
.floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px; _position:absolute; background:url(//files.jb51.net/demoimg/2014/bg_slide2_120_270.png) no-repeat;}
.floatAd a{display:block;}
.floatAd img{border:none;}
.floatAd .closeAd{width:50px; height:20px; display:block; cursor:pointer;margin:9px 0 0 auto;}
.flAd{left:0;}
.frAd{right:0;}
</style>
<div class="floatAd flAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第1张图"></a>

</div>
<div class="floatAd frAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第2张图"></a>

</div>
<script type="text/javascript">
$(".closeAd").click(function(){
 $(this).parent(".floatAd").hide();
})
/*for ie6*/
function scrollAd(obj) {
 var obj = "." + obj;
 var adTop = $(".floatAd").offset().top;
 //alert(adTop);
 $(window).scroll(function () {
  $(".floatAd").css({
   top : $(window).scrollTop() + adTop
  })
 })
}
$(function () {
 //针对ie6,模拟position:fixed效果
 if ($.browser.msie && parseInt($.browser.version) == 6) {
  scrollAd("floatAd");
 }
})
</script>

betway必威官网 2

看到有些对联广告加了关闭按钮,但很多是flash的,所以对这个“符合标准的对联广告”进行了修改,也加入了关闭按钮(实际是隐藏,不过效果一样),关于隐藏层,在论坛里搜索了一下,大致找到以下两个:
onclick="lovexin14.style.display = 'none'"
onclick="lovexin12.style.visibility='hidden'"
想问问前辈们,这两种有什么区别?哪种好一些呢?
还有在点了关闭之后,会返回页面顶端,怎么去掉这种情况呢?

您可能感兴趣的文章:

  • js 左右悬浮对联广告代码示例
  • w3c声明下可运行 兼容性比较好的js对联广告集合
  • js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
  • 对联广告js flash激活
  • 符合标准的js对联广告
  • js QQ客服悬浮效果实现代码

1

这里介绍的是JS实现网页上可点击展开、关闭的左侧广告代码,表现形式类似对联广告,不过操作方式不一样,点击时候会隐藏在屏幕在左侧,但是不是完全隐藏,仍显示一个图片竖条的广告,而且点击“显示”的时候,它会重新打开广告,这种广告可以提高网页的用户体验。

1

运行效果截图如下:

1

<!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>
<title>网页上可点击展开、关闭的左侧广告代码</title>
</head>
<body>
<div id="Bar1190_big" style="position:absolute;z-index:9;top:10px;left:0px;width:100px;height:300px;">
<div id="AD1190" style="width:100px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="100" height="300" src="images/2401.jpg" alt="betway必威官网 3" border="0"></a>
</div>
<div style="height:18px;width:100px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_hidden()">关 闭</a> 
</div>
</div>
<div id="Bar1190_small" style="position:absolute;z-index:9;top:10px;display:none;left:0px;width:20px;height:300px;">
<div id="AD1190" style="width:20px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="25px" height="300" src="images/2402.jpg" alt="betway必威官网 4" border="0"></a>
</div>
<div style="height:18px;width:25px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_show()">展开</a>
</div>
</div>
<script type="text/javascript">
function bar1190_show(){
document.getElementById('Bar1190_big').style.display='';
document.getElementById('Bar1190_small').style.display='none';
}
function bar1190_hidden(){
document.getElementById('Bar1190_big').style.display='none';
document.getElementById('Bar1190_small').style.display='';
}
var autohide1190 = setTimeout("bar1190_hidden()",6000);
</script>
</body>
</html>

1

您可能感兴趣的文章:

  • js 左右悬浮对联广告特效代码
  • js 左右悬浮对联广告代码示例
  • js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
  • w3c声明下可运行 兼容性比较好的js对联广告集合
  • js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
  • 符合标准的js对联广告
  • [对联广告] JS脚本类
  • JS右下角广告窗口代码(可收缩、展开及关闭)
  • js实现网站最上边可关闭的浮动广告条代码
  • JS实现可关闭的对联广告效果代码

1

在线演示地址如下:

1

具体代码如下:

1

1

1

欢迎访问脚本之家 www.jb51.net

1

1

1

1

1

本文由betway必威官网发布于计算机网络,转载请注明出处:点击时候会隐藏在屏幕在左侧betway必威官网,如

关键词: