上下無縫滾動
阿新 • • 發佈：2018-12-14
.dowebok { width: 790px; height: 200px; } .dowebok ul { margin: 0; line-height: 30px;} /*Plugin CSS*/ .str_wrap { overflow:hidden; //zoom:1; width:100%; font-size:12px; line-height:16px; position:relative; -moz-user-select: none; -khtml-user-select: none; white-space:nowrap; } .str_move { white-space:nowrap; position:absolute; top:0; left:0; cursor:move; }
<div class="dowebok"> <ul> <li> <a href="http://www.dowebok.com/187.html">Smoothslides – 可平移的jQuery幻燈片外掛</a> </li> <li> <a href="http://www.dowebok.com/77.html">jQuery全屏滾動外掛fullPage.js</a> </li> <li> <a href="http://www.dowebok.com/131.html">WOW.js – 讓頁面滾動更有趣</a> </li> <li> <ahref="http://www.dowebok.com/139.html">讓IE7 IE8支援CSS3 background-size屬性</a> </li> <li> <a href="http://www.dowebok.com/117.html">shCircleLoader – jQuery Loading效果外掛</a> </li> <li> <a href="http://www.dowebok.com/185.html">jQuery cForm – jQuery表單美化外掛</a> </li> <li> <a href="http://www.dowebok.com/177.html">Quttons – Quantum Paper風格按鈕</a> </li> <li> <a href="http://www.dowebok.com/173.html">Ideal Image Slider – 簡單的純JS幻燈片</a> </li> <li> <a href="http://www.dowebok.com/156.html">evenZoom – jQuery放大鏡外掛</a> </li> <li> <a href="http://www.dowebok.com/155.html">DAD – jQuery拖拽/拖放外掛</a> </li> </ul> </div>
<script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.liMarquee.js"></script> <script> $(function(){ $('.dowebok').liMarquee({ direction: 'up' }); }); </script>
jquery.liMarquee.js程式碼如下：
/* * jQuery liMarquee v 4.6 * * Copyright 2013, Linnik Yura | LI MASS CODE | http://masscode.ru * http://masscode.ru/index.php/k2/item/44-limarquee * Free to use * * Last Update 20.11.2014 */ (function ($) { var methods = { init: function (options) { var p = { direction: 'left', //Указывает направление движения содержимого контейнера (left | right | up | down) loop: -1, //Задает, сколько раз будет прокручиваться содержимое. "-1" для бесконечного воспроизведения движения scrolldelay: 0, //Величина задержки в миллисекундах между движениями scrollamount: 50, //Скорость движения контента (px/sec) circular: true, //Если "true" - строка непрерывная drag: true, //Если "true" - включено перетаскивание строки runshort: true, //Если "true" - короткая строка тоже "бегает", "false" - стоит на месте hoverstop: true, //true - строка останавливается при наведении курсора мыши, false - строка не останавливается inverthover: false, //false - стандартное поведение. Если "true" - строка начинает движение только при наведении курсора xml: false //Путь к xml файлу с нужным текстом }; if (options) { $.extend(p, options); } return this.each(function () { var enterEvent = 'mouseenter'; var leaveEvent = 'mouseleave'; if(p.inverthover){ enterEvent = 'mouseleave'; leaveEvent = 'mouseenter'; } var loop = p.loop, strWrap = $(this).addClass('str_wrap').data({scrollamount:p.scrollamount}), fMove = false; var strWrapStyle = strWrap.attr('style'); if(strWrapStyle){ var wrapStyleArr = strWrapStyle.split(';'); var startHeight = false; for(var i=0; i < wrapStyleArr.length; i++){ var str = $.trim(wrapStyleArr[i]); var tested = str.search(/^height/g); if(tested != -1){ startHeight = parseFloat(strWrap.css('height')); } } } var code = function () { strWrap.off('mouseleave'); strWrap.off('mouseenter'); strWrap.off('mousemove'); strWrap.off('mousedown'); strWrap.off('mouseup'); if(!$('.str_move',strWrap).length){ strWrap.wrapInner($('<div>').addClass('str_move')); } var strMove = $('.str_move', strWrap).addClass('str_origin'), strMoveClone = strMove.clone().removeClass('str_origin').addClass('str_move_clone'), time = 0; if (!p.hoverstop) { strWrap.addClass('noStop'); } var circCloneHor = function(){ strMoveClone.clone().css({ left:'100%', right:'auto', width: strMove.width() }).appendTo(strMove); strMoveClone.css({ right: '100%', left:'auto', width: strMove.width() }).appendTo(strMove); } var circCloneVert = function(){ strMoveClone.clone().css({ top: '100%', bottom:'auto', height: strMove.height() }).appendTo(strMove); strMoveClone.css({ bottom: '100%', top:'auto', height:strMove.height() }).appendTo(strMove); } if (p.direction == 'left') { strWrap.height(strMove.outerHeight()) if (strMove.width() > strWrap.width()) { var leftPos = -strMove.width(); if (p.circular) { if (!p.xml) { circCloneHor() leftPos = -(strMove.width() + (strMove.width() - strWrap.width())); } } if (p.xml) { strMove.css({ left:strWrap.width() }) } var strMoveLeft = strWrap.width(), k1 = 0, timeFunc1 = function () { var fullS = Math.abs(leftPos), time = (fullS / strWrap.data('scrollamount')) * 1000; if (parseFloat(strMove.css('left')) != 0) { fullS = (fullS + strWrap.width()); time = (fullS - (strWrap.width() - parseFloat(strMove.css('left')))) / strWrap.data('scrollamount') * 1000; } return time; }, moveFuncId1 = false, moveFunc1 = function () { if (loop != 0) { strMove.stop(true).animate({ left: leftPos }, timeFunc1(), 'linear', function () { $(this).css({ left: strWrap.width() }); if (loop == -1) { moveFuncId1 = setTimeout(moveFunc1, p.scrolldelay); } else { loop--; moveFuncId1 = setTimeout(moveFunc1, p.scrolldelay); } }); } }; strWrap.data({ moveId: moveFuncId1 , moveF : moveFunc1 }) if(!p.inverthover){ moveFunc1(); } if (p.hoverstop) { strWrap.on(enterEvent, function () { $(this).addClass('str_active'); clearTimeout(moveFuncId1); strMove.stop(true); }).on(leaveEvent, function () { $(this).removeClass('str_active'); $(this).off('mousemove'); moveFunc1(); }); if (p.drag) { strWrap.on('mousedown', function (e) { if(p.inverthover){ strMove.stop(true); } //drag var dragLeft; var dir = 1; var newX; var oldX = e.clientX; //drag strMoveLeft = strMove.position().left; k1 = strMoveLeft - (e.clientX - strWrap.offset().left); $(this).on('mousemove', function (e) { fMove = true; //drag newX = e.clientX; if(newX > oldX){ dir = 1 }else{ dir = -1 } oldX = newX dragLeft = k1 + (e.clientX - strWrap.offset().left); if (!p.circular) { if(dragLeft < -strMove.width() && dir < 0){ dragLeft = strWrap.width(); strMoveLeft = strMove.position().left; k1 = strMoveLeft - (e.clientX - strWrap.offset().left); } if(dragLeft > strWrap.width() && dir > 0){ dragLeft = -strMove.width(); strMoveLeft = strMove.position().left; k1 = strMoveLeft - (e.clientX - strWrap.offset().left); } }else{ if(dragLeft < -strMove.width() && dir < 0){ dragLeft = 0; strMoveLeft = strMove.position().left; k1 = strMoveLeft - (e.clientX - strWrap.offset().left); } if(dragLeft > 0 && dir > 0){ dragLeft = -strMove.width(); strMoveLeft = strMove.position().left; k1 = strMoveLeft - (e.clientX - strWrap.offset().left); } } strMove.stop(true).css({ left: dragLeft }); //drag }).on('mouseup', function () { $(this).off('mousemove'); if(p.inverthover){ strMove.trigger('mouseenter') } setTimeout(function () { fMove = false }, 50) }); return false; }) .on('click', function () { if (fMove) { return false } }); } else { strWrap.addClass('no_drag'); }; } } else { if (p.runshort) { strMove.css({ left: strWrap.width() }); var strMoveLeft = strWrap.width(), k1 = 0, timeFunc = function () { time = (strMove.width() + strMove.position().left) / strWrap.data('scrollamount') * 1000; return time; }; var moveFunc = function () { var leftPos = -strMove.width(); strMove.animate({ left: leftPos }, timeFunc(), 'linear', function () { $(this).css({ left: strWrap.width() }); if (loop == -1) { setTimeout(moveFunc, p.scrolldelay); } else { loop--; setTimeout(moveFunc, p.scrolldelay); } }); }; strWrap.data({ moveF : moveFunc }) if(!p.inverthover){ moveFunc(); } if (p.hoverstop) { strWrap.on(enterEvent, function () { $(this).addClass('str_active'); strMove.stop(true); }).on(leaveEvent, function () { $(this).removeClass('str_active'); $(this).off('mousemove'); moveFunc(); }); if (p.drag) { strWrap.on('mousedown', function (e) { if(p.inverthover){ strMove.stop(true); } //drag var dragLeft; var dir = 1; var newX; var oldX = e.clientX; //drag strMoveLeft = strMove.position().left; k1 = strMoveLeft - (e.clientX - strWrap.offset().left); $(this).on('mousemove', function (e) { fMove = true; //drag newX = e.clientX; if(newX > oldX){ dir = 1 }else{ dir = -1 } oldX = newX dragLeft = k1 + (e.clientX - strWrap.offset().left); if(dragLeft < -strMove.width() && dir < 0){ dragLeft = strWrap.width(); strMoveLeft = strMove.position().left; k1 = strMoveLeft - (e.clientX - strWrap.offset().left); } if(dragLeft > strWrap.width() && dir > 0){ dragLeft = -strMove.width(); strMoveLeft = strMove.position().left; k1 = strMoveLeft - (e.clientX - strWrap.offset().left); } strMove.stop(true).css({ left: dragLeft }); }).on('mouseup', function () { if(p.inverthover){ strMove.trigger('mouseenter') } $(this).off('mousemove'); setTimeout(function () { fMove = false }, 50) }); return false; }) .on('click', function () { if (fMove) { return false } }); } else { strWrap.addClass('no_drag'); }; } } else { strWrap.addClass('str_static'); } }; }; if (p.direction == 'right') { strWrap.height(strMove.outerHeight()) strWrap.addClass('str_right'); strMove.css({ left: -strMove.width(), right: 'auto' }) if (strMove.width() > strWrap.width()) { var leftPos = strWrap.width(); strMove.css({ left: 0 }) if (p.circular) { if (!p.xml) { circCloneHor() //Определяем крайнюю точку leftPos = strMove.width(); } } var k2 = 0; timeFunc = function () { var fullS = strWrap.width(), //крайняя точка time = (fullS / strWrap.data('scrollamount')) * 1000; //время if (parseFloat(strMove.css('left')) != 0) { fullS = (strMove.width() + strWrap.width()); time = (fullS - (strMove.width() + parseFloat(strMove.css('left')))) / strWrap.data('scrollamount') * 1000; } return time; }; var moveFunc = function () { if (loop != 0) { strMove.animate({ left: leftPos }, timeFunc(), 'linear', function () { $(this).css({ left: -strMove.width() }); if (loop == -1) { setTimeout(moveFunc, p.scrolldelay); } else { loop--; setTimeout(moveFunc, p.scrolldelay); }; }); }; }; strWrap.data({ moveF : moveFunc }) if(!p.inverthover){ moveFunc(); } if (p.hoverstop) { strWrap.on(enterEvent, function () { $(this).addClass('str_active'); strMove.stop(true); }).on(leaveEvent, function () { $(this).removeClass('str_active'); $(this).off('mousemove'); moveFunc(); }); if (p.drag) { strWrap.on('mousedown', function (e) { if(p.inverthover){ strMove.stop(true); } //drag var dragLeft; var dir = 1; var newX; var oldX = e.clientX; //drag strMoveLeft = strMove.position().left; k2 = strMoveLeft - (e.clientX - strWrap.offset().left); $(this).on('mousemove', function (e) { fMove = true; //drag newX = e.clientX; if(newX > oldX){ dir = 1 }else{ dir = -1 } oldX = newX dragLeft = k2 + (e.clientX - strWrap.offset().left); if (!p.circular) { if(dragLeft < -strMove.width() && dir < 0){ dragLeft = strWrap.width(); strMoveLeft = strMove.position().left; k2 = strMoveLeft - (e.clientX - strWrap.offset().left); } if(dragLeft > strWrap.width() && dir > 0){ dragLeft = -strMove.width(); strMoveLeft = strMove.position().left; k2 = strMoveLeft - (e.clientX - strWrap.offset().left); } }else{ if(dragLeft < -strMove.width() && dir < 0){ dragLeft = 0; strMoveLeft = strMove.position().left; k2 = strMoveLeft - (e.clientX - strWrap.offset().left); } if(dragLeft > 0 && dir > 0){ dragLeft = -strMove.width(); strMoveLeft = strMove.position().left; k2 = strMoveLeft - (e.clientX - strWrap.offset().left); } } strMove.stop(true).css({ left: dragLeft }); }).on('mouseup', function () { if(p.inverthover){ strMove.trigger('mouseenter') } $(this).off('mousemove'); setTimeout(function () { fMove = false }, 50) }); return false; }) .on('click', function () { if (fMove) { return false } }); } else { strWrap.addClass('no_drag'); }; } } else { if (p.runshort) { var k2 = 0; var timeFunc = function () { time = (strWrap.width() - strMove.position().left) / strWrap.data('scrollamount') * 1000; return time; }; var moveFunc = function () { var leftPos = strWrap.width(); strMove.animate({ left: leftPos }, timeFunc(), 'linear', function () { $(this).css({ left: -strMove.width() }); if (loop == -1) { setTimeout(moveFunc, p.scrolldelay); } else { loop--; setTimeout(moveFunc, p.scrolldelay); }; }); }; strWrap.data({ moveF : moveFunc }) if(!p.inverthover){ moveFunc(); } if (p.hoverstop) { strWrap.on(enterEvent, function () { $(this).addClass('str_active'); strMove.stop(true); }).on(leaveEvent, function () { $(this).removeClass('str_active'); $(this).off('mousemove'); moveFunc(); }); if (p.drag) { strWrap.on('mousedown', function (e) { if(p.inverthover){ strMove.stop(true); } //drag var dragLeft; var dir = 1; var newX; var oldX = e.clientX; //drag strMoveLeft = strMove.position().left; k2 = strMoveLeft - (e.clientX - strWrap.offset().left); $(this).on('mousemove', function (e) { fMove = true; //drag newX = e.clientX; if(newX > oldX){ dir = 1 }else{ dir = -1 } oldX = newX dragLeft = k2 + (e.clientX - strWrap.offset().left); if(dragLeft < -strMove.width() && dir < 0){ dragLeft = strWrap.width(); strMoveLeft = strMove.position().left; k2 = strMoveLeft - (e.clientX - strWrap.offset().left); } if(dragLeft > strWrap.width() && dir > 0){ dragLeft = -strMove.width(); strMoveLeft = strMove.position().left; k2 = strMoveLeft - (e.clientX - strWrap.offset().left); } strMove.stop(true).css({ left:dragLeft }); }).on('mouseup', function () { if(p.inverthover){ strMove.trigger('mouseenter') } $(this).off('mousemove'); setTimeout(function () { fMove = false }, 50) }); return false; }) .on('click', function () { if (fMove) { return false } }); } else { strWrap.addClass('no_drag'); }; } } else { strWrap.addClass('str_static'); } }; }; if (p.direction == 'up') { strWrap.addClass('str_vertical'); if (strMove.height() > strWrap.height()) { var topPos = -strMove.height(); if (p.circular) { if (!p.xml) { circCloneVert(); topPos = -(strMove.height() + (strMove.height() - strWrap.height())); } } if (p.xml) { strMove.css({ top:strWrap.height() }) } var k2 = 0; timeFunc = function () { var fullS = Math.abs(topPos), time = (fullS / strWrap.data('scrollamount')) * 1000; if (parseFloat(strMove.css('top')) != 0) { fullS = (fullS + strWrap.height()); time = (fullS - (strWrap.height() - parseFloat(strMove.css('top')))) / strWrap.data('scrollamount') * 1000; } return time; }; var moveFunc = function () { if (loop != 0) { strMove.animate({ top: topPos }, timeFunc(), 'linear', function () { $(this).css({ top: strWrap.height() }); if (loop == -1) { setTimeout(moveFunc, p.scrolldelay); } else { loop--; setTimeout(moveFunc, p.scrolldelay); }; }); }; }; strWrap.data({ moveF : moveFunc }) if(!p.inverthover){ moveFunc(); } if (p.hoverstop) { strWrap.on(enterEvent, function () { $(this).addClass('str_active'); strMove.stop(true); }).on(leaveEvent, function () { $(this).removeClass('str_active'); $(this).off('mousemove'); moveFunc(); }); if (p.drag) { strWrap.on('mousedown', function (e) { if(p.inverthover){ strMove.stop(true); } //drag var dragTop; var dir = 1; var newY; var oldY = e.clientY; //drag strMoveTop = strMove.position().top; k2 = strMoveTop - (e.clientY - strWrap.offset().top); $(this).on('mousemove', function (e) { fMove = true; //drag newY = e.clientY; if(newY > oldY){ dir = 1 }else{ if(newY < oldY){ dir = -1 } } oldY = newY dragTop = k2 + e.clientY - strWrap.offset().top; if (!p.circular){ if(dragTop < -strMove.height() && dir < 0){ dragTop = strWrap.height(); strMoveTop = strMove.position().top; k2 = strMoveTop - (e.clientY - strWrap.offset().top); } if(dragTop > strWrap.height() && dir > 0){ dragTop = -strMove.height(); strMoveTop = strMove.position().top; k2 = strMoveTop - (e.clientY - strWrap.offset().top); } }else{ if(dragTop < -strMove.height() && dir < 0){ dragTop = 0; strMoveTop = strMove.position().top; k2 = strMoveTop - (e.clientY - strWrap.offset().top); } if(dragTop > 0 && dir > 0){ dragTop = -strMove.height(); strMoveTop = strMove.position().top; k2 = strMoveTop - (e.clientY - strWrap.offset().top); } } strMove.stop(true).css({ top: dragTop }); //drag }).on('mouseup', function () { if(p.inverthover){ strMove.trigger('mouseenter') } $(this).off('mousemove'); setTimeout(function () { fMove = false }, 50) }); return false; }) .on('click', function () { if (fMove) { return false } }); } else { strWrap.addClass('no_drag'); }; } } else { if (p.runshort) { strMove.css({ top: strWrap.height() }); var k2 = 0; var timeFunc = function () { time = (strMove.height() + strMove.position().top) / strWrap.data('scrollamount') * 1000; return time; }; var moveFunc = function () { var topPos = -strMove.height(); strMove.animate({ top: topPos }, timeFunc(), 'linear', function () { $(this).css({ top: strWrap.height() }); if (loop == -1) { setTimeout(moveFunc, p.scrolldelay); } else { loop--; setTimeout(moveFunc, p.scrolldelay); }; }); }; strWrap.data({ moveF : moveFunc }) if(!p.inverthover){ moveFunc(); } if (p.hoverstop) { strWrap.on(enterEvent, function () { $(this).addClass('str_active'); strMove.stop(true); }).on(leaveEvent, function () { $(this).removeClass('str_active'); $(this).off('mousemove'); moveFunc(); }); if (p.drag) { strWrap.on('mousedown', function (e) { if(p.inverthover){ strMove.stop(true); } //drag var dragTop; var dir = 1; var newY; var oldY = e.clientY; //drag strMoveTop = strMove.position().top; k2 = strMoveTop - (e.clientY - st