***图形特效***图片随意移动
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件--------------------------------------------------------------------------------
脚本说明:
第一步:把如下代码加入<body>区域中
<style type="text/css">
#plane1 {position:absolute; left:290; top:170; width:121; z-index:0}
#plane2 {position:absolute; left:400; top:250; width:118; z-index:0}
</style>
<script language="javascript">
//modified by the coffeecup html editor++
//http://www.coffeecup.com
// global variables for platform branching
var isnav, isie
if (parseint(navigator.appversion) >= 4) {
if (navigator.appname == "netscape") {
isnav = true
} else {
isie = true
}
}
// ***begin css custom api functions***
// set zindex property
function setzindex(obj, zorder) {
obj.zindex = zorder
}
// position an object at a specific pixel coordinate
function shiftto(obj, x, y) {
if (isnav) {
obj.moveto(x,y)
} else {
obj.pixelleft = x
obj.pixeltop = y
}
}
// ***end api functions***
// global holds reference to selected element
var selectedobj
// globals hold location of click relative to element
var offsetx, offsety
// find out which element has been clicked on
function setselectedelem(evt) {
if (isnav) {
// declare local var for use in upcoming loop
var testobj
// make copies of event coords for use in upcoming loop
var clickx = evt.pagex
var clicky = evt.pagey
// loop through all layers (starting with frontmost layer)
// to find if the event coordinates are in the layer
for (var i = document.layers.length - 1; i >= 0; i--) {
testobj = document.layers
if ((clickx > testobj.left) &&
(clickx < testobj.left + testobj.clip.width) &&
(clicky > testobj.top) &&
(clicky < testobj.top + testobj.clip.height)) {
// if so, then set the global to the layer, bring it
// forward, and get outa here
selectedobj = testobj
setzindex(selectedobj, 100)
return
}
}
} else {
// use ie event model to get the targeted element
var imgobj = window.event.srcelement
// make sure it's one of our planes
if (imgobj.parentelement.id.indexof("plane") != -1) {
// then set the global to the style property of the element,
// bring it forward, and say adios
selectedobj = imgobj.parentelement.style
setzindex(selectedobj,100)
return
}
}
// the user probably clicked on the background
selectedobj = null
return
}
// drag an element
function dragit(evt) {
// operate only if a plane is selected
if (selectedobj) {
if (isnav) {
shiftto(selectedobj, (evt.pagex - offsetx), (evt.pagey - offsety))
} else {
shiftto(selectedobj, (window.event.clientx - offsetx), (window.event.clienty - offsety))
// prevent further system response to dragging in ie
return false
}
}
}
// set globals to connect with selected element
function engage(evt) {
setselectedelem(evt)
if (selectedobj) {
// set globals that remember where the click is in relation to the
// top left corner of the element so we can keep the element-to-cursor
// relationship constant throughout the drag
if (isnav) {
offsetx = evt.pagex - selectedobj.left
offsety = evt.pagey - selectedobj.top
} else {
offsetx = window.event.offsetx
offsety = window.event.offsety
}
}
// block mousedown event from forcing mac to display
// contextual menu.
return false
}
// restore elements and globals to initial values
function release(evt) {
if (selectedobj) {
setzindex(selectedobj, 0)
selectedobj = null
}
}
// turn on event capture for navigator
function setnaveventcapture() {
if (isnav) {
document.captureevents(event.mousedown | event.mousemove | event.mouseup)
}
}
// assign event handlers used by both navigator and ie (called by onload)
function init() {
if (isnav) {
setnaveventcapture()
}
// assign functions to each of the events (works for both navigator and ie)
document.onmousedown = engage
document.onmousemove = dragit
document.onmouseup = release
}
</script>
<div id=plane1><img name="planepic1" src="clock1.jpg" tppabs="http://www.csdn.net/javascript/clock1.jpg" border=0>http://www.csdn.net/javascript/clock1.jpg</div>
<div id=plane2><img name="planepic1" src="clock2.jpg" tppabs="http://www.csdn.net/javascript/clock2.jpg" border=0>http://www.csdn.net/javascript/clock2.jpg</div>
第二步:把<body>区域中内容改为:
<body bgcolor="#fef4d9" onload="init()">
-------------- - ----------------- ---- --
拥有三人行论坛管理系列软件，一个人就可以管理一个论坛 的更新维护。还能使您的论坛有千人在线的真实火暴效果，让您不在为论坛因没有人气而留不住会员而烦恼，使您的论坛早日成为一流的论坛 。 详情请登陆网站：http://www.cnsrx.cn 三人行论坛管理软件，站长必备的 专业好 工具。（您使用的是免费版本，购买收费版本后，将不带广告。业务Q Q:2 47216 449 85227）
页:
[1]