导航:首页 > 编程语言 > 侧边栏展开收缩js特效

侧边栏展开收缩js特效

发布时间:2024-09-03 04:30:34

『壹』 想js代码在页面窗口右侧弹出一个侧边栏div,但是不知道问题出在哪

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>222</title>
<style>
html,body{width:100%;height:100%;overflow:hidden;}
#div1{width:100px;height:200px;background:red;top:300px;right:-100px;position:absolute;}
#div1span{width:20px;height:60px;line-height:20px;top:70px;right:100px;background:yellow;text-align:center;position:absolute;}
</style>
</head>
<body>
<divid="div1"><span>111</span></div>
<script>
window.onload=function(){
varoDiv=document.getElementById('div1');
oDiv.style.right='-100px';
oDiv.onmouseover=function(){
startMove(1);
};
oDiv.onmouseout=function(){
startMove(0);
}
};
vartimer=null;
functionstartMove(iTarget){
varoDiv=document.getElementById('div1');
varspeed=1;
clearInterval(timer);
timer=setInterval(function(){
if(iTarget){
oDiv.style.right=parseFloat(oDiv.style.right)+speed+'px';
if(parseFloat(oDiv.style.right)>=0){
oDiv.style.right='0';
window.clearInterval(timer);
}
}else{
oDiv.style.right=parseFloat(oDiv.style.right)-speed+'px';
if(parseFloat(oDiv.style.right)<=-100){
oDiv.style.right='-100px';
window.clearInterval(timer);
}
}
},10);
}
</script>
</body>
</html>

我感觉你的逻辑有点太复杂了,既然都已经定位了,为何不直接用right值来调整呢,上面代码是用改变right值来实现的,并且这种效果通过css的transition更容易实现,可能是你为了专门练习JS吧。

『贰』 如何让WordPress侧边栏的指定模块随页面滚动

本文接着来告诉你如何让你的整个侧边栏或者侧边栏的指定某个模块在页面滚动的时候随着窗口一起滚动。听起来是不是很炫呢。滚动效果,相信大家已经见过太多,无外乎就是加载一个js特效。开始之前为大家介绍一下侧边栏的构成部分,因为本文采用js特效可以具体到侧边栏某模板(比方说A)到达顶部时,指定模块(比方说B)开始随页面滑动。侧边栏是怎么样的构造侧边栏可以通过小工具或者自行编辑sidebar.php代码来完成,模块布局灵活,一般包括近期文章,近期评论,标签云等等等。下面就是一个常见的侧边栏结构,模块id是我自行编写的,方便大家辨识。...//近期文章 ...//热门文章 ...//标签云 ...//近期评论 ...//连接表 上面就是一个简单的侧边栏构造,注各个模块的id,在下一步滚动代码中将得到对应。如何让侧边栏滚动起来下面就以热门文章、标签云两个相邻模块作为指定滚动模块,来说明指定模块如何实现随窗口滑动。varrollStart = $('.recentcomments'), //近期评论模块到达浏览器顶部时,指定模块开始滚动rollOut = $('.recentcomments,.blogroll'); //近期评论以下模块隐藏包括最新评论,指定模块显现rollStart.before(''); //这个可以不用修改,与下面保持一致varoffset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(), rollSet = $('.hotposts,.tagcloud'); //指定滚动的模块idobjWindow.scroll(function() { if (objWindow.scrollTop() > offset.top){ if(rollBox.html(null)){ rollSet.clone().prependTo('.rollbox');//注意与上面的保持一直,不用做修改。 } rollOut.fadeOut(); rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400); } else { rollOut.fadeIn(); rollBox.hide().stop().animate({marginTop:0},400); } });你可以将其粘贴到主题js文件中,也可以用...将其括起来放置到header头文件中。代码说明:随着网页滚动条的滑动,当近期评论模块到达浏览器顶部,近期评论以下的模块包括近期评论隐藏消失,指定模块热门文章和标签云随即显示,开始随窗口滚动。此处代码以最新评论模块为临界点,过了此临界点指定模块显现开始滚动。代码中模块的id一定要和侧边栏sidebar.php模块的id保持一致。请结合代码中的说明理解。注明:指定滚动模块整体高度不要超过浏览器视窗的高度,否者会无限向下延伸。好了,就这样吧。0

『叁』 html(js,jquery)实现伸缩侧边栏

发到你邮箱了,直接运行layout.html试试,看是不是你想要的效果,是的话,给分哦!

『肆』 js 网页的侧边栏,滚动到页面的某个高度之后才出现,刚开始不出现,返回也自动隐藏

JQurey的话var offset = $(selector).scrollTop(),来offset就是高度。
根据这个判断自一下就行了。
offset<100时,$(selector).hide(),
>100时,$(selector).show();
逻辑很简单的。
原生也差不多的。

阅读全文

与侧边栏展开收缩js特效相关的资料

热点内容
iphone链接 浏览:110
9元编程课是什么 浏览:436
cad为什么不能输入stl文件 浏览:78
编程与外语哪个更好就业 浏览:299
为什么程序会跑飞 浏览:659
matlab中的m文件是什么 浏览:226
excel批量保存pdf文件 浏览:963
win10文件夹死机动不了 浏览:411
ps打开多页pdf文件 浏览:901
数据库统计某一字段值出现次数 浏览:705
学编程需要哪些方面的能力 浏览:896
在word2003表格中插入一行 浏览:606
怎么把拍照取字的文件转成pdf 浏览:838
小米穿戴app哪里更换表盘 浏览:911
满足该条件更改文件内容的代码 浏览:503
xp系统怎么卸载win10系统文件 浏览:709
华为手机双系统app怎么转 浏览:317
u盘插上pc自动跳出文件夹 浏览:232
机密文件写在哪里 浏览:480
qq主题免费使用女孩 浏览:342

友情链接