3D图片快速旋转链接特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 3D图片快速旋转链接特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

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

<html>
<head>
<title>3D图片快速旋转链接</title>
    <link href="css/styleGalleryText.css" rel="stylesheet" type="text/css" />
    <script src="js/JStext.js" type="text/javascript"></script>
    
</head>
<body>

<div id="screen2" style="color:#000; width:100%; height:100%;"> 
    <div id="img2"> 	
	    <img src="banner/banner0.jpg" alt="" />
        <img src="banner/banner1.jpg" alt="" />
        <img src="banner/banner2.jpg" alt="" />
        <img src="banner/banner3.jpg" alt="" />
        <img src="banner/banner4.jpg" alt="" />
        <img src="banner/banner5.jpg" alt="" />
        <img src="banner/banner6.jpg" alt="" />
        <img src="banner/banner7.jpg" alt="" />

        <a href="#" title=""></a>
	    <a href="#" title=""></a>
	    <a href="#" title=""></a>
	    <a href="#" title=""></a>
	    <a href="#" title=""></a>
	    <a href="#" title=""></a>
	    <a href="#" title=""></a>
	    <a href="#" title=""></a>
    </div> 
    <div id="desc2" ></div>  
</div> 
</body>
</html>

JS代码(JStext.js):

var diapo = function (){
	function E(e){
	var t = e.changedTouches,n = t[0],r = "";
	w();
	onresize = w;
	switch (e.type){
	case "touchstart":r = "mousedown";
	break;
	case "touchmove":r = "mousemove";
	break;
	case "touchend":r = "mouseup";
	break;
	default:return}
var i = document.createEvent("MouseEvent");
	i.initMouseEvent(r,true,true,window,1,n.screenX,n.screenY,n.clientX,n.clientY,false,false,false,false,0,null);
	n.target.dispatchEvent(i);
	e.preventDefault()}
var e = new Array,t = Math.PI / 180,n = 0,r = .2,i = .25,s = .25,o = .99,u = .49,a = .2,f = 0,l = 0,c = 0,h = 0,p = 0,d = 0,v = 0,m = 0;
	var g = 2;
	var y = function (t,n,o,u){
	var a = m.getElementsByTagName("img")[t % m.getElementsByTagName("img").length];
	var f = m.getElementsByTagName("a")[t % m.getElementsByTagName("a").length];
	var l = document.createElement("img");
	var c = document.createElement("div");
	var h = document.createElement("a");
	c.onmouseout = function (){
	v = -1;
	e[t].on = false}
;
	c.onmousedown = new Function("return false");
	l.src = a.src;
	l.className = "icon-dimension";
	h.className = "link-circle-style";
	h.href = f.href;
	c.className = "content-big";
	h.appendChild(l);
	c.appendChild(h);
	scr.appendChild(c);
	this.obj = c.style;
	this.obj_img = l.style;
	this.obj_link = h.style;
	this.z = Math.round(u * ny * s);
	this.x = Math.round(n * ny * r);
	this.y = Math.round(o * ny * i);
	this.on = false;
	this.zOOm = 1;
	this.N = t}
;
	y.prototype.anim = function (){
	var e = this.z * Math.sin(c * t) + this.x * Math.cos(c * t);
	var n = this.z * Math.cos(c * t) - this.x * Math.sin(c * t);
	var r = this.y * Math.cos(h * t) - n * Math.sin(h * t);
	n = this.y * Math.sin(h * t) + n * Math.cos(h * t);
	var i = (n * o + ny * u) * this.zOOm;
	var s = i * a;
	if (this.on && n > 0){
	if (this.zOOm < g) this.zOOm += .05}
else{
	if (this.zOOm > 1) this.zOOm -= .025}
this.obj.left = Math.round(e + nx * .5 - i * .5) + "px";
	this.obj.top = Math.round(r + ny * .5 - s * .5) + "px";
	this.obj_img.width = Math.round(i) + "px";
	this.obj_img.height = Math.round(s) + "px";
	this.obj.zIndex = Math.round(500 + i)}
;
	var b = function (){
	dx = 1 * f - c;
	dy = 1 * l - h;
	c += dx / 60;
	h += dy / 60;
	var t = 0,n;
	while (n = e[t++]) n.anim();
	setTimeout(b,16)}
;
	var w = function (){
	nx = scr.offsetWidth;
	ny = scr.offsetHeight * .9}
;
	var S = function (){
	scr = document.getElementById("screen2");
	m = document.getElementById("img2");
	w();
	scr.onselectstart = new Function("return false");
	onresize = w;
	if (document.addEventListener){
	document.addEventListener("touchstart",E,true);
	document.addEventListener("touchmove",E,true);
	document.addEventListener("touchend",E,true);
	document.addEventListener("touchcancel",E,true)}
else if (document.attachEvent){
	document.attachEvent("touchstart",E);
	document.attachEvent("touchmove",E);
	document.attachEvent("touchend",E);
	document.attachEvent("touchcancel",E)}
scr.onmousemove = function (e){
	if (window.event) e = window.event;
	f = e.x || e.clientX;
	l = e.y || e.clientY}
;
	e.push(new y(0,1,-1,-1));
	e.push(new y(1,1,1,-1));
	e.push(new y(2,-1,-1,-1));
	e.push(new y(3,-1,1,-1));
	e.push(new y(4,1,-1,1));
	e.push(new y(5,1,1,1));
	e.push(new y(6,-1,-1,1));
	e.push(new y(7,-1,1,1));
	b()}
;
	return{
	init:S}
}
();
	onload = function (){
	diapo.init()}

CSS代码(styleGalleryText.css):

@import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');html{overflow:hidden;}
body{background:#efefed;width:100%;height:100%;margin:0;}
#screen{position:absolute;}
#img{visibility:hidden;}
.link-circle-style{text-decoration:none;font-family:'Open Sans Condensed',sans-serif;font-size:16px;color:#000;margin-left:30px;}
.link-circle-style-img{text-decoration:none;font-family:'Open Sans Condensed',sans-serif;font-size:16px;font-weight:bold;color:#000;margin-left:30px;}
.icon-dimension{width:24px;height:24px;margin-top:0px;}
.content-big{position:absolute;}
#screen img{position:absolute;z-index:100;-ms-interpolation-mode:nearest-neighbor;cursor:pointer;}
/******/
#screen2{position:absolute;}
#img2{visibility:hidden;}
#screen2 img{position:absolute;z-index:100;-ms-interpolation-mode:nearest-neighbor;cursor:pointer;}
/******/
#screen3{position:absolute;}
#img3{visibility:hidden;}
#screen3 img{position:absolute;z-index:100;-ms-interpolation-mode:nearest-neighbor;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)