js 3D切换

最新推荐文章于 2024-01-22 18:51:06 发布

larance

最新推荐文章于 2024-01-22 18:51:06 发布

阅读量955

点赞数

分类专栏： JS && CSS

JS && CSS 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

转引自：http://golf.sina.com.cn/masters/

http://sports.sina.com.cn/js/1209/2013/0330/scroll3D.js

 <script type="text/javascript" src="http://sports.sina.com.cn/js/1209/2013/0330/scroll3D.js"></script>
   <!-- publish_helper name='高清图集' p_id='6' t_id='1219' d_id='9' f_id='36449' --> 
 <!--图片按从左到右显示，第三帧为默认显示的大图-->
<div class="blk_07">
    <div class="bc">
    <div id="scrollBox">

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44372.html/d/2"><img src="http://i0.sinaimg.cn/ty/2013/0410/U364P6DT20130410095527.jpg" border=0 alt="关天朗与沃森练球"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44372.html/d/2" target="_blank">关天朗与沃森练球</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44462.html/d/2"><img src="http://i2.sinaimg.cn/ty/golf/shanghai/754_953704_838961.jpg" border=0 alt="大师赛首轮花絮"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44462.html/d/2" target="_blank">大师赛首轮花絮</a></div>
           </div>

                       <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44461.html/d/2#p=1"><img src="http://i2.sinaimg.cn/ty/golf/shanghai/754_953686_394918.jpg" border=0 alt="首轮领先加西亚特写"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44461.html/d/2#p=1" target="_blank">首轮领先加西亚特写</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44458.html/d/2"><img src="http://i1.sinaimg.cn/ty/golf/shanghai/754_953635_499207.jpg" border=0 alt="关天朗首轮表现"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44458.html/d/2" target="_blank">关天朗首轮表现</a></div>
           </div>

              <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44457.html/d/2"><img src="http://i0.sinaimg.cn/ty/golf/shanghai/754_953631_337683.jpg" border=0 alt="伍兹女友现身奥古斯塔"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44457.html/d/2" target="_blank">伍兹女友现身奥古斯塔</a></div>
           </div>

             <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44456.html/d/2"><img src="http://i3.sinaimg.cn/ty/1219/2013/0407/U6605P6T1219D9F36511DT20130412092547.jpg" border=0 alt="大师赛首轮群星闪耀"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44456.html/d/2" target="_blank">大师赛首轮群星闪耀</a></div>
           </div>

             <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44455.html/d/2"><img src="http://i1.sinaimg.cn/ty/1219/2013/0407/U6605P6T1219D9F36508DT20130412092547.jpg" border=0 alt="伍兹首轮表现"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44455.html/d/2" target="_blank">伍兹首轮表现</a></div>
           </div>

             <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44450.html/d/2#p=1"><img src="http://i2.sinaimg.cn/ty/1219/2013/0407/U6605P6T1219D9F36505DT20130412092547.jpg" border=0 alt="三巨头开球"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44450.html/d/2#p=1" target="_blank">三巨头开球</a></div>
           </div>

           <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44418.html/d/33"><img src="http://i1.sinaimg.cn/ty/1219/2013/0407/U364P6T1219D9F36502DT20130411175513.jpg" border=0 alt="夫妻档"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44418.html/d/33" target="_blank">夫妻档</a></div>
           </div> 

           <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44424.html#p=1"><img src="http://i2.sinaimg.cn/ty/1219/2013/0407/U6605P6T1219D9F36488DT20130411095426.jpg" border=0 alt="三杆比洞赛趣味瞬间"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44424.html#p=1" target="_blank">三杆比洞赛趣味瞬间</a></div>
           </div> 

           <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44415.html#p=2"><img src="http://i0.sinaimg.cn/ty/1219/2013/0407/U6605P6T1219D9F36485DT20130411094239.jpg" border=0 alt="沃兹为男友小麦背包"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44415.html#p=2" target="_blank">沃兹为男友小麦背包</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44411.html"><img src="http://i1.sinaimg.cn/ty/1219/2013/0407/U6605P6T1219D9F36482DT20130411094239.jpg" border=0 alt="">周三练习日 伍兹等备战</a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44411.html" target="_blank">周三练习日 伍兹等备战</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44414.html#p=1"><img src="http://i2.sinaimg.cn/ty/1219/2013/0407/U6605P6T1219D9F36474DT20130411094239.jpg" border=0 alt="关天朗参加大师赛前三杆比洞赛"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44414.html#p=1" target="_blank">关天朗参加大师赛前三杆比洞赛</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44399.html/d/2#p=3"><img src="http://i0.sinaimg.cn/ty/1219/2013/0407/U364P6T1219D9F36468DT20130410190436.jpg" border=0 alt="新浪前方报道"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44399.html/d/2#p=3" target="_blank">新浪前方报道</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44392.html/d/2#p=9"><img src="http://i0.sinaimg.cn/ty/1219/2013/0407/U364P6T1219D9F36471DT20130410190456.jpg" border=0 alt="奥古斯塔旧风尚"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44392.html/d/2#p=9" target="_blank">奥古斯塔旧风尚</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44373.html/d/2#p=9"><img src="http://i0.sinaimg.cn/ty/2013/0410/U364P6DT20130410095002.jpg" border=0 alt="伍兹周二下场热身"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44373.html/d/2#p=9" target="_blank">伍兹周二下场热身</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_44371.html/d/2"><img src="http://i3.sinaimg.cn/ty/2013/0410/U364P6DT20130410095526.jpg" border=0 alt="旗帜飘"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_44371.html/d/2" target="_blank">旗帜飘扬</a></div>
           </div>

           <div class="piclist"> 
              <a target="_blank" href="http://sports.sina.com.cn/golf/2009masters/photo/75343/"><img src="http://i1.sinaimg.cn/ty/2013/0401/U2010P6DT20130401002652_1.jpg" border=0 alt="2009年 卡布雷拉首获大师赛冠军"></a>
              <div class="title"><a href="http://sports.sina.com.cn/golf/2009masters/photo/75343/" target="_blank">2009年 卡布雷拉首获大师赛冠军</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://golf.sina.com.cn/2008masters/photo/58785/index.shtml"><img src="http://i3.sinaimg.cn/ty/2013/0401/U2010P6DT20130401002649.jpg" border=0 alt="2008年 扎克-约翰逊为伊梅尔曼披上绿茄克"></a>
              <div class="title"><a href="http://golf.sina.com.cn/2008masters/photo/58785/index.shtml" target="_blank">2008年 扎克-约翰逊为伊梅尔曼披上绿茄克</a></div>
           </div>

          <div class="piclist"> 
              <a target="_blank" href="http://slide.sports.sina.com.cn/golf/slide_2_754_10247.html#p=1"><img src="http://i0.sinaimg.cn/ty/2013/0401/U2010P6DT20130401002651.jpg" border=0 alt="2011年 米克尔森为舒瓦泽尔披上绿茄克"></a>
              <div class="title"><a href="http://slide.sports.sina.com.cn/golf/slide_2_754_10247.html#p=1" target="_blank">2011年 米克尔森为舒瓦泽尔披上绿茄克</a></div>
           </div>

            <div class="piclist"> 
              <a target="_blank" href="http://sports.sina.com.cn/golf/2010masters/photo/90567/"><img src="http://i1.sinaimg.cn/ty/2013/0401/U2010P6DT20130401002652.jpg" border=0 alt="2010年 卡布雷拉为米克尔森披上绿茄克"></a>
              <div class="title"><a href="http://sports.sina.com.cn/golf/2010masters/photo/90567/" target="_blank">2010年 卡布雷拉为米克尔森披上绿茄克</a></div>
           </div>

         </div>
    </div>
     <a href="#;" οnclick="scrollPic.pre()" class="arrleft" οnfοcus="this.blur()">上一个</a> 
     <a href="#;" οnclick="scrollPic.next()" class="arrright" οnfοcus="this.blur()">下一个</a>
    </div>
<!-- publish_helper_end -->
   <script type="text/javascript">
    var scrollPic = new scrollPic3D();
    scrollPic.boxId = 'scrollBox'; //容器id
    scrollPic.width = 913; //容器宽度
    scrollPic.height = 365; //容器高度
    scrollPic.imgWidth = 573; //图片宽度
    scrollPic.imgHeight = 300; //图片高度
    scrollPic.descHeight = 0; //描述宽度
    scrollPic.showsNumber = 5; //显示数量
    scrollPic.autoPlay = false; //是否自动播放
    scrollPic.autoPlayTime = 5;
    scrollPic.zoom = 0.6; //小图缩放比
    scrollPic.timeLimit = 500;
    scrollPic.init();
   </script>

// [6,1209,7] published at 2013-03-30 09:25:29

(function() {
    var sina = {
        $: function(objName) {
            if (document.getElementById) {
                return eval('document.getElementById("' + objName + '")')
            } else {
                return eval("document.all." + objName)
            }
        },
        addEvent: function(obj, eventType, func) {
            if (obj.attachEvent) {
                obj.attachEvent("on" + eventType, func)
            } else {
                obj.addEventListener(eventType, func, false)
            }
        },
        delEvent: function(obj, eventType, func) {
            if (obj.detachEvent) {
                obj.detachEvent("on" + eventType, func)
            } else {
                obj.removeEventListener(eventType, func, false)
            }
        },
        next: function(el) {
            var next = el.nextSibling;
            while (next && next.nodeType != 1) {
                next = next.nextSibling
            }
            return next
        },
        extend: function(o, t) {
            for (var p in t) {
                o[p] = t[p]
            }
            return o
        },
        css: function(o, s) {
            var t = o.style;
            for (var p in s) {
                t[p] = s[p]
            }
            return o
        },
        getCurrIndex: function(len, curr) {
            if (curr >= len) {
                curr -= len
            }
            if (curr < 0) {
                curr += len
            }
            return curr
        },
        getArrEl: function(arr, curr) {
            return arr[this.getCurrIndex(arr.length, curr)]
        },
        supportTransition: (function() {
            return window.navigator.userAgent.toLowerCase().indexOf("webkit") >= 0
        })(),
        transition: function(elem, to, time) {
            setTimeout(function() {
                sina.css(elem, {
                    display: "",
                    WebkitTransform: "translate3d(0,0,0)",
                    WebkitTransitionDuration: time
                });
                sina.css(elem, to);
                sina.css(elem.imgObj, {
                    WebkitTransform: "translate3d(0,0,0)",
                    WebkitTransitionDuration: time
                });
                sina.css(elem.imgObj, to.imgObj)
            },
            0)
        }
    };
    var d = document,
    w = this,
    b = d.body,
    h = d.documentElement;
    var scrollPic3D = function() {};
    scrollPic3D.prototype = {
        boxId: "",
        width: 500,
        height: 100,
        imgWidth: 90,
        imgHeight: 120,
        descHeight: 100,
        descClass: "picdesc",
        showsNumber: 7,
        zoom: 0.8,
        data: [],
        position: [],
        timeLimit: 200,
        leftIndex: 0,
        autoPlay: false,
        autoPlayTime: 5,
        version: "1.0",
        author: "mengjia",
        init: function() {
            this.initData();
            if (this.data.length < this.showsNumber) {
                alert("\u9519\u8bef\uff1a\u6eda\u52a8\u56fe\u7247\u6570\u636e\u5c0f\u4e8e\u663e\u793a\u6570\u636e");
                return
            }
            if (this.showsNumber % 2 == 0) {
                this.showsNumber++
            }
            var boxEl = sina.$(this.boxId);
            boxEl.style.width = this.width + "px";
            boxEl.style.height = this.height + "px";
            boxEl.style.position = "relative";
            boxEl.style.overflow = "hidden";
            boxEl.style.zoom = 1;
            this.setLeftIndex(0);
            this.showDesc(this.index);
            this.ifDestory()
        },
        ifDestory: function() {
            var thisObj = this;
            sina.addEvent(w, "unload", 
            function() {
                delete thisObj.data
            })
        },
        initData: function() {
            var boxEl = sina.$(this.boxId);
            var descEl = d.createElement("div");
            descEl.id = this.descId = "descEL-" + ( + new Date());
            descEl.className = "imgDesc_";
            descEl.style.position = "absolute";
            descEl.style.height = this.descHeight + "px";
            descEl.style.bottom = 0;
            descEl.style.width = "100%";
            boxEl.appendChild(descEl);
            var objs = boxEl.childNodes,
            obj,
            imgObj;
            var imgObjs = boxEl.getElementsByTagName("img"),
            imgObj,
            tempThis = this;
            for (var i = 0, j = 0, len = objs.length; i < len; i++) {
                obj = objs[i];
                if (obj.tagName != "DIV") {
                    continue
                }
                obj.style.position = "absolute";
                imgObj = obj.getElementsByTagName("img")[0];
                if (!imgObj) {
                    continue
                }
                obj.imgObj = imgObj;
                imgObj.num = obj.num = j++;
                imgObj.style.width = "100%";
                imgObj.style.height = "100%";
                var next = this._getDescEl(obj);
                if (!next) {
                    next = d.createElement("div")
                }
                next.style.display = "none";
                descEl.appendChild(next);
                this.data.push(obj)
            }
        },
        pre: function() {
            this.go(this.index - 1)
        },
        next: function() {
            this.go(this.index + 1)
        },
        autoPlayFunc: function() {
            if (this.autoPlay) {
                clearInterval(this._autoPlay);
                var tempThis = this;
                this._autoPlay = setInterval(function() {
                    tempThis.next()
                },
                this.autoPlayTime * 1000)
            }
        },
        transNext: function(clockwise, time) {
            var datas = this.data,
            leftIndex = this.leftIndex,
            posArr = this.position,
            len = this.showsNumber,
            pos,
            elem,
            el = sina.getArrEl(datas, clockwise ? leftIndex + len: leftIndex - 1),
            s = sina.getArrEl(posArr, clockwise ? posArr.length - 1: 0);
            sina.transition(el, s, "0s");
            for (var i = 0; i <= len; i++) {
                elem = sina.getArrEl(datas, clockwise ? i + leftIndex: i - 1 + leftIndex);
                pos = sina.getArrEl(posArr, clockwise ? i: i + 1);
                sina.transition(elem, pos, time + "ms")
            }
            this.leftIndex = sina.getCurrIndex(datas.length, clockwise ? leftIndex + 1: leftIndex - 1);
            this.index = sina.getCurrIndex(datas.length, this.leftIndex + Math.floor(len / 2))
        },
        go: function(index) {
            if (this.index == index) {
                return
            }
            var start = this.index,
            end = index,
            len = this.data.length;
            clearTimeout(this._timeout);
            if (Math.abs(end - start) > len / 2) {
                if (end > len / 2) {
                    end = end - len
                } else {
                    end = end + len
                }
            }
            this[sina.supportTransition ? "_css3Animate": "_jsAnimate"](end)
        },
        _css3Animate: function(end) {
            var obj = this,
            start = this.index,
            length = Math.abs(end - start),
            stepTime = this.timeLimit / length;
            this._timeout = setTimeout(function() {
                if (!length--) {
                    if (obj.onend) {
                        obj.onend(start, obj.index)
                    }
                    return
                }
                obj.transNext(end > start, stepTime);
                obj._timeout = setTimeout(arguments.callee, stepTime / 2)
            },
            0)
        },
        _jsAnimate: function(end) {
            var step = this.timeLimit / 20,
            obj = this,
            start = this.index,
            now = 0;
            this._timeout = setTimeout(function() {
                var index = obj.index;
                if (now >= step) {
                    if (index != Math.round(index)) {
                        obj.go(Math.round(index))
                    }
                    if (obj.onend) {
                        obj.onend(start, index)
                    }
                    return
                }
                now++;
                var t = now;
                var value = ((end - start) * ((t = t / step - 1) * t * t + 1)) + start;
                obj.setIndex(value);
                obj._timeout = setTimeout(arguments.callee, 20)
            },
            20)
        },
        _getDescEl: function(obj) {
            var nodes = obj.childNodes,
            node;
            for (var i = 0, len = nodes.length; i < len; i++) {
                node = nodes[i];
                if (node && node.className && node.className.indexOf(this.descClass) >= 0) {
                    return node
                }
            }
            return null
        },
        showDesc: function(currIndex) {
            var children = sina.$(this.descId).childNodes;
            for (var i = 0, len = children.length; i < len; i++) {
                children[i].style.display = i == currIndex ? "": "none"
            }
        },
        onend: function(preIndex, currIndex) {
            currIndex = Math.round(currIndex);
            if (currIndex >= this.data.length) {
                currIndex = currIndex - this.data.length
            }
            this.showDesc(currIndex)
        },
        setIndex: function(index) {
            this.setLeftIndex(index - Math.floor(this.showsNumber / 2))
        },
        setLeftIndex: function(leftIndex) {
            var picLen = this.data.length,
            half = this.showsNumber / 2,
            getIndex = sina.getCurrIndex;
            leftIndex = Math.round(leftIndex * 1000) / 1000;
            leftIndex = getIndex(picLen, leftIndex);
            this.leftIndex = leftIndex;
            var index = getIndex(picLen, Math.floor(half) + leftIndex);
            this.index = index;
            for (var i = 0; i < picLen; i++) {
                if (this.data[i]) {
                    this.data[i].style.display = "none"
                }
            }
            var tempThis = this,
            obj,
            w,
            h,
            t,
            l,
            z;
            for (var i = 0, len = (this.showsNumber == this.data.length) ? this.showsNumber - 1: this.showsNumber; i <= len; i++) {
                var pos = getIndex(picLen, leftIndex + i);
                pos = Math.floor(pos);
                var pos_f = i - leftIndex + Math.floor(leftIndex);
                var size = (half - Math.abs(pos_f - half + 0.5));
                var zIndex = Math.ceil(size);

                obj = this.data[pos];
                obj.style.display = "";
                obj.style.zoom = 1;
				if(zIndex == 3) {obj.className = "piclist piclist01"} else{obj.className = "piclist"}
                var zoom = Math.abs(this.zoom + (1 - this.zoom) / half * size);
                w = Math.round(this.imgWidth * zoom);
                h = Math.round(this.imgHeight * zoom);
                var imgObj = obj.imgObj;
                imgObj.style.width = w + "px";
                imgObj.style.height = h + "px";
                imgObj.style.zoom = 1;
                var imgW = imgObj.offsetWidth,
                imgH = imgObj.offsetHeight,
                imgBorder = imgW - w;
                obj.style.width = imgW + "px";
                obj.style.height = imgH + "px";
                var objW = obj.offsetWidth,
                objH = obj.offsetHeight,
                objBorder = objW - imgW;
                l = (this.width / 2 - (this.imgWidth + objBorder) / 2) / (half - 0.5) * (size - 0.5);
                l = half > i ? l: this.width - l - objW;
                obj.style.left = l + "px";
                t = Math.round((this.height - objH - this.descHeight) / 2);
                obj.style.top = t + "px";
                obj.style.zIndex = z = Math.round(zIndex);
                obj.style.zoom = 1;
                imgObj.style.zoom = 1;
                if (sina.supportTransition && !this.position[i]) {
                    this.position[i] = {
                        zIndex: z * 100,
                        left: l + "px",
                        top: t + "px",
                        width: imgW + "px",
                        height: imgH + "px",
                        imgObj: {
                            width: w + "px",
                            height: h + "px"
                        }
                    }
                }
            }
            if (sina.supportTransition && this.position.length != this.showsNumber + 2) {
                var temp = this.position[0];
                this.position.unshift(sina.extend(sina.extend({},
                temp), {
                    left: "-" + temp.width,
                    zIndex: 0
                }));
                this.position[this.position.length - 1] = sina.extend(sina.extend({},
                temp), {
                    left: this.width + "px",
                    zIndex: 0
                })
            }
            this.autoPlayFunc()
        }
    };
    w.scrollPic3D = scrollPic3D
})();