📄 图片镶嵌效果.txt
字号:
图片镶嵌效果
第一步：拷贝下面的代码到你的html文件的<head>和</head>之间；
<SCRIPT>
<!-- Beginning of JavaScript -
var imgwidth=450 //图象宽度
var imgheight=300 //图象高度
var imgurl="lslogo.gif" //你的图象
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>
第二步：拷贝下面的代码到你的html文件的<body>和</body>之间；
<body onload=initiate()>
<SCRIPT>
<!-- Beginning of JavaScript -
for (i=0;i<=imgslices-1;i++) {
marginright=screen.width+50
document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
document.write("<img src='"+imgurl+"'>")
document.write("</span>")
clipleft+=width_slice
clipright+=width_slice
}
// - End of JavaScript - -->
</SCRIPT>
<DIV id=redir
style="LEFT: 10px; POSITION: absolute; TOP: 320px; VISIBILITY: hidden">
<p><font color="#006600"><b>欢迎光临《网页设计园》^o^</b></font></p>
</DIV>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -