19
2020
02

织梦后台广告管理插入顶部广告高度自动增加

<script>
$(function(){
$(".topad").css("display","block");
//在这里修改图片的地址
$(".topad").css("background","url(/yjjskin/images/test.jpg) no-repeat");
//在这里修改图片的高度
$(".topad").css("height","350px");
let headheight=$(".header").height();
let addheight= $(".topad").height();;
$(".header").height(headheight+addheight);
});
</script>

上面是顶部图片

一开始想的就是加js代码,后来发现只要header高度设置成auto就不用自己计算高度增加值了,省了不少力气。

下面是顶部加幻灯片样式高度自动计算的js

		<div class="flexslider">
               <ul class="slides">
				  <li>
				    <a href="#">
                                         <!-- 在这里修改第1张图片地址 -->
					 <img src="/yjjskin/images/test.jpg" alt="">
                    </a>
                  </li>
				  <li>
				    <a href="#">
                                      //在这里修改第2张图片地址
					 <img src="/yjjskin/images/20181214logo.gif" alt="">
                    </a>
                  </li>
                </ul>
		</div>
		<script>
		$(function() {   
            $(".flexslider1").flexslider({
              animation:'fade',
              slideshowSpeed: 5000, //展示时间间隔ms
              animationSpeed: 1000, //滚动时间ms
              touch: true //是否支持触屏滑动
            });
            $(".topad").css("display","block");
            //在这里修改图片的高度
            let imgHeight="350px";
            $(".topad").css("height",imgHeight);
            $(".topad .flexslider .slides li a img").css("height",imgHeight);
            let headheight=$(".header").height();
            let addheight= $(".topad").height();
            $(".header").height(headheight+addheight);
           });
		</script>

同样把高度改成auto就不用单独更新header的高度了。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。