从网上找了一个显示特效图片的脚本,想在点击不同的图片时打开不同超链接,请问该怎么实现

ahking 2011-09-07 10:14:47



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>

<head>

<title></title>

<style type="text/css">

	html {

		overflow: hidden;

	}

	body {

		position: absolute;

		margin: 0px;

		padding: 0px;

		background: #fff;

		width: 100%;

		height: 100%;

	}

	#screen {

		position: absolute;

		left: 10%;

		top: 10%;

		width: 90%;

		height: 90%;

		background: #fff;

	}

	#screen img {

		position: absolute;

		cursor: pointer;

		visibility: hidden;

		width: 0px;

		height: 0px;

	}

	#screen .tvover {

		border: solid #876;

		opacity: 1;

		filter: alpha(opacity=100);

	}

	#screen .tvout {

		border: solid #fff;

		opacity: 0.7;

	}

	#bankImages {

		display: none;

	}

</style>



<script type="text/javascript">

    var Library = {};

    Library.ease = function () {

        this.target = 0;

        this.position = 0;

        this.move = function (target, speed) {

            this.position += (target - this.position) * speed;

        }

    }



    var tv = {

        O: [],

        screen: {},

        grid: {

            size: 4,

            borderSize: 6,

            zoomed: false

        },

        angle: {

            x: new Library.ease(),

            y: new Library.ease()

        },

        camera: {

            x: new Library.ease(),

            y: new Library.ease(),

            zoom: new Library.ease(),

            focalLength: 750

        },



        init: function () {

            this.screen.obj = document.getElementById('screen');

            var img = document.getElementById('bankImages').getElementsByTagName('img');

            this.screen.obj.onselectstart = function () { return false; }

            this.screen.obj.ondrag = function () { return false; }

            var ni = 0;

            var n = (tv.grid.size / 2) - .5;

            for (var y = -n; y <= n; y++) {

                for (var x = -n; x <= n; x++) {

                    var o = document.createElement('img');

                    var i = img[(ni++) % img.length];

                    o.className = 'tvout';

                    o.src = i.src;

                    tv.screen.obj.appendChild(o);

                    o.point3D = {

                        x: x,

                        y: y,

                        z: new Library.ease()

                    };

                    o.point2D = {};

                    o.ratioImage = 1;

                    tv.O.push(o);

                    o.onmouseover = function () {

                        if (!tv.grid.zoomed) {

                            if (tv.o) {

                                tv.o.point3D.z.target = 0;

                                tv.o.className = 'tvout';

                            }

                            this.className = 'tvover';

                            this.point3D.z.target = -.5;

                            tv.o = this;

                        }

                    }

                    o.onclick = function () {

                        if (!tv.grid.zoomed) {

                            tv.camera.x.target = this.point3D.x;

                            tv.camera.y.target = this.point3D.y;

                            tv.camera.zoom.target = tv.screen.w * 1.25;

                            tv.grid.zoomed = this;

                        } else {

                            if (this == tv.grid.zoomed) {

                                tv.camera.x.target = 0;

                                tv.camera.y.target = 0;

                                tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);

                                tv.grid.zoomed = false;

                            }

                        }

                        o.src = i.src

                        //alert(o.src);

                        //var picID = o.src.substring(0, o.src.lastIndexOf("."));

                        var lastPipe = o.src.lastIndexOf('/');

                        var lastPeriod = o.src.lastIndexOf('.');

                        var picID;

                        

                        if (lastPipe < lastPeriod)

                            picID = o.src.substring(lastPipe + 1, lastPeriod);

                        else

                            picID = '';

                        //alert(picID);

                        //window.location.href = 'mypage.aspx?id=' + picID;

                    }

                    o.calc = function () {

                        this.point3D.z.move(this.point3D.z.target, .5);

                        var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;

                        var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;

                        var z = this.point3D.z.position * tv.camera.zoom.position;

                        var xy = tv.angle.cx * y - tv.angle.sx * z;

                        var xz = tv.angle.sx * y + tv.angle.cx * z;

                        var yz = tv.angle.cy * xz - tv.angle.sy * x;

                        var yx = tv.angle.sy * xz + tv.angle.cy * x;

                        this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);

                        this.point2D.x = yx * this.point2D.scale;

                        this.point2D.y = xy * this.point2D.scale;

                        this.point2D.w = Math.round(

					                   Math.max(

					                     0,

					                     this.point2D.scale * tv.camera.zoom.position * .8

					                   )

					                 );

                        if (this.ratioImage > 1)

                            this.point2D.h = Math.round(this.point2D.w / this.ratioImage);

                        else {

                            this.point2D.h = this.point2D.w;

                            this.point2D.w = Math.round(this.point2D.h * this.ratioImage);

                        }

                    }

                    o.draw = function () {

                        if (this.complete) {

                            if (!this.loaded) {

                                if (!this.img) {

                                    this.img = new Image();

                                    this.img.src = this.src;

                                }

                                if (this.img.complete) {

                                    this.style.visibility = 'visible';

                                    this.ratioImage = this.img.width / this.img.height;

                                    this.loaded = true;

                                    this.img = false;

                                }

                            }

                            this.style.left = Math.round(

						                    this.point2D.x * this.point2D.scale +

						                    tv.screen.w - this.point2D.w * .5

						                  ) + 'px';

                            this.style.top = Math.round(

						                    this.point2D.y * this.point2D.scale +

						                    tv.screen.h - this.point2D.h * .5

						                  ) + 'px';

                            this.style.width = this.point2D.w + 'px';

                            this.style.height = this.point2D.h + 'px';

                            this.style.borderWidth = Math.round(

						                           Math.max(

						                             this.point2D.w,

						                             this.point2D.h

						                           ) * tv.grid.borderSize * .01

						                         ) + 'px';

                            this.style.zIndex = Math.floor(this.point2D.scale * 100);

                        }

                    }

                }

            }

            tv.resize();

            mouse.y = tv.screen.y + tv.screen.h;

            mouse.x = tv.screen.x + tv.screen.w;

            tv.run();

        },

        resize: function () {

            var o = tv.screen.obj;

            tv.screen.w = o.offsetWidth / 2;

            tv.screen.h = o.offsetHeight / 2;

            tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);

            for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {

                tv.screen.x += o.offsetLeft;

                tv.screen.y += o.offsetTop;

            }

        },



        run: function () {

            tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);

            tv.angle.y.move((mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);

            tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);

            tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);

            tv.camera.zoom.move(tv.camera.zoom.target, .05);

            tv.angle.cx = Math.cos(tv.angle.x.position);

            tv.angle.sx = Math.sin(tv.angle.x.position);

            tv.angle.cy = Math.cos(tv.angle.y.position);

            tv.angle.sy = Math.sin(tv.angle.y.position);

            for (var i = 0, o; o = tv.O[i]; i++) {

                o.calc();

                o.draw();

            }

            setTimeout(tv.run, 32);

        }

    }



    var mouse = {

        x: 0,

        y: 0

    }

    document.onmousemove = function (e) {

        if (window.event) e = window.event;

        mouse.x = e.clientX;

        mouse.y = e.clientY;

        return false;

    }



</script>

</head>

...全文

168 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

BLUE_LG 2011-09-07

打赏
举报



<img src="a.jpg" name="http://www.baidu.com" />

   </div>

<script>

var pics=document.getElementsByTagName("img");

   for(var i=0;i<pics.length;i++){

      pics[i].onclick=function(){

	     window.open(this.name);

	  }

   }

</script>

这种方法也行。。。

BLUE_LG 2011-09-07

打赏
举报

一定要脚本？？？
<a href=""><img src=""></a>

ahking 2011-09-07

打赏
举报

<body>
<div id="screen"></div>
<div id="bankImages">

<img alt="" src="Photos\Modify\64.jpg" />
<img alt="" src="Photos\Modify\65.jpg" />
<img alt="" src="Photos\Modify\66.jpg" />
<img alt="" src="Photos\Modify\67.jpg" />
<img alt="" src="Photos\Modify\68.jpg" />
<img alt="" src="Photos\Modify\69.jpg" />
<img alt="" src="Photos\Modify\70.jpg" />
<img alt="" src="Photos\Modify\71.jpg" />
<img alt="" src="Photos\Modify\72.jpg" />
<img alt="" src="Photos\Modify\73.jpg" />
<img alt="" src="Photos\Modify\74.jpg" />
<img alt="" src="Photos\Modify\76.jpg" />
<img alt="" src="Photos\Modify\77.jpg" />
<img alt="" src="Photos\Modify\80.jpg" />
<img alt="" src="Photos\Modify\82.jpg" />
<img alt="" src="Photos\Modify\83.jpg" />

</div>
<script type="text/javascript">
onresize = tv.resize;
tv.init();
</script>

</body>
</html>

下面这段代码是我加入的，在o.onclick = function ()中；但是获取的图片名总是最后一张图片的，不知是怎么回事
o.src = i.src
//alert(o.src);
//var picID = o.src.substring(0, o.src.lastIndexOf("."));
var lastPipe = o.src.lastIndexOf('/');
var lastPeriod = o.src.lastIndexOf('.');
var picID;

if (lastPipe < lastPeriod)
picID = o.src.substring(lastPipe + 1, lastPeriod);
else
picID = '';
//alert(picID);
//window.location.href = 'mypage.aspx?id=' + picID;

ahking 2011-09-07

打赏
举报

up??????????????????????????

ahking 2011-09-07

打赏
举报

[Quote=引用 3 楼 blue_lg 的回复:]

HTML code

<img src="a.jpg" name="http://www.baidu.com" />
</div>
<script>
var pics=document.getElementsByTagName("img");
for(var i=0;i<pics.length;i++){
pics[i].onclick=function(){
……
[/Quote]

这个试了也不行,好像onclick事件并没有生效

ahking 2011-09-07