要實(shí)現(xiàn)簡單的跑馬燈效果其實(shí)運(yùn)用html中marquee/marquee標(biāo)簽就可以達(dá)到了
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),溧陽企業(yè)網(wǎng)站建設(shè),溧陽品牌網(wǎng)站建設(shè),網(wǎng)站定制,溧陽網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,溧陽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
基本屬性如下：
1.滾動(dòng)方向direction（包括4個(gè)值：up、 down、 left和 right）
2.滾動(dòng)方式behavior（scroll:循環(huán)滾動(dòng)，默認(rèn)效果； slide:只滾動(dòng)一次就停止； alternate:來回交替進(jìn)行滾動(dòng)）
3.滾動(dòng)速度scrollamount（滾動(dòng)速度是設(shè)置每次滾動(dòng)時(shí)移動(dòng)的長度，以像素為單位）
4.滾動(dòng)延遲scrolldelay（設(shè)置滾動(dòng)的時(shí)間間隔，單位是毫秒）
5.滾動(dòng)循環(huán)loop（默認(rèn)值是-1，滾動(dòng)會(huì)不斷的循環(huán)下去）
6.滾動(dòng)范圍width、height
7.滾動(dòng)背景顏色bgcolor
8.空白空間hspace、vspace
如果想要更多的動(dòng)畫效果，更多選擇jquery.marquee.js這款插件——ul里的啥都能滾并自帶懸停效果
1.html 中寫入ul id="marquee"li/li/ul
2.js中調(diào)入$("#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.相關(guān)參數(shù)如下：
{
yScroll:"top"; ?//?初始滾動(dòng)方向?(還可以是"top"?或?"bottom")
showSpeed:850; ?//?初始下拉速度
scrollSpeed:12; ?//?滾動(dòng)速度
pauseSpeed:5000; ?//?滾動(dòng)完到下一條的間隔時(shí)間
pauseOnHover:true; ?//?鼠標(biāo)滑向文字時(shí)是否停止?jié)L動(dòng)
loop:-1; ?//?設(shè)置循環(huán)滾動(dòng)次數(shù)?（-1為無限循環(huán)）
fxEasingShow:"swing"; ?//?緩沖效果
fxEasingScroll:"linear"; ?//?緩沖效果
cssShowing:"marquee-showing"; ?//定義class event handlers
init:null; ?//?初始調(diào)用函數(shù)
beforeshow:null; ?//?滾動(dòng)前回調(diào)函數(shù)
show:null; ?//?當(dāng)新的滾動(dòng)內(nèi)容顯示時(shí)回調(diào)函數(shù)
aftershow:null; ?//?滾動(dòng)完了回調(diào)函數(shù)
}
本文實(shí)例講述了JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果。分享給大家供大家參考，具體如下：
一個(gè)實(shí)現(xiàn)了在按鈕上顯示倒計(jì)時(shí)，倒計(jì)時(shí)完畢自動(dòng)將按鈕設(shè)置為不可用的效果，具體代碼如下：
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!");
if
(count
==
0)
{
$("#btn").val("Submit").removeAttr("disabled");
clearInterval(countdown);
}
count--;
}
})
});
/script
/head
body
input
type="button"
id="btn"
value="Submit"
/
/body
/html
運(yùn)行效果截圖如下：
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
這個(gè)功能在現(xiàn)在的網(wǎng)站中使用較為普遍，就是以選項(xiàng)卡的形式來對(duì)一些內(nèi)容做了分類。，比如下面的天貓商城。
下面的源碼是仿照天貓寫的一個(gè)選項(xiàng)卡，實(shí)現(xiàn)起來的效果如下。
主要是利用我們在點(diǎn)擊相應(yīng)板塊是觸發(fā)它的單擊事件，在單擊事件中再對(duì)內(nèi)容顯示框(tabbox)進(jìn)行相應(yīng)項(xiàng)的顯示和隱藏操作。
同時(shí)利用hover為其添加了鼠標(biāo)滑過時(shí)的效果。
代碼：
!DOCTYPE
html
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
ul
li");
$div_li.click(function
()
{
//定義了tan_menu對(duì)應(yīng)的單擊事件，也就是類別的單擊事件。
$(this).addClass("selected")
.siblings().removeClass("selected");
var
index
=
$div_li.index(this);
$("div.tab_boxdiv").eq(index).show()
.siblings().hide();
}).hover(function
()
{
//定義了鼠標(biāo)滑過特效
$(this).addClass("hover");
},
function
()
{
$(this).removeClass("hover");
});
});
/script
/head
body
div
class="tab"
div
class="tab_menu"
ul
li
class="selected"時(shí)事/li
li體育/li
li娛樂/li
/ul
/div
div
class="tab_box"
div時(shí)事/div
div
class="hide"體育/div
div
class="hide"娛樂/div
/div
/div
/body
/html
以上就是本文的全部內(nèi)容，希望對(duì)大家熟練掌握實(shí)現(xiàn)選項(xiàng)卡切換的技巧有所幫助。
首先獲取當(dāng)前時(shí)間與目標(biāo)時(shí)間的時(shí)間差，然后通過定時(shí)器更新這個(gè)時(shí)間差，就實(shí)現(xiàn)了倒計(jì)時(shí)效果。實(shí)現(xiàn)上述過程需要以下兩個(gè)函數(shù)：
getTime() // 返回距1970年1月1日之間的毫秒數(shù)，這樣將時(shí)間差（毫秒數(shù)）÷3600÷24即為天數(shù)，時(shí)分秒類似setTimeout(code,millisec); // 在指定的毫秒數(shù)后調(diào)用函數(shù)實(shí)例演示如下
創(chuàng)建Html元素
div class="box" span距離2015年國慶節(jié)還剩：/spanbr div class="content" input type="text" id="time_d"天input type="text" id="time_h"時(shí)input type="text" id="time_m"分input type="text" id="time_s"秒 /div/div設(shè)置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(); //設(shè)定當(dāng)前時(shí)間 var time_end = new Date("2015/10/01 00:00:00").getTime(); //設(shè)定目標(biāo)時(shí)間 // 計(jì)算時(shí)間差 var time_distance = time_end - time_start; // 天 var int_day = Math.floor(time_distance/86400000) time_distance -= int_day * 86400000; // 時(shí) 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) // 時(shí)分秒為單數(shù)時(shí)、前面加零 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; } // 顯示時(shí)間 $("#time_d").val(int_day); $("#time_h").val(int_hour); $("#time_m").val(int_minute); $("#time_s").val(int_second); // 設(shè)置定時(shí)器 setTimeout("show_time()",1000); }觀察效果
某個(gè)時(shí)刻的截圖
幾秒后的截圖
設(shè)計(jì)一個(gè)答題的小游戲，每道題可以有20秒時(shí)間作答，超過時(shí)間就要給出相應(yīng)的提醒，由于20秒時(shí)間太長，不適合做GIF動(dòng)態(tài)圖，下面來看一下我寫的5秒倒計(jì)時(shí)的測試程序結(jié)果：
一、主體程序
!DOCTYPE
html
html
head
meta
charset="utf-8"
/
title手寫倒計(jì)時(shí)程序/title
link
rel="stylesheet"
type="text/css"
href="css/layout.css"/
/head
body
section
class="countDown"
span
id="countDownTime"/span
section
class="clear"/section
/section
script
src="js/jquery-1.11.0.js"
type="text/javascript"
charset="utf-8"/script
script
src="js/layout.js"
type="text/javascript"
charset="utf-8"/script
/body
/html
二、CSS樣式
*{
margin:
0;
padding:0;
}
html{
font-size:
12px;
}
.countDown{
width:
3.8rem;
text-align:
center;
margin:
2rem
auto
auto;
}
.countDown
#countDownTime{
font-size:
2rem;
}
三、Jquery程序
先來說一下倒計(jì)時(shí)的原理：
1、將時(shí)間轉(zhuǎn)為0:0格式
2、需要開啟一個(gè)定時(shí)器，每隔1000ms就讓時(shí)間自動(dòng)減1
3、判斷時(shí)間是否為0，如果為0則代表計(jì)時(shí)結(jié)束，此時(shí)需要給出提示或者做其他事情
下面來看具體實(shí)現(xiàn)的倒計(jì)時(shí)程序：
$(function(){
var
countDownTime=parseInt(5);
//在這里設(shè)置每道題的答題時(shí)長
function
countDown(countDownTime){
var
timer=setInterval(function(){
if(countDownTime=0){
showTime(countDownTime);
countDownTime--;
}else{
clearInterval(timer);
alert("計(jì)時(shí)結(jié)束,給出提示");
}
},1000);
}
countDown(countDownTime);
function
showTime(countDownTime){
//這段是計(jì)算分和秒的具體數(shù)
var
minute=Math.floor(countDownTime/60);
var
second=countDownTime-minute*60;
$("#countDownTime").text(minute+":"+second);
}
})
帶著我寫的原理再去看這段JS程序估計(jì)比較容易吧，希望對(duì)小伙伴有幫助。
var a = $('#你的div id');
a.slideDown("slow");
語法：
$(selector).slideDown(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
重慶分公司
重慶分公司
