导航:首页 > 编程语言 > 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控制元素在可视区域相关的资料

热点内容
网络加载视频失败是怎么回事 浏览:805
传奇账号在哪个文件夹里 浏览:346
百度app在哪里安装 浏览:587
如何设置路由器网络不断网 浏览:471
传到qq群里的文件怎么删除 浏览:861
索尼安卓71更新日志 浏览:234
怎么找手机里的垃圾app 浏览:540
2015蓝桥杯代码填空 浏览:698
安卓数据库dbexecSQL 浏览:227
doc重命名文件格式 浏览:728
getscreen截图工具下载 浏览:719
共识数据是什么时候开始的 浏览:96
数码管显示电压程序 浏览:479
数据库文件有哪个 浏览:543
途强储存在哪个文件夹 浏览:172
如何恢复被覆盖文件 浏览:611
iphone5用哪个版本最好 浏览:327
extjsgrid禁用 浏览:426
如何查找国外论文的编程代码 浏览:366
暗金颜色代码 浏览:789

友情链接