横向滚动菜单iframe高度自适应

最新推荐文章于 2021-06-10 14:21:07 发布

spenan

最新推荐文章于 2021-06-10 14:21:07 发布

阅读量174

点赞数 2

文章标签： html iframe jq

本文链接：https://blog.csdn.net/qq_39138761/article/details/88034714

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="js/jquery.min.js"></script>
</head>
<body style="background:#f5f5f5">

<div class="addSumTitle">


<div id="wrapper" class="wrapper" style="touch-action:none;">
<ul>
<li><a class="bomBorder">热门推荐</a></li>
<li><a>今日头条</a></li>
<li><a>今日新闻</a></li>
<li><a>今日视频</a></li>
<li><a>今日体育</a></li>
<li><a>今日娱乐</a></li>
</ul>
</div>

</div>

var this_x = 0;
$(function () {
clickName();
var myScroll = new IScroll('#wrapper', {
scrollX: true,
click: true,

});

var scrollEndF = function () {
// console.log(this.x, this.currentPage, "scrollEnd");
this_x = this.x * -1;

var this_maxScroll = this.maxScrollX;
console.log(this_x);
//开始移动
if (this_x == 0) {
$(".wrapper ul li:eq(0)> a").addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
}
if (this_x >= 60 && this_x < 130) {
$(".wrapper ul li:eq(1)> a").addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
}

if (this_x >= 110 && this_x <= 405) {
$(".wrapper ul li:eq(2)> a").addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
}
}

myScroll.on('scrollEnd', scrollEndF)

});
function clickName() {
//点击事件
$(".wrapper ul li:eq(0)>a").on('click', function () {
$(this).addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
$(".iframeHtml").attr("src", "iframe/demo1.html");//热门推荐
});
$(".wrapper ul li:eq(1)>a").on('click', function () {
$(this).addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
$(".iframeHtml").attr("src", "iframe/demo2.html");//今日头条
});
$(".wrapper ul li:eq(2)>a").on('click', function () {
$(this).addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
$(".iframeHtml").attr("src", "iframe/demo3.html");//今日新闻
});
$(".wrapper ul li:eq(3)>a").on('click', function () {
$(this).addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
$(".iframeHtml").attr("src", "iframe/demo4.html");//今日视频
});
$(".wrapper ul li:eq(4)>a").on('click', function () {
$(this).addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
$(".iframeHtml").attr("src", "iframe/demo5.html");//今日体育
});
$(".wrapper ul li:eq(5)>a").on('click', function () {
$(this).addClass("bomBorder").parent().siblings().find("a").removeClass("bomBorder");
$(".iframeHtml").attr("src", "iframe/demo6.html");//今日娱乐
});
}
</script>
</body>
</html>