阅读内容

JavaScript小技巧：图片镶嵌效果

[日期：2005-03-23]	来源：网络作者：寒竹	[字体：大中小]

第一步，将下面的代码加＜head＞与＜/head＞之间

＜SCRIPT＞
＜!-- Beginning of <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">JavaScript</a> -
var imgwidth=450 //图象宽度
var imgheight=300 //图象高度
var imgurl="images/wire.jpg" //你的图象
var marginright
var imgslices=20
var width_slice=Math.floor(imgwidth/imgslices)
var cliptop=0
var clipbottom=imgheight
var clipleft=0
var clipright=width_slice
var step=50
var pause=20
var spannummer=0
var spannrbefore=0
var x_finalpos=5
var y_finalpos=5
function initiate() {
 if (document.all) {
  moveslices_IE()
 }
}
function moveslices_IE() {
 var thisspan=eval("document.all.span"+spannummer+".style")
 if (thisspan.posLeft＞x_finalpos-width_slice) {
  thisspan.posLeft-=step
  var timer=setTimeout("moveslices_IE()",pause)
 }
 else if (spannummer＜imgslices-1) {
  clearTimeout(timer)
  thisspan.posLeft=x_finalpos
  spannummer++
  var timer=setTimeout("moveslices_IE()",pause)
 }
 else {
  thisspan.posLeft=x_finalpos
  clearTimeout(timer)
  var timer=setTimeout("showredir()",1000)
 }
}
function showredir() {
 document.all.redir.style.visibility="VISIBLE"
}
// - End of JavaScript - --＞
＜/SCRIPT＞

第二步：将下面的原代码加入＜body＞与＜/body＞之间

第二步：将下面红色部分加入＜body＞标志

＜body onload=initiate()＞

说明：
其文本框中的注解改成你自已的。
^o^ ^o^！

阅读：次
录入：blue1000

【推荐】【打印】

上一篇：主页制作动态技术
下一篇：JavaScript小技巧:图像褪色效果