响应式页面根据屏幕添加代码的方法

2019-04-23 浏览:1932
响应式页面根据屏幕添加代码的方法
评论:(0)复制地址

这里用到了resize(),直接看代码


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function () {
$(function () {
                var screenWidth = $(window).width();
if (screenWidth <= 1024) {
$("#doc-aside").before("<a class='doc-aside-info' id='doc-aside-info'>词条信息</a>");
}
var onOff = true;
$('#doc-aside-info').click(function () {
if (onOff) {
$('#doc-aside').animate({'opacity': '1','right': '0'}, 500);
$('#doc-aside-info').animate({'right': '348'}, 500);
} else {
$('#doc-aside').animate({'opacity': '0','right': '-348'}, 500);
$('#doc-aside-info').animate({'right': '0'}, 500);
}
onOff = !onOff;
});
$(window).resize(function () {
screenWidth = $(window).width();
if (screenWidth > 768) {
$("#doc-aside-info").hide();
} else {
$("#doc-aside-info").show();
}
})
});
});


评论:(0)复制地址
发布:苗景云 | 分类:IT技术&设计 | Tags:jq resize
上一篇：Hdwiki 6.0 取消wap手机访问 下一篇：完美整合phpcms v9和discuz X3.1实现同步登陆退出论坛免激活

相关文章

用jq的resize使iframe 宽高自适应 2020-09-17

jquery resize屏幕宽度判读语句2018-10-31

发表评论:

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