jquery实现效果,jquery可以实现哪些效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

jquery跑马灯效果

要实现简单的跑马灯效果其实运用html中marquee/marquee标签就可以达到了

基本属性如下：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

如果想要更多的动画效果，更多选择jquery.marquee.js这款插件——ul里的啥都能滚并自带悬停效果

1.html 中写入ul id="marquee"li/li/ul

2.js中调入$("#marquee").marquee();即可

3.css比较简单，一般自己写，大致如下：

ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}

ul.marquee li{ position:absolute;top:-999em;left:0; display:block; white-space:nowrap ;padding:3px5px;text-indent:0.8em;}

4.相关参数如下：

{

yScroll:"top"; // 初始滚动方向 (还可以是"top" 或 "bottom")

showSpeed:850; // 初始下拉速度

scrollSpeed:12; // 滚动速度

pauseSpeed:5000; // 滚动完到下一条的间隔时间

pauseOnHover:true; // 鼠标滑向文字时是否停止滚动

loop:-1; // 设置循环滚动次数（-1为无限循环）

fxEasingShow:"swing"; // 缓冲效果

fxEasingScroll:"linear"; // 缓冲效果

cssShowing:"marquee-showing"; //定义class event handlers

init:null; // 初始调用函数

beforeshow:null; // 滚动前回调函数

show:null; // 当新的滚动内容显示时回调函数

aftershow:null; // 滚动完了回调函数

}

相关问答

Q1: JQuery实现的按钮倒计时效果

本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考，具体如下：

一个实现了在按钮上显示倒计时，倒计时完毕自动将按钮设置为不可用的效果，具体代码如下：

html

head

titletest

count

down

button/title

script

src="jquery1.8.3.min.js"

type="text/javascript"/script

script

type="text/javascript"

$(function

()

{

$('#btn').click(function

()

{

var

count

10;

var

countdown

setInterval(CountDown,

1000);

function

CountDown()

{

$("#btn").attr("disabled",

true);

$("#btn").val("Please

wait

count

seconds!");

(count

{

$("#btn").val("Submit").removeAttr("disabled");

clearInterval(countdown);

}

count--;

}

})

});

/script

/head

body

input

type="button"

id="btn"

value="Submit"

/body

/html

运行效果截图如下：

希望本文所述对大家jQuery程序设计有所帮助。

Q2: 基于jquery实现最简单的选项卡切换效果

这个功能在现在的网站中使用较为普遍，就是以选项卡的形式来对一些内容做了分类。，比如下面的天猫商城。

下面的源码是仿照天猫写的一个选项卡，实现起来的效果如下。

主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。

同时利用hover为其添加了鼠标滑过时的效果。

代码：

!DOCTYPE

html

lang="en"

xmlns=""

head

meta

charset="utf-8"

link

href="css/style1.css"

rel="stylesheet"

type="text/css"

script

src="jquery-1.3.2.min.js"/script

title/title

script

$(function

()

{

var

$div_li

$("div.tab_menu

li");

$div_li.click(function

()

{

//定义了tan_menu对应的单击事件，也就是类别的单击事件。

$(this).addClass("selected")

.siblings().removeClass("selected");

var

index

$div_li.index(this);

$("div.tab_boxdiv").eq(index).show()

.siblings().hide();

}).hover(function

()

{

//定义了鼠标滑过特效

$(this).addClass("hover");

function

()

{

$(this).removeClass("hover");

});

/script

/head

body

div

class="tab"

div

class="tab_menu"

class="selected"时事/li

li体育/li

li娱乐/li

/ul

/div

div

class="tab_box"

div时事/div

div

class="hide"体育/div

div

class="hide"娱乐/div

/div

/body

/html

以上就是本文的全部内容，希望对大家熟练掌握实现选项卡切换的技巧有所帮助。

Q3: 如何用jquery实现时钟效果

首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：

getTime() // 返回距1970年1月1日之间的毫秒数，这样将时间差（毫秒数）÷3600÷24即为天数，时分秒类似setTimeout(code,millisec); // 在指定的毫秒数后调用函数实例演示如下

创建Html元素

div class="box" span距离2015年国庆节还剩：/spanbr div class="content" input type="text" id="time_d"天input type="text" id="time_h"时input type="text" id="time_m"分input type="text" id="time_s"秒 /div/div设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.boxspan{color:#999;font-style:italic;}div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}input[type='text']{width:45px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}编写jquery代码

$(function(){ show_time();}); function show_time(){ var time_start = new Date().getTime(); //设定当前时间 var time_end = new Date("2015/10/01 00:00:00").getTime(); //设定目标时间 // 计算时间差 var time_distance = time_end - time_start; // 天 var int_day = Math.floor(time_distance/86400000) time_distance -= int_day * 86400000; // 时 var int_hour = Math.floor(time_distance/3600000) time_distance -= int_hour * 3600000; // 分 var int_minute = Math.floor(time_distance/60000) time_distance -= int_minute * 60000; // 秒 var int_second = Math.floor(time_distance/1000) // 时分秒为单数时、前面加零 if(int_day 10){ int_day = "0" + int_day; } if(int_hour 10){ int_hour = "0" + int_hour; } if(int_minute 10){ int_minute = "0" + int_minute; } if(int_second 10){ int_second = "0" + int_second; } // 显示时间 $("#time_d").val(int_day); $("#time_h").val(int_hour); $("#time_m").val(int_minute); $("#time_s").val(int_second); // 设置定时器 setTimeout("show_time()",1000); }观察效果

某个时刻的截图

几秒后的截图

Q4: jquery实现倒计时效果

设计一个答题的小游戏，每道题可以有20秒时间作答，超过时间就要给出相应的提醒，由于20秒时间太长，不适合做GIF动态图，下面来看一下我写的5秒倒计时的测试程序结果：

一、主体程序

!DOCTYPE

html

head