转引自：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>
js
// [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
})();
676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
