导航:首页 > 编程语言 > js控制元素在可视区域

js控制元素在可视区域

发布时间:2023-05-28 15:15:59

① 如何用js控制一个DIV框 当用户拉动滚动条~DIV框移动到浏览器可视区域底部时会随着页面可视区域移动

不考虑IE6的话就比较简单,判断一下是否到底部,到了之后将这个div的position设置为fixed就好了top值是固专定的
但是如果要考属虑IE6的话就麻烦一点,因为IE6不支持fixed这个属性你只能通过absolute来处理而此时top值是要不停地改变的,而且在IE6中这个div在滚动时会不停晃动,解决方法是有的但是代价过高,看你的取舍

② 如何使用js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离
var se = document.documentElement.clientHeight //浏览专器可见区域高度。属
if(top <= se ) {
//code
}

③ jQuery中获取元素到页面可视区顶端距离有什么方法

$('h2#answers-title').offset().top-$(document).scrollTop();
$('h2#answers-title').offset().top h2#answers-title元素相对于抄document的垂直位置
$(document).scrollTop() 整个文档被上卷的高度
2者差就是$('h2#answers-title')相对于当前浏览器视图窗口的垂直位置

④ 用js控制div的显示位置

代码如下:

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>div隐藏与显示</title>
<styletype=text/css>
#menus{
background-color:#c4cff0;
}
</style>
<scriptlanguage=javascript>
functionLayer_HideOrShow(cur_div)
{varcurrent=document.getElementById(cur_div);
if(current.style.visibility=="hidden")
{
current.style.visibility="visible";
}
else
{
current.style.visibility="hidden";
}
}
</script>
</head>
<body>
<p></p>
<tableborder="0"width="153"cellpadding="0"style="border-collapse:collapse"id="table1"height="101">
<tr>
<td>
<ahref="#"onclick="Layer_HideOrShow('menus');"><imgborder="0"src="http://www.shuifutour.com/images/456.gif"width="153"height="25"></a></td>
</tr>
<tr>
<td>
<divid="menus">
<tableborder="0"width="100%"cellpadding="0"style="border-collapse:collapse"height="150"id="table2">
<tr>
<td></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
====================
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<scriptlanguage="JavaScript"type="text/JavaScript">
<!--
functiontoggle(targetid){
if(document.getElementById){
target=document.getElementById(targetid);
if(target.style.display=="block"){
target.style.display="none";
}else{
target.style.display="block";
}
}
}
-->
</script>
<styletype="text/css">
<!--
#div1{
background-color:#000000;
height:400px;
width:400px;
display:none;
}
-->
</style>
</head>

<body>
<inputtype="button"id="butn"value="显示/隐藏"onclick="toggle('div1')"/>
<center>
<divid="div1"></div></center>
居中的DIV
</body>
</html>
=======================
3.javascript控制html元素显示/隐藏

1。编写js函数

<scripttype="text/javascript">

functiondisplay(id){

vartraget=document.getElementById(id);
if(traget.style.display=="none"){
traget.style.display="";
}else{
traget.style.display="none";
}
}
</script>

2.要显示/隐藏的html元素加上id属性

<table>

<trid="menu">

<td>控制这个tr的显示/隐藏</td>

</tr>

</table>

3,添加按钮,链接等触发js函数

<inputtype="button"onclick="display('menu')"value="显示/隐藏"/>

<ahref="#"onclick="display('menu')">显示/隐藏</a>

javascript显示隐藏层<divid=""style="display:none;">广告</div>
<inputtype="botton"onclick="函数">

<scriptlanguage=javascript>
function函数{
if(thisdiv.style.display=='none'){
thisdiv.style.display=""
}
else
thisdiv.style.display="none"
}

</script给div取个ID=“AA”thisdiv=AA

javascript隐藏/显示表单对象
javascript隐藏/显示表单对象
[SCRIPTlanguage=JavaScript]
functionexpandIt(el){
whichEl=document.getElementById(el)
if(whichEl.style.display=='none'){
whichEl.style.display='';
}
else{
whichEl.style.display='none';
}
}

[/SCRIPT]

el是对象的id,不管是tr或者table等等先设置一下id,然后进行调用。

例:

[aonclick="expandIt('ttchild');returnfalse"href="#"]tryit[/a]

[trid="ttchild"][tdwidth="18"]Example[/td][/tr]

使用时把[]变成<>

javascript控制页面控件隐藏显示的两种方法

javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位
方法一:
document.all["PanelSMS"].style.visibility="hidden";
document.all["PanelSMS"].style.visibility="visible";
方法二:
document.all["PanelSMS"].style.display="none";
document.all["PanelSMS"].style.display="inline";

⑤ JQure或者JS怎么获得元素进入浏览器窗口可见区域

var t1=document.getElementById("txt1"); function isFocus(){ if(document.activeElement.id=='txt1'){ alert('txt1获得焦点'); } else{ alert('txt未获得焦点'); } } isFocus();寻找获取到焦点的元素是否和要判断的元素是不是同一个元素

⑥ 求大神指教JS通过单选框控制DIV元素的显示与隐藏的写法!

我这样测试是可以的。不知道你为什么不行
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function onClick(){
document.getElementById("div").style.display="none";
}
</script>
</head>
<body>
<input type="radio" name="sex" id="male" value="male" checked onclick="onClick();">Male

<div id="div">
<input type="radio" name="sex" value="female">Female
</div>
</body>
</html>

⑦ jquery如何让事件在可视区域内执行,当元素在可是区域内在执行动画

网页达到可视区域动画只需要3步

  1. 引入wow.js

  2. 引入animate.css

  3. 给DIV增加动画特效,如:

    .menu{
    animation: flash 1s linear 0s infinite;
    -webkit-animation: flash 1s linear 0s infinite;
    -moz-animation: flash 1s linear 0s infinite;
    -ms-animation: flash 1s linear 0s infinite;
    -o-animation: flash 1s linear 0s infinite;
    }

    具体操作步内骤见容网页链接

⑧ JS如何获得元素到可视网页区域的top值

就是获取当前元素的offsetTop值,减去可视区域的高度和窗口卷起的高度。

$("div").offset() - $(window).scrollTop() - $(window).height()

阅读全文

与js控制元素在可视区域相关的资料

热点内容
苹果5s内购插件 浏览:683
钢琴谱什么网站最好 浏览:595
ihg房间升级次数 浏览:29
ipad斗鱼网络请求错误 浏览:515
类似亿巴生活的app还有哪些 浏览:517
linux文件状态标志 浏览:861
java读取子文件 浏览:1
怎么隐藏文件手机 浏览:479
编程软件哪个需要钱 浏览:875
如何看自己的ie版本 浏览:492
2008r2用户文件夹路径 浏览:755
winzip文件压缩成多个小文件 浏览:562
勒索病毒文件是哪个 浏览:855
群聊机器人代码 浏览:728
用什么充电app最便宜 浏览:531
jspif语句 浏览:896
你删除的照片会在哪个文件夹 浏览:518
编程如何设置 浏览:393
微信jssdk分享qq空间 浏览:840
修改ipadid密码忘记了怎么办 浏览:938

友情链接