0
我的問題與嵌入播放列表我試圖讓我的（李）在視頻框下的列表，但我所有的嘗試失敗。所以如何一些人更正我的代碼，在這裏我的代碼如何把側欄放在視頻框下
<script src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type = 'text/javascript'/>
<script>
//<![CDATA[
/*hoverscroll v.0.2.4*/
(function($) {
\t $.fn.hoverscroll = function(params) {
\t \t if (!params) {
\t \t \t params = {};
\t \t }
\t \t params = $.extend({}, $.fn.hoverscroll.params, params);
\t \t this.each(function() {
\t \t \t var $this = $(this);
\t \t \t if (params.debug) {
\t \t \t \t $.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);
\t \t \t }
\t \t \t if (params.fixedArrows) {
\t \t \t \t $this.wrap('<div class="fixed-listcontainer"></div>')
\t \t \t } else {
\t \t \t \t $this.wrap('<div class="listcontainer"></div>');
\t \t \t }
\t \t \t $this.addClass('list');
\t \t \t var listctnr = $this.parent();
\t \t \t listctnr.wrap('<div class="ui-widget-content hoverscroll' +
\t \t \t \t (params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
\t \t \t //listctnr.wrap('<div class="hoverscroll"></div>');
\t \t \t var ctnr = listctnr.parent();
\t \t \t var leftArrow, rightArrow, topArrow, bottomArrow;
\t \t \t if (params.arrows) {
\t \t \t \t if (!params.vertical) {
\t \t \t \t \t if (params.fixedArrows) {
\t \t \t \t \t \t leftArrow = '<div class="fixed-arrow left"></div>';
\t \t \t \t \t \t rightArrow = '<div class="fixed-arrow right"></div>';
\t \t \t \t \t \t listctnr.before(leftArrow).after(rightArrow);
\t \t \t \t \t } else {
\t \t \t \t \t \t leftArrow = '<div class="arrow left"></div>';
\t \t \t \t \t \t rightArrow = '<div class="arrow right"></div>';
\t \t \t \t \t \t listctnr.append(leftArrow).append(rightArrow);
\t \t \t \t \t }
\t \t \t \t } else {
\t \t \t \t \t if (params.fixedArrows) {
\t \t \t \t \t \t topArrow = '<div class="fixed-arrow top"></div>';
\t \t \t \t \t \t bottomArrow = '<div class="fixed-arrow bottom"></div>';
\t \t \t \t \t \t listctnr.before(topArrow).after(bottomArrow);
\t \t \t \t \t } else {
\t \t \t \t \t \t topArrow = '<div class="arrow top"></div>';
\t \t \t \t \t \t bottomArrow = '<div class="arrow bottom"></div>';
\t \t \t \t \t \t listctnr.append(topArrow).append(bottomArrow);
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t \t ctnr.width(params.width).height(params.height);
\t \t \t if (params.arrows && params.fixedArrows) {
\t \t \t \t if (params.vertical) {
\t \t \t \t \t topArrow = listctnr.prev();
\t \t \t \t \t bottomArrow = listctnr.next();
\t \t \t \t \t listctnr.width(params.width)
\t \t \t \t \t \t .height(params.height - (topArrow.height() + bottomArrow.height()));
\t \t \t \t } else {
\t \t \t \t \t leftArrow = listctnr.prev();
\t \t \t \t \t rightArrow = listctnr.next();
\t \t \t \t \t listctnr.height(params.height)
\t \t \t \t \t \t .width(params.width - (leftArrow.width() + rightArrow.width()));
\t \t \t \t }
\t \t \t } else {
\t \t \t \t listctnr.width(params.width).height(params.height);
\t \t \t }
\t \t \t var size = 0;
\t \t \t if (!params.vertical) {
\t \t \t \t ctnr.addClass('horizontal');
\t \t \t \t $this.children().each(function() {
\t \t \t \t \t $(this).addClass('item');
\t \t \t \t \t if ($(this).outerWidth) {
\t \t \t \t \t \t size += $(this).outerWidth(true);
\t \t \t \t \t } else {
\t \t \t \t \t \t size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right')) + parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
\t \t \t \t \t }
\t \t \t \t });
\t \t \t \t $this.width(size);
\t \t \t \t if (params.debug) {
\t \t \t \t \t $.log('[HoverScroll] Computed content width : ' + size + 'px');
\t \t \t \t }
\t \t \t \t if (ctnr.outerWidth) {
\t \t \t \t \t size = ctnr.outerWidth();
\t \t \t \t } else {
\t \t \t \t \t size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right')) + parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
\t \t \t \t }
\t \t \t \t if (params.debug) {
\t \t \t \t \t $.log('[HoverScroll] Computed container width : ' + size + 'px');
\t \t \t \t }
\t \t \t } else {
\t \t \t \t ctnr.addClass('vertical');
\t \t \t \t $this.children().each(function() {
\t \t \t \t \t $(this).addClass('item')
\t \t \t \t \t if ($(this).outerHeight) {
\t \t \t \t \t \t size += $(this).outerHeight(true);
\t \t \t \t \t } else {
\t \t \t \t \t \t size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom')) + parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
\t \t \t \t \t }
\t \t \t \t });
\t \t \t \t $this.height(size);
\t \t \t \t if (params.debug) {
\t \t \t \t \t $.log('[HoverScroll] Computed content height : ' + size + 'px');
\t \t \t \t }
\t \t \t \t if (ctnr.outerHeight) {
\t \t \t \t \t size = ctnr.outerHeight();
\t \t \t \t } else {
\t \t \t \t \t size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom')) + parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
\t \t \t \t }
\t \t \t \t if (params.debug) {
\t \t \t \t \t $.log('[HoverScroll] Computed container height : ' + size + 'px');
\t \t \t \t }
\t \t \t }
\t \t \t var zone = {
\t \t \t \t 1: {
\t \t \t \t \t action: 'move',
\t \t \t \t \t from: 0,
\t \t \t \t \t to: 0.06 * size,
\t \t \t \t \t direction: -1,
\t \t \t \t \t speed: 16
\t \t \t \t },
\t \t \t \t 2: {
\t \t \t \t \t action: 'move',
\t \t \t \t \t from: 0.06 * size,
\t \t \t \t \t to: 0.15 * size,
\t \t \t \t \t direction: -1,
\t \t \t \t \t speed: 8
\t \t \t \t },
\t \t \t \t 3: {
\t \t \t \t \t action: 'move',
\t \t \t \t \t from: 0.15 * size,
\t \t \t \t \t to: 0.25 * size,
\t \t \t \t \t direction: -1,
\t \t \t \t \t speed: 4
\t \t \t \t },
\t \t \t \t 4: {
\t \t \t \t \t action: 'move',
\t \t \t \t \t from: 0.25 * size,
\t \t \t \t \t to: 0.4 * size,
\t \t \t \t \t direction: -1,
\t \t \t \t \t speed: 2
\t \t \t \t },
\t \t \t \t 5: {
\t \t \t \t \t action: 'stop',
\t \t \t \t \t from: 0.4 * size,
\t \t \t \t \t to: 0.6 * size
\t \t \t \t },
\t \t \t \t 6: {
\t \t \t \t \t action: 'move',
\t \t \t \t \t from: 0.6 * size,
\t \t \t \t \t to: 0.75 * size,
\t \t \t \t \t direction: 1,
\t \t \t \t \t speed: 2
\t \t \t \t },
\t \t \t \t 7: {
\t \t \t \t \t action: 'move',
\t \t \t \t \t from: 0.75 * size,
\t \t \t \t \t to: 0.85 * size,
\t \t \t \t \t direction: 1,
\t \t \t \t \t speed: 4
\t \t \t \t },
\t \t \t \t 8: {
\t \t \t \t \t action: 'move',
\t \t \t \t \t from: 0.85 * size,
\t \t \t \t \t to: 0.94 * size,
\t \t \t \t \t direction: 1,
\t \t \t \t \t speed: 8
\t \t \t \t },
\t \t \t \t 9: {
\t \t \t \t \t action: 'move',
\t \t \t \t \t from: 0.94 * size,
\t \t \t \t \t to: size,
\t \t \t \t \t direction: 1,
\t \t \t \t \t speed: 16
\t \t \t \t }
\t \t \t }
\t \t \t ctnr[0].isChanging = false;
\t \t \t ctnr[0].direction = 0;
\t \t \t ctnr[0].speed = 1;
\t \t \t function checkMouse(x, y) {
\t \t \t \t x = x - ctnr.offset().left;
\t \t \t \t y = y - ctnr.offset().top;
\t \t \t \t var pos;
\t \t \t \t if (!params.vertical) {
\t \t \t \t \t pos = x;
\t \t \t \t } else {
\t \t \t \t \t pos = y;
\t \t \t \t }
\t \t \t \t for (i in zone) {
\t \t \t \t \t if (pos >= zone[i].from && pos < zone[i].to) {
\t \t \t \t \t \t if (zone[i].action == 'move') {
\t \t \t \t \t \t \t startMoving(zone[i].direction, zone[i].speed);
\t \t \t \t \t \t } else {
\t \t \t \t \t \t \t stopMoving();
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t \t function setArrowOpacity() {
\t \t \t \t if (!params.arrows || params.fixedArrows) {
\t \t \t \t \t return;
\t \t \t \t }
\t \t \t \t var maxScroll;
\t \t \t \t var scroll;
\t \t \t \t if (!params.vertical) {
\t \t \t \t \t maxScroll = listctnr[0].scrollWidth - listctnr.width();
\t \t \t \t \t scroll = listctnr[0].scrollLeft;
\t \t \t \t } else {
\t \t \t \t \t maxScroll = listctnr[0].scrollHeight - listctnr.height();
\t \t \t \t \t scroll = listctnr[0].scrollTop;
\t \t \t \t }
\t \t \t \t var limit = params.arrowsOpacity;
\t \t \t \t var opacity = (scroll/maxScroll) * limit;
\t \t \t \t if (opacity > limit) {
\t \t \t \t \t opacity = limit;
\t \t \t \t }
\t \t \t \t if (isNaN(opacity)) {
\t \t \t \t \t opacity = 0;
\t \t \t \t }
\t \t \t \t var done = false;
\t \t \t \t if (opacity <= 0) {
\t \t \t \t \t $('div.arrow.left, div.arrow.top', ctnr).hide();
\t \t \t \t \t if (maxScroll > 0) {
\t \t \t \t \t \t $('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
\t \t \t \t \t }
\t \t \t \t \t done = true;
\t \t \t \t }
\t \t \t \t if (opacity >= limit || maxScroll <= 0) {
\t \t \t \t \t $('div.arrow.right, div.arrow.bottom', ctnr).hide();
\t \t \t \t \t done = true;
\t \t \t \t }
\t \t \t \t if (!done) {
\t \t \t \t \t $('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
\t \t \t \t \t $('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
\t \t \t \t }
\t \t \t }
\t \t \t function startMoving(direction, speed) {
\t \t \t \t if (ctnr[0].direction != direction) {
\t \t \t \t \t if (params.debug) {
\t \t \t \t \t \t $.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
\t \t \t \t \t }
\t \t \t \t \t stopMoving();
\t \t \t \t \t ctnr[0].direction = direction;
\t \t \t \t \t ctnr[0].isChanging = true;
\t \t \t \t \t move();
\t \t \t \t }
\t \t \t \t if (ctnr[0].speed != speed) {
\t \t \t \t \t if (params.debug) {
\t \t \t \t \t \t $.log('[HoverScroll] Changed speed: ' + speed);
\t \t \t \t \t }
\t \t \t \t \t ctnr[0].speed = speed;
\t \t \t \t }
\t \t \t }
\t \t \t function stopMoving() {
\t \t \t \t if (ctnr[0].isChanging) {
\t \t \t \t \t if (params.debug) {
\t \t \t \t \t \t $.log('[HoverScroll] Stoped moving');
\t \t \t \t \t }
\t \t \t \t \t ctnr[0].isChanging = false;
\t \t \t \t \t ctnr[0].direction = 0;
\t \t \t \t \t ctnr[0].speed = 1;
\t \t \t \t \t clearTimeout(ctnr[0].timer);
\t \t \t \t }
\t \t \t }
\t \t \t function move() {
\t \t \t \t if (ctnr[0].isChanging == false) {
\t \t \t \t \t return;
\t \t \t \t }
\t \t \t \t setArrowOpacity();
\t \t \t \t var scrollSide;
\t \t \t \t if (!params.vertical) {
\t \t \t \t \t scrollSide = 'scrollLeft';
\t \t \t \t } else {
\t \t \t \t \t scrollSide = 'scrollTop';
\t \t \t \t }
\t \t \t \t listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
\t \t \t \t ctnr[0].timer = setTimeout(function() {
\t \t \t \t \t move();
\t \t \t \t }, 50);
\t \t \t }
\t \t \t if (params.rtl && !params.vertical) {
\t \t \t \t listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
\t \t \t }
\t \t \t ctnr
\t \t \t \t .mousemove(function(e) {
\t \t \t \t \t checkMouse(e.pageX, e.pageY);
\t \t \t \t })
\t \t \t \t .bind('mouseleave', function() {
\t \t \t \t \t stopMoving();
\t \t \t \t });
\t \t \t this.startMoving = startMoving;
\t \t \t this.stopMoving = stopMoving;
\t \t \t if (params.arrows && !params.fixedArrows) {
\t \t \t \t // Initialise arrow opacity
\t \t \t \t setArrowOpacity();
\t \t \t } else {
\t \t \t \t // Hide arrows
\t \t \t \t $('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
\t \t \t }
\t \t });
\t \t return this;
\t };
\t if (!$.fn.offset) {
\t \t $.fn.offset = function() {
\t \t \t this.left = this.top = 0;
\t \t \t if (this[0] && this[0].offsetParent) {
\t \t \t \t var obj = this[0];
\t \t \t \t do {
\t \t \t \t \t this.left += obj.offsetLeft;
\t \t \t \t \t this.top += obj.offsetTop;
\t \t \t \t } while (obj = obj.offsetParent);
\t \t \t }
\t \t \t return this;
\t \t }
\t }
\t $.fn.hoverscroll.params = {
\t \t vertical: false,
\t \t width: 400,
\t \t height: 50,
\t \t arrows: true,
\t \t arrowsOpacity: 0.7,
\t \t fixedArrows: false,
\t \t rtl: false,
\t \t debug: false
\t };
\t $.log = function() {
\t \t try {
\t \t \t console.log.apply(console, arguments);
\t \t } catch (e) {
\t \t \t try {
\t \t \t \t opera.postError.apply(opera, arguments);
\t \t \t } catch (e) {}
\t \t }
\t };
})(jQuery);
$(function() {
\t $("#videoslider-tabs a").click(function() {
\t \t var container = $("#videoslider-content");
\t \t container.html("<img src='http://3.bp.blogspot.com/-5iLHgsmg5gE/UjhXqejYSNI/AAAAAAAAD2Y/x5jtMwID_X4/s1600/loading.png' class='loading-vid' />");
\t \t var id = $(this).attr("href").slice(1);
\t \t loadvideo(id);
\t \t return false;
\t });
\t $("#videoslider-tabs").hoverscroll({
\t \t vertical: true,
\t \t width: 300,
\t \t height: 330,
\t \t arrows: false
\t });
\t $("#videoslider-tabs li").hover(function() {
\t \t $(this).addClass("hover");
\t }, function() {
\t \t $(this).removeClass("hover");
\t });
\t loadvideo();
});
function loadvideo(hash) {
\t \t if (hash) {
\t \t \t hash = hash.slice(3);
\t \t \t $("#videoslider-content").html(video[hash]);
\t \t \t $("#videoslider-tabs li").removeClass("actVid");
\t \t \t $("#videoslider-tabs a[href=#vid" + hash + "]").parent().addClass("actVid");
\t \t } else {
\t \t \t $("#videoslider-content").html(video[1]);
\t \t \t $("#videoslider-tabs li").removeClass("actVid");
\t \t \t $("#videoslider-tabs a[href=#vid1]").parent().addClass("actVid");
\t \t }
\t }
\t //]]>
</script><style>
\t #videoslider {
\t background: #F6F6F6;
\t /* Background color */
\t
\t clear: both;
\t margin: 0 auto;
\t padding: 5px;
\t width: 735px;
\t border-radius: 5px;
\t border: 1px solid #C1C1C1;
\t -moz-background-clip: padding;
\t -webkit-background-clip: padding-box;
\t background-clip: padding-box;
}
#videoslider,
#videoslider-content,
#videoslider-tabs {
\t height: 340px;
}
#videoslider-content {
\t color: #fff;
\t float: left;
\t text-align: center;
\t width: 430px;
\t z-index: 1;
}
.loading-vid {
\t display: block;
\t margin: 165px auto 0;
}
#videoslider-tabs {
\t float: right;
\t width: 240px;
\t margin: 0;
}
#videoslider-tabs li {
\t background-color: #F6F6F6;
\t border: 1px solid #C1C1C1;
\t float: left;
\t height: 60px;
\t padding: 5px;
\t width: 240px;
\t list-style: none;
\t overflow: hidden;
}
#videoslider-tabs li a {
\t padding: 0 !important;
\t border: 0 !important;
}
#videoslider-tabs li.hover {
\t background-color: #EBEBEB;
}
#videoslider-tabs li.actVid {
\t background: #555;
}
#videoslider-tabs li img.thumb-vid {
\t background-color: #EEEEEE;
\t float: left;
\t height: 52px;
\t margin: 0 8px 0 0;
\t padding: 5px;
\t width: 52px;
}
#videoslider-tabs li span.vidTit {
\t display: block;
\t color: #128EC9;
\t /* Titles color */
\t
\t font-size: 12px;
\t /* Titles font size */
\t
\t font-weight: bold;
\t text-decoration: none;
}
#videoslider-tabs li .vidDesc {
\t display: block;
\t color: #222222;
\t /* Color of the description */
\t
\t font-size: 11px;
\t /* Font size of the description */
\t
\t font-weight: bold;
\t text-decoration: none;
}
#videoslider-tabs a {
\t text-decoration: none;
}
#videoslider-tabs li.actVid .vidDesc {
\t color: #fff;
}
#videoslider-tabs li span.vidTit .actVid {
\t color: #fff;
\t /* Titles color */
}
.ui-widget-content {
\t float: right;
\t overflow-y: scroll;
\t overflow-x: hidden;
}
.tabs-outer {
\t background-image: none !important;
}
#videoslider-tabs li a:hover {
\t background: none !important;
}
</style><script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="videoslider">
<div id="videoslider-content"></div>
<ul id="videoslider-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/video_ID_1/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>
<li><a href="#vid2"><img src="//i2.ytimg.com/vi/video_ID_2/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>
<li><a href="#vid3"><img src="//i2.ytimg.com/vi/video_ID_3/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>
<li><a href="#vid4"><img src="//i2.ytimg.com/vi/video_ID_4/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>
<li><a href="#vid5"><img src="//i2.ytimg.com/vi/video_ID_5/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>
</ul>
</div>所以一些一眼，再正確的我的代碼，因爲我想使視頻框下面的列表
http://jsfiddle.net/yk8j94qm/ –
請您可以檢查答案（它出現在懸停）旁邊的刻度，如果你發現我的回答有用 –