腾讯首页可关闭的下拉flash广告怎么做的?求js

JavaScript05

腾讯首页可关闭的下拉flash广告怎么做的?求js,第1张

如果你用 jQuery 库的话,这个特效很简单

<div id="myflash" style="display:none">

<!-- flash 放置代码 -->

</div>

<script type="text/javascript">

//下拉显示

function flashShow(){

$("#myflash").slideDown("fast")

}

//上拉隐藏

function flashHide() {

$("#myflash").slideUp("fast")

}

flashShow()//默认将flash 下拉显示出来

</script>

具体按钮的处理,就不作说明了,打开、收回函数处理,上面已经写了

程序上给body或documentElement的scrollLeft、scrollTop赋值,

浏览器在没有出滚动条时,赋值后该值不会发生变化,始终是0。

下面是示例,该检测方法,不仅可以检测页面滚动条,传入要检测的节点,一样可以得到想要的结果。

代码(给scrollLeft,scrollTop赋负数值时会报错,此外scrollLeft,scrollTop的值不能大于实际最大的滚动值):

复制代码代码示例:

var isScroll = function (el) {

// test targets

var elems = el ? [el] : [document.documentElement, document.body]

var scrollX = false, scrollY = false

for (var i = 0i <elems.lengthi++) {

var o = elems[i]

// test horizontal

var sl = o.scrollLeft

o.scrollLeft += (sl >0) ? -1 : 1

o.scrollLeft !== sl &&(scrollX = scrollX || true)

o.scrollLeft = sl

// test vertical

var st = o.scrollTop

o.scrollTop += (st >0) ? -1 : 1

o.scrollTop !== st &&(scrollY = scrollY || true)

o.scrollTop = st

}

// ret

return {

scrollX: scrollX,

scrollY: scrollY

}

}

第二部分,jquery判断滚动条到底部并加载数据的方法。js滚动条回到顶部示例代码 js 页面刷新记住滚动条位置的方法 js动态隐藏滚动条(兼容多浏览器 IE FF等)

有些浏览器下会出现累计执行、重复执行的情况,可以在准备执行前和执行完毕加一个执行完毕的标记,当判断上一次执行完毕,再执行该次操作。

复制代码代码示例:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>jQuery实现当拉动滚动条到底部加载数据</title>

<style type="text/css">

*{margin:0padding:0}

body{font-size:14pxcolor:#444font-family:"微软雅黑",Arialbackground:#fff}

a{color:#444text-decoration: none}

a:hover{color:#065BC2text-decoration: none}

.clear{clear:both}

img{border:nonevertical-align: middle}

ul{list-style: none}

</style>

</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript">

//首先,窗口绑定事件scroll

$(window).bind("scroll",function() {

// 判断窗口的滚动条是否接近页面底部,这里的20可以自定义

if ($(document).scrollTop() + $(window).height() >$(document).height() - 20) {

//没有写ajax的调用,直接触发了链接的click事件。

$("#container").append('<div style="height:500px">dd</div>')

} // www.jbxue.com

})

</script>

</head>

<body>

<div id="container">

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

</div>

</body>

</html>

另外,此下拉到最后,浏览器会记住当前滚动条位置,会在刷新页面后,直接执行操作,所以在刷新页面时要执行,滚动条到顶部的操作。

复制代码代码示例:

<script>

$(document).ready(function(){

$('body,html').animate({scrollTop:0})

})

</script>

在jQuery中获取浏览器窗口的尺寸信息

在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码:

$(window).height()  //浏览器时下窗口可视区域高度

$(document).height()//浏览器时下窗口文档的高度

$(document.body).height()//浏览器时下窗口文档body的高度

$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin

$(window).width()  //浏览器时下窗口可视区域宽度

$(document).width()//浏览器时下窗口文档对于象宽度

$(document.body).width()//浏览器时下窗口文档body的高度

$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding margin

复制粘贴我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

*{margin:0}

body{

height:1000px

width:1000px

}

#a{

width:300px

height:100px

background:red

}

</style>

<script>

var isie6 = window.XMLHttpRequest?false:true

window.onload = function(){

var a = document.getElementById('a')

var d = document.getElementById('d')

if(isie6){

a.style.position = 'absolute'

window.onscroll = function(){

d.innerHTML = ''

}

}else{

a.style.position = 'fixed'

}

a.style.left= '0'

a.style.bottom = '0'

}

</script>

</head>

<body>

<div id ="d" style="display:none">rgrrrrrrrr</div>

<div id='a'>test</div>

</body>

</html>

若是效果不是你想要的,我还可以给你写,到你满意为止。