今天给大家分享下一个js特效 “JQuery 可自定义自动播放图片 文字 也可以带按钮点击特效” 以前一直看到‘阿里巴巴及淘宝有这种效果’,但是当时不知道用js怎么写 研究了下 并且网上搜集下资料,看了些文章 现在明白了 写了一个js特效效果 本人觉得这个特效扩展性很好!值得大家学习下!我把js代码贴到这里 有需要的可以看看!绝对可以帮助大家!
比如阿里巴巴 这两种都可以自定义
这两种效果 一行一行文字向上播放!或者下面的效果 默认情况下自动播放!也可以带点击按钮!当然你可以不设置自动播放!一切由自己决定!
/*
* jQuery JavaScript Library Marquee Plus 1.0
*
*
* author tugenhua
* Dual licensed under the MIT and GPL licenses.
*
* Date: 2011-07-20 15:50:21
**********************************************************************
* @example
* $("#example").XYMarquee({
* next : "next",
* prev : "prev"
* })
**********************************************************************
*jMarquee o参数可配置项:
* _direction : left || top,设置滚动方向,(向左或向上)默认向左滚动;
* _btnNext : 下翻页的ID名称;
* _btnPrev : 上翻页的ID名称;
* _auto : 布尔值(true为自动滚动,false为手动滚动, 默认true);
* _item : 设置每次滚动元素的个数(默认滚动所有可见部分);
* _speed : 设置每次滚动动画执行时间(单位毫秒,默认为1000);
* _time : 设置每次动画执行间隔时间(单位毫秒,默认为3000);
**********************************************************************
*完整的html代码结构:
*<div id="example">
* <div class="scroll">
* <ul>
* <li></li>
* <li></li>
* <li></li>
* <li></li>
* </ul>
* </div>
* <span class="prev">前一个</span>
* <span class="next">下一个</span>
*</div>
**********************************************************************/
;(function($){
$.fn.extend({
XYMarquee : function(o){
var defaults = {
_direction : "left",
_btnNext : "prev",
_btnPrev : "next",
_auto : true,
_item : null,
_speed : "1000",
_time : "3000"
};
var o = $.extend(defaults,o);
return this.each(function(){
var timer;
var marquee = true,_self = $(this),$wrap = $("div",_self),$parent = $("li",$wrap).parent();
var count = o._direction =="left" ? Math.floor($wrap.width()/$("li", $wrap).outerWidth()):Math.floor($wrap.height() / $("li", $wrap).outerHeight());
if(o._item){ count = o._item;}
if(o._direction =="left"){
$parent.css("width",$wrap.width()*2 + "px");
}else{
$parent.css("height",$wrap.height()*2 + "px");
}
$wrap.css("overflow","hidden");
var $value = o._direction =="left" ? $("li",$wrap).outerWidth()*count : $("li",$wrap).outerHeight()*count;
function scrollNext(){
if(marquee){
marquee = false;
if(o._direction == "left"){
$parent.animate({marginLeft : -$value},
o._speed,
function(){
var $tempwrap = $("li",$wrap).slice(0,count);
$parent.append($tempwrap);
$parent.css("marginLeft",0);
marquee = true;
});
}else{
$parent.animate({marginTop : -$value},o._speed,function(){
var $tempwrap = $("li",$wrap).slice(0,count);
$parent.append($tempwrap);
$parent.css("marginTop",0);
marquee = true;
});
}
}
};
function scrollPrev(){
if(marquee){
var $tempwrap = $("li", $wrap).slice( - count);marquee = false;
$parent.append($tempwrap);
if(o._direction = "left"){
$parent.css("marginLeft",-$value);
$parent.animate({
marginLeft:0},
o._speed,
function(){
marquee = true;
});
}else{
$parent.css("marginTop",-$value);
$parent.animate({
marginTop : 0},
o._speed,
function(){
marquee = true;
});
}
}
};
function stopMarquee(){clearInterval(timer)};
function autoPlay(){
timer = setInterval(scrollNext,o._time);
}
if(o._auto){
$wrap.hover(function(){
stopMarquee();
},function(){
autoPlay();
});
$("#" + o._btnPrev,_self).hover(function(){
stopMarquee();
},function(){
autoPlay();
});
$("#" + o._btnNext,_self).hover(function(){
stopMarquee();
},function(){
autoPlay();
});
autoPlay();
}
$("#" + o._btnPrev,_self).click(scrollPrev);
$("#" + o._btnNext,_self).click(scrollNext);
});
}
});
})(jQuery)
HTML代码调用
<script src="jquery-1.5.2.min.js"></script>
<script src="XYMarquee.js"></script>
jquery原压缩包引用进来 及 上面的js引用进来就ok了,
HTML代码结构一定要按照我那个js代码说的来做,就可以了 比如我的:
<div id="wrap">
<!-- 纯文字公告 -->
<div class="ws">
<h3 class="font-top">文字自动滚动(向上)</h3>
<div class="box" id="demo1">
<span class="title">尘世:</span>
<div class='fl scroll1'>
<ul>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
<li>谁,执我之手,消我半世孤独;</li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
</div>
然后我这边是做的文字一行一行向上滚动的js调用:
<script>
$(function(){
$("#demo1").XYMarquee({
_direction : 'up',
_item : 1
})
})
</script>
就ok了 当然图片 文字都可以自定义自动播放!或者加按钮都ok!