DHTML打造PictureSpelling
添加时间: 2005-6-9 4:59:27 作者: 网络收集 阅读次数:69 来源: http://d9soft.com
不用切图，只要设置基本的 图片及其属性即可！
用鼠标右键控制图片翻转！
<style>
*{
FONT-SIZE: 12px;
}
select {
width: 100px; BACKGROUND-COLOR: #eeeeee;
}
div {
padding: 2px;
}
</style>
<script language="JavaScript1.2">
/*
This following code are designed and writen by Windy_sk <seasonx@163.net>
You can use it freely, but u must held all the copyright items!
*/
var ie = (document.getElementById && document.all);
var ns = (document.getElementById && !document.all);
function GetRndNum(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
function PicItem(pic, width, height) {
this.img = new Image();
this.pic = pic;
this.width = width;
this.height = height;
}
var Pic_list = new Array();
var n=0, Pic_cur=0, Clips=3;
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0001.jpg", 430, 261);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0002.jpg", 430, 331);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0003.jpg", 430, 378);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0004.jpg", 430, 514);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0005.jpg", 430, 255);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0006.jpg", 430, 450);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0007.jpg", 430, 386);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0008.jpg", 430, 386);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0009.jpg", 430, 441);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0010.jpg", 430, 472);
var Pic_clip_all = new Array();
var Pic_clip = document.createElement("div");
var Layer_cur = null;
var pX = 0 ; pY = 0; Zidx = 1;
Pic_clip.innerHTML = "<img src='' border='0' style='top:0px;left:0px;position:relative' />";
Pic_clip.style.cssText = "background-color:white; cursor:pointer; position:absolute; overflow: hidden; padding:0px; border:1px black solid; zIndex:" + Zidx;
var the_width=100, the_height=100, Clip_num=0;
var Flip_list = ["FlipV", "FlipV FlipH", "FlipH", "",];
var Zwidth = screen.width * 0.8, Zheight = screen.height * 0.8 , Zrate=0;
function ChangeMode(idx) {
for(var i=0; i<Pic_clip_all.length; i++) {
for(var j=0; j<Pic_clip_all[i].length; j++) {
Pic_clip_all[i][j].parentNode.removeChild(Pic_clip_all[i][j]);
}
}
var if_zoom = document.getElementById("zoom").checked;
if(if_zoom) {
the_width = Math.floor(Zwidth *(Zrate>1?1:Zrate)/idx);
the_height = Math.floor(Zheight/(Zrate>1?Zrate:1)/idx);
} else {
the_width = Math.floor(Pic_list[Pic_cur].width/idx);
the_height = Math.floor(Pic_list[Pic_cur].height/idx);
}
Pic_clip_all = new Array(idx);
Clip_num = Math.pow(idx, 2);
for(i=0; i<idx; i++) {
Pic_clip_all[i] = new Array(idx);
for(j=0; j<idx; j++) {
Pic_clip_all[i][j] = Pic_clip.cloneNode(true);
with(Pic_clip_all[i][j].style) {
width = the_width;
height = the_height;
top = GetRndNum(100, 400);
left = GetRndNum(100, 600);
}
with(Pic_clip_all[i][j]) {
if(if_zoom) {
firstChild.width = Math.floor(Zwidth *(Zrate>1?1:Zrate));
firstChild.height = Math.floor(Zheight/(Zrate>1?Zrate:1));
}
id = "clip_" + i + "_" + j;
if(ie) {
onmousedown = new Function("if(this.snap=='yes')return; this.style.zIndex=Zidx++; Layer_cur=this; pX=event.clientX-this.offsetLeft; pY=event.clientY-this.offsetTop;");
oncontextmenu = new Function("event.returnValue=false; if(this.snap=='yes')return; var flip_idx=(parseInt(this.flip_idx)+1)%4; this.style.filter=Flip_list[flip_idx]; this.flip_idx=flip_idx;");
DHTML打造PictureSpelling(1) 第 [1] [2] [3] [4] 下一页
上一篇文章: 事件触发列表与解说 下一篇文章: 鼠标实现图片的渐有渐无
相关文章: