<head>
<script language="javascript">
function moveImage(){
document.getElementById("div1").style.left = 0
document.getElementById("div1").style.top = document.body.scrollTop
}
var t1 = window.setInterval("moveImage()",100)
</script>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>图片位移</title>
</head>
<body bgcolor="#CCCC00">
<div id="div1" style="position:absolute"><img src="images/hair.png" id="image1" /></div>
</body>
</html>
上面的是你的要求。下面是一个小例子。可以实现图片在页面上滚动。
<script language="javascript">
var left = 0
var top = 0
function moveImage(){
if(left >(document.body.clientWidth)-(document.getElementById("div1").offsetWidth)-4){
left = -left
}
if(top >(document.body.clientHeight)-(document.getElementById("div1").offsetHeight)-4){
top = -top
}
left += 4
top += 4
document.getElementById("div1").style.left = Math.abs(left)
document.getElementById("div1").style.top = Math.abs(top)
}
var t1 = window.setInterval("moveImage()",100)
</script>
<div id="img" style="position:absolute"><a href="#" target="_blank">
<img src="test.gif" >
</a>
</div>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var xPos = 20
var yPos = document.body.clientHeight
var step = 1
var delay = 30
var height = 0
var Hoffset = 0
var Woffset = 0
var yon = 0
var xon = 0
var pause = true
var interval
img.style.top = yPos
function changePos() {
width = document.body.clientWidth
height = document.body.clientHeight
Hoffset = img.offsetHeight
Woffset = img.offsetWidth
img.style.left = xPos + document.body.scrollLeft
img.style.top = yPos + document.body.scrollTop
if (yon) {
yPos = yPos + step
}
else {
yPos = yPos - step
}
if (yPos <0) {
yon = 1
yPos = 0
}
if (yPos >= (height - Hoffset)) {
yon = 0
yPos = (height - Hoffset)
}
if (xon) {
xPos = xPos + step
}
else {
xPos = xPos - step
}
if (xPos <0) {
xon = 1
xPos = 0
}
if (xPos >= (width - Woffset)) {
xon = 0
xPos = (width - Woffset)
}
}
function start() {
img.visibility = "visible"
interval = setInterval(�0�7changePos()�0�7, delay)
}
start()
// End -- >
</script >
第一种方法:Html代码
<html>
<head>
<title>浮动窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b")
var overFlow = $("#over")
b.click(function(){
overFlow.fadeIn()
$("#mask").css("background","#111")
$("#mask").css("opacity","0.8")
})
$("#close").click(function(){
overFlow.fadeOut()
$("#mask").css("background","#fff")
$("#mask").css("opacity","1")
})
drag($("#over"),$("#title"))
})
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"><a id="b" href="#">click</a></div>
</body>
</html>
Js代码
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document
var evt = evt || window.event
var x = evt.offsetX?evt.offsetX:evt.layerX
var y = evt.offsetY?evt.offsetY:evt.layerY
if(overFlow.setCapture){
overFlow.setCapture()
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
}
doc.onmousemove = function(evt){
evt = evt || window.event
var xPosition = evt.pageX || evt.clientX
var yPosition = evt.pageY || evt.clientY
var newX = xPosition - x
var newY = yPosition - y
overFlow.style.left = newX
overFlow.style.top = newY
}
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture()
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
}
doc.onmousemove=null
doc.onmouseup=null
}
}
}
css代码
#over{
position: absolute
left: 300px
top: 200px
border: 1px solid black
display: none
background: #cccccc
cursor: default
width: 300px
z-index: 10
opacity: 1
}
#title{
border: 1px solid #1840C4
background: #95B4DC
padding: 2px
font-size:12px
cursor: default
}
#close{
cursor: pointer
margin-right: 1px
overflow: hidden
}
#content{
border: 1px solid #C2D560
background: #EFF4D7
}
#t{
margin-right:145px
}
#mask{
z-index: 1
background: #fff
width: 1024px
height: 800px
}
#b{
position: absolute
left: 200px
top: 100px
}
body{
padding: 0px
margin: 0px
}
#over{
background: transparent
}
第二种方法:
消息框遮罩层:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:noneposition:absolute"></iframe><div id="show_upload">nothing...</div>'
页面加载loading中:<div id="body_loading" onClick="loaded()"><img src="__PUBLIC__/images/body_load.gif"></div>
关闭浮动窗口:<a href="javascript:hideupload()">关闭窗口建议用小图片</a>
打开浮动窗口:<a href="javascript:showupload('admin.php')">打开浮动</a>
// 消息框loading
function loading(){
var o = $('#body_loading')
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px")
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px")
o.fadeIn("fast")
}
// 消息框消失
function loaded(){
var o = $('#body_loading')
o.fadeOut("fast")
}
// 隐藏浮动窗口
function hideupload(){
$('#show_upload').hide()
$('#show_upload_iframe').hide()
}
// 弹出浮动窗口
function showupload(ajaxurl){
loading()
var o=$('#show_upload')
var f=$('#show_upload_iframe')
var top = 200
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded()
o.html(res)
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px")
if($(document).scrollTop()>200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2)
}
o.css("top",top+"px")
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')})
f.show()
o.show()
}
})
}
