[共享无限]54种网页特效代码(3)

2009年11月29日星期日 | | | 

29、在网页里随意拖动的图片
第一步:把如下代码加入<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 its 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="photo/dazui.gif" BORDER=0 alt="别烦我,忙着呢!"
width="100" height="100"></DIV>
<DIV ID=plane2><IMG NAME="planePic1" SRC="photo/dazui.gif" BORDER=0 alt="别烦我,忙着呢!"
width="100" height="100"></DIV>
  
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="init()">
  
 30、简单的水中倒影
把如下代码加入<body>区域中
<IMG height=189 id=reflect src="photo/119.gif"
width=237><BR>
<SCRIPT language=JavaScript1.2>
function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}
  
if (document.all){
document.write(<img id=mdiv src="+document.all.reflect.src+"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">)
window.onload=f1
}
</SCRIPT>
  

31、一个小图片把放大镜放在上面就可以看到一个放大后的图片
第一步:把如下代码加入<body>区域中
<STYLE type=text/css>#mglass {
LEFT: -2000px; POSITION: absolute; TOP: 50px
}
#thumb {
LEFT: -2000px; POSITION: absolute; TOP: 50px
}
#large {
LEFT: -2000px; POSITION: absolute; TOP: 50px
}
#framegif {
LEFT: -2000px; POSITION: absolute; TOP: 50px
}
.baseline {
COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: 9pt; LEFT:
50px; POSITION: absolute; TOP: 260px
}
</STYLE>
<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -
var isNav, isIE
var offsetX, offsetY
var selectedObj
  
var enlargefactor=5
  
var largewidth = 455
var largeheight = 523
var largeleft = 250
var largetop = 30
  
var thumbwidth = Math.floor(largewidth/enlargefactor)
var thumbheight = Math.floor(largeheight/enlargefactor)
var thumbleft = 50
var thumbtop = 30
  
var mglasswidth = 32
var mglassheight = 32
var mglassleft = 120
var mglasstop = 110
  
var difleft= largeleft-thumbleft
var diftop= largetop-thumbtop
  
var clippoints
  
var cliptop = (thumbheight-mglassheight)*enlargefactor
var clipbottom = cliptop+(mglassheight*enlargefactor)
var clipleft =(thumbwidth-mglasswidth)*enlargefactor
var clipright = clipleft+(mglasswidth*enlargefactor)
  

if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
  
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
  
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
} else {
obj.pixelLeft = x
obj.pixelTop = y
}
cliptop = (y-thumbtop)*enlargefactor
clipbottom = cliptop+(mglassheight*enlargefactor)
clipleft = (x-thumbleft)*enlargefactor
clipright = clipleft+(mglasswidth*enlargefactor)
  

if (document.all) {
clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.all.large.style.posTop=largetop-cliptop
document.all.large.style.posLeft=largeleft-clipleft
document.all.large.style.clip=clippoints
}
if (document.layers) {
document.large.top=largetop-cliptop
document.large.left=largeleft-clipleft
document.large.clip.left = clipleft
document.large.clip.right = clipright
document.large.clip.top = cliptop
document.large.clip.bottom = clipbottom
}
}
  
function setSelectedElem(evt) {
if (isNav) {
var testObj
var clickX = evt.pageX
var clickY = evt.pageY
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)) {
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
} else {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("mglass") != -1) {
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
selectedObj = null
return
}
  
function dragIt(evt) {
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
} else {
shiftTo(selectedObj, (window.event.clientX - offsetX),
(window.event.clientY - offsetY))
return false
}
}
}
  
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
return false
}
  
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}
  
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
  
function init() {
  
if (document.layers) {
document.large.left=largeleft
document.large.top=largetop
  
document.framegif.left=largeleft-3
document.framegif.top=largetop-3
  
document.thumb.left=thumbleft
document.thumb.top=thumbtop
  
document.mglass.left=mglassleft
document.mglass.top=mglasstop
  
document.large.clip.left = 0
document.large.clip.right = 0
document.large.clip.top = 0
document.large.clip.bottom = 0
  
setNavEventCapture()
}
  
if (document.all) {
document.all.large.style.posLeft=largeleft
document.all.large.style.posTop=largetop
  
document.all.framegif.style.posLeft=largeleft-3
document.all.framegif.style.posTop=largetop-3
  
document.all.thumb.style.posLeft=thumbleft
document.all.thumb.style.posTop=thumbtop
  
document.all.mglass.style.posLeft=mglassleft
document.all.mglass.style.posTop=mglasstop
document.all.large.style.clip="rect(0 0 0 0)"
}
  
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
// - End of JavaScript - -->
</SCRIPT>
<span id=thumb><IMG name=thumbpic src="photo/portrait2311.jpg" width=91>
</span>
<span id=framegif><IMG height=166 name=framepic src="photo/frame2311.gif"
width=166> </span>
<span id=large><IMG name=largepic src="photo/portrait2311.jpg" width=455>
</span>
<span id=mglass><IMG height=50 name=mglasspic src="photo/mglass.gif"
width=50> </span>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onload=init()>
  
32、图片随意在网页上飘动
把如下代码加入<body>区域中
<div id="img" style="position:absolute;">
<img src="photo/gq.gif" onClick="pause_resume();">
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- 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(changePos(), delay);
}
function pause_resume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval(changePos(),delay);
pause = true;
}
}
start();
// End -->
</script>
  

33、下拉框显示时间
把如下代码加入<body>区域中
<script language="javascript">
function nowtime()
{
var da,ny,nm,nd;
da = new Date();
ny = da.getYear();
nm = da.getMonth();
nd = da.getDate();
document.form1.year2.value = ny;
document.form1.month2.value = nm+1;
document.form1.day2.value = nd;
}
</script>
<form name="form1" method="post" action="#">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  
<tr>
<td height="30">
<select name="year2" >
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
年
<select name="month2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
月
<select name="day2">
<option value="1">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" >16</option>
<option value="17" >17</option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
<option value="28" >28</option>
<option value="29" >29</option>
<option value="30" >30</option>
<option value="31" >31</option>
</select>
日
<script language="Javascript">
if (this.form1.month2!="")
{nowtime()}
</script>
　　　　　　　 </td>
</tr>
  
</table>
</form>
 
我的QQ空间
kmeleon.js及pref.js配置解释
K-MeleonCCF ME目录下的defaults\pref\kmeleon.js保存了K-Meleon...
 

0 评论:

发表评论

订阅： 博文评论 (Atom)

所有文章收集于网络，如果有牵扯到版权问题请与本站站长联系。谢谢合作！[email protected]

 
Glossy Blue by N.Design Studio
Blogger Templates by Blogcrowds | Glossy Blue Blogger Template