新闻特殊排版js效果

HTML部分

<ul class="newsBox"><li><div class="newPIc"><a href="/xinwenzixun/2017/1220/24.html" title=""><img src="/uploads/171220/2-1G220151522627.jpg" alt="">a>div><div class="newText">文字部分文字部分文字部分文字部分文字部分div>li><li><div class="newPIc"><a href="/xinwenzixun/2017/1220/24.html" title=""><img src="/uploads/171220/2-1G220151522627.jpg" alt="">a>div><div class="newText">文字部分文字部分文字部分文字部分文字部分div>li><li><div class="newPIc"><a href="/xinwenzixun/2017/1220/24.html" title=""><img src="/uploads/171220/2-1G220151522627.jpg" alt="">a>div><div class="newText">文字部分文字部分文字部分文字部分文字部分div>li>
ul>

3个解决方法，最终的效果都是一样；

x01 不适用 跨屏/自适应 的前端

$(".newsBox li:nth-child(2) .newText").after($(".newsBox li:nth-child(2) .newPic"));

x02 可用于自适应，跨屏 的前端

$(function(){$(".newsBox li:eq(1) .newPIc").before($(".newsBox li:eq(1) .newText"));if ($(window).width()<880) {$(".newsBox li:eq(1) .newText").before($(".newsBox li:eq(1) .newPIc"));}
})

x03 可用于自适应，跨屏 的前端

$(function(){if($(window).width()>880){$(".newsBox li:eq(1) .newPic").before($(".newsBox li:eq(1) .newText"));}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！