浮动框

最新推荐文章于 2021-06-17 17:04:54 发布

转载最新推荐文章于 2021-06-17 17:04:54 发布 · 528 阅读

javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

jquery

4 篇文章

订阅专栏

1.JS

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function scrollImg(){
var posX,posY;
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) {
posX = document.body.scrollLeft;
posY = document.body.scrollTop;
}

var ad=document.getElementById("ad");
ad.style.top=(posY+100)+"px";
ad.style.left=(posX+50)+"px";
setTimeout("scrollImg()",100);
}
</script>

 
 
 
 
<div id="ad" style="position:absolute;background:#eeeeee;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center">此广告位招租</div>
<script type="text/javascript">
scrollImg();
</script>
</body>
</html>

2.jquery:

<html>

	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Scroll Follow Simple Example</title>

	<script type="text/javascript" src="./sf-example/jquery.js"></script>
	<script type="text/javascript" src="./sf-example/ui.core.js"></script>
	<script type="text/javascript" src="./sf-example/jquery.scroll-follow.js"></script>

	<script type="text/javascript">
	$( document ).ready( function ()
	{
	$( '#example' ).scrollFollow();
	}
	);
	</script>

	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	height: 2000px;
	font-family: Georgia;
	font-size: 0.9em;
	line-height: 1.4em;
	}

	#example {
	position: relative;
	width: 180px;
	margin: 10px;
	padding: 20px;
	background: #eee url(/images/sfbgTile.png);
	border: 2px solid #42CBDC;
	}

	p {
	margin: 7px 0 0 0;
	}
	</style>
	</head>

	<body>

	<div id="example">

	<img src="/images/ducks.png"alt="Ducks" />

	<p>
	This is a simple example of Scroll Follow. Scroll down to see what happens.
	</p>

	<p>
	<a href="http://kitchen.net-perspective.com/open-source/scroll-follow/">Back to Scroll Follow home.</a>
	</p>
	</div><!--end #example-->
	</body>
	</html>