【荐】一个漂亮的JavaScript图片特效代码

最新推荐文章于 2024-07-27 23:01:21 发布

weixin_33774883

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量168

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webdm/archive/2011/08/16/2140099.html

版权

代码简介：

一个老外完成的JS图片特效，运用了特殊算法，将多幅图片组合在一起，使浏览器变得智能起来，当移上某个图片的时候，图片会慢慢放大一些并靠近你，如果点击的话，会快速放大到你的眼前，其它的远去或变暗。可能算法原因，运行后CPU占用很历害，电脑有点慢。

代码内容：

View Code

<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN " " http://www.w3.org/TR/html4/strict.dtd " >
<html>
<head>
<title>【荐】一个漂亮的JavaScript图片特效代码_网页代码站(www.webdm.cn)</title>
<style type= " text/css " >
    html {
         overflow: hidden ;
    }
    body {
         position: absolute ;
         margin: 0px ;
         padding: 0px ;
         background: # 111 ;
         width: 100 % ;
         height: 100 % ;
    }
    #screen {
         position: absolute ;
         left: 10 % ;
         top: 10 % ;
         width: 80 % ;
         height: 80 % ;
         background: # 000 ;
    }
    #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 // http: //www.codefans.net
    },

    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.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>
<body>
< div id= " screen " ></ div >
< div id= " bankImages " >

<img alt= "" src= " http://www.webdm.cn/images/wall1.jpg " >
<img alt= "" src= " http://www.webdm.cn/images/wall2.jpg " >
</ div >
<script type= " text/javascript " >
    onresize = tv.resize ;
    tv.init() ;
</script>
</body>
</html>
<br />
<p><a href= " http://www.webdm.cn " >网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自： http: //www.webdm.cn/webcode/7158a22d-fff7- 4515 -b593-de8dce4f9e54.html

转载于:https://www.cnblogs.com/webdm/archive/2011/08/16/2140099.html

weixin_33774883

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【荐】一个漂亮的JavaScript图片特效代码

代码简介：一个老外完成的JS图片特效，运用了特殊算法，将多幅图片组合在一起，使浏览器变得智能起来，当移上某个图片的时候，图片会慢慢放大一些并靠近你，如果点击的话，会快速放大到你的眼前，其它的远去或变暗。可能算法原因，运行后CPU占用很历害，电脑有点慢。代码内容：View Code <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//...
复制链接

扫一扫