現(xiàn)在越來(lái)越多的網(wǎng)站運(yùn)用上了Jquery技術(shù),特別是在國(guó)外網(wǎng)站上Jquery運(yùn)用的已經(jīng)很成熟了,不緊提升了網(wǎng)站的精美度與用戶之間的互動(dòng)效果,把Jquery運(yùn)用到網(wǎng)站的局部效果上,還能大大的提升網(wǎng)站頁(yè)面上的體驗(yàn)效果。目前我們公司給大多客戶網(wǎng)站上都有體現(xiàn)這個(gè)效果,下面我就為大家分享下提升網(wǎng)站體驗(yàn)效果的5個(gè)Jquery效果,都是比較知名的國(guó)內(nèi)網(wǎng)站用來(lái)實(shí)現(xiàn)的效果。
第一個(gè):淘寶網(wǎng)站的搜索框Jquery教程效果
大家都知道淘寶網(wǎng)站上搜索框?qū)嵱弥幘筒挥谜f(shuō)了,以前的淘寶搜索框是一直固定在頁(yè)面頂部的,而現(xiàn)在只要用戶往下拉頁(yè)面,搜索框用Jqery技術(shù)一直保持在頁(yè)面的頂部,方便用戶的快速搜索,找到想要的商品。這效果不緊可以用在搜索框上,比如導(dǎo)航也是可以用這效果提供體驗(yàn)的。
在這提供個(gè)簡(jiǎn)單類(lèi)似Jquery代碼效果供參考:
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
if(t>80){ //當(dāng)頁(yè)面下拉到大于80的時(shí)候顯示下的DIV,默認(rèn)是隱藏的。
$(".fdnav").css({display:"block"});
}else{
$(".fdnav").css({display:"none"});
}
}
第二個(gè):網(wǎng)站側(cè)邊導(dǎo)航條Jquery教程效果的運(yùn)用。
這個(gè)對(duì)于大多數(shù)網(wǎng)站是個(gè)很實(shí)用的Jquery效果,比如在線客服、快速導(dǎo)航、返回頂部等等。看下圖的效果還不錯(cuò)吧!
側(cè)邊導(dǎo)航Jquery體驗(yàn)效果代碼供參考:
$(document).ready(function(){
$(".wsde").mouseover(function(){//class為wsde的默認(rèn)css是:position: fixed; right: 1px; width:57px; overflow: hidden;
$(".wsde").stop().animate({'width':'200px'});
});
$(".wsde").mouseleave(function(){
$(".wsde").stop().animate({'width':'57px'});
});
});
第三個(gè):網(wǎng)站圖片預(yù)加載Jquery教程效果:
很多時(shí)候網(wǎng)站的圖片比較多,一時(shí)加載不了顯示的是都是空白,為了提高用戶對(duì)網(wǎng)站的友好,Jquery中的圖片預(yù)加載功能就用上了。
html示例代碼:
<img data="這里是我們要顯示圖片的實(shí)際地址" src="這里是一張默認(rèn)顯示的小圖片,可以快速加載到頁(yè)面。可以是所有圖片使用統(tǒng)一的圖片也可以是要顯示圖片的縮略圖" alt="圖片名"/>
Jquery示例代碼:
$('img[data]').load(function(){//運(yùn)行Jquery庫(kù)中的默認(rèn)類(lèi)
var __this__ = $(this);
var url = __this__.attr('data');
var src = __this__.attr('src');
if(url ==''|| url == src)//這里判斷如果圖片實(shí)際地址不存在或者已經(jīng)加載不處理
{
return;
}
var img =newImage();//實(shí)例化一個(gè)圖片的對(duì)象
img.src = url;//將要顯示的圖片加載進(jìn)來(lái)
if(img.complete)//如果圖片已經(jīng)加載存在瀏覽器緩存中直接處理
{
__this__.attr('src',url);//將要顯示的圖片替換過(guò)來(lái)
return;
}
img.onload =function(){//要顯示的圖片加載完成后做處理
__this__.attr('src',url);
}
});
第四個(gè):自動(dòng)驗(yàn)證提交表單的Jqeury效果:
大部分網(wǎng)站都有提交表單:如會(huì)員登錄、會(huì)員注冊(cè)、在線留言等。用了下面的Jquery插件,用戶就能快速知道輸入的信息是否合法。
第五個(gè):網(wǎng)站上的select下拉菜單(二級(jí)select)美化體驗(yàn)Jquery效果:
這個(gè)是我本人為一公司網(wǎng)站制作的select下拉菜單,實(shí)際上是運(yùn)用了Jquery給表單input賦值。select是用Jquery模擬出來(lái)的效果。
select下拉菜單html部分示例代碼:
<div class="kscz1_1">請(qǐng)選擇游戲</div>
<div class="kscz1_2">請(qǐng)選擇面值</div>
<div class="kscz1_3">
<form class="woqu" action="/e/search/index.php" method="post" onSubmit="return checkSubmit();">
<input id="proid" type="hidden" name="proid" value="">
<input id="price" type="hidden" name="price" value="">
<input type="submit" class="dianji" value="">
</form>
</div>
<div class="kscz1_1se" >
<ul id="kscz1_1se">
<li price="50,20" proid="5">大專自衛(wèi)隊(duì)苛奪</li> //price中的為select二級(jí)選項(xiàng)
<li price="70,50,30" proid="33">磊地在傜</li>
</ul>
</div>
<div class="kscz1_1pri" >
<ul id="kscz1_1pri">
</ul>
</div>
<form class="woqu" action="" method="post" onSubmit="return checkSubmit();">
<input id="proid" type="hidden" name="proid" value="">
<input id="price" type="hidden" name="price" value="">
<input type="submit" class="dianji" value="">
</form>
主要CSS樣式,過(guò)其實(shí)的都不寫(xiě)出來(lái)了,這是兩個(gè)隱藏的下拉表div樣式:
.kscz1_1se {
overflow: hidden;
width: 214px;
height: 330px;
position: absolute;
border: 1px solid #E0E0E0;
left: 50%;
top: 0;
z-index: 1000;
display: none;
}
.kscz1_1pri {
overflow: hidden;
width: 94px;
height: 130px;
position: absolute;
border: 1px solid #E0E0E0;
left: 50%;
top: 0;
z-index: 1000;
display: none;
}
select下拉菜單Jquery部分代碼:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$(".kscz1_1").mouseover(function(){//鼠標(biāo)移到select上顯下拉效果
$(".kscz1_1se").css({display:'block'});
$("#kscz1_1se").css({display:'block'});
});
$(".kscz1_1se").mouseleave(function(){//鼠標(biāo)移出為隱藏下效果
$(this).css({display:'none'});
$(this).find("#kscz1_1se").css({display:'none'});
});
$(".kscz1_1se li").mousedown(function(){//選擇下拉中的一個(gè)選項(xiàng),進(jìn)行賦值,并對(duì)第二項(xiàng)下拉增加內(nèi)容
var value = $(this).attr("price");
var value2 = $(this).text();
var value3 = $(this).attr("proid");
var pricetext='';
pricenum = value.split(",");
for(var i=0;i<pricenum.length;i++)
{
pricetext=pricetext+'<li>'+pricenum[i]+'</li>';
}
$(".kscz1_1").html(value2);
$(".kscz1_1se").css({display:'none'});
$(".kscz1_1se").find("#kscz1_1se").css({display:'none'});
$("#kscz1_1pri").html(pricetext);
$(".kscz1_2").html('請(qǐng)選擇面值');
$("#proid").val(value3);
});
$(".kscz1_2").mouseover(function(){//對(duì)select二級(jí)賦值
if($(".kscz1_1").text()!='請(qǐng)選擇游戲'){$(".kscz1_1pri").css({display:'block'});}
});
$(".kscz1_1pri").mouseleave(function(){//隱藏select二級(jí)下拉表單
$(this).css({display:'none'});
});
$(".kscz1_1pri li").live('click',function(){//對(duì)select二級(jí)賦值及表單input為price賦值
var value2 = $(this).text();
$(".kscz1_2").html(value2);
$(".kscz1_1pri").css({display:'none'});
$("#price").val(value2);
});
});
function checkSubmit(){//驗(yàn)證提交表單
if (document.getElementById('proid').value=="") {
alert("請(qǐng)選擇游戲");
return false;
}
if (document.getElementById('price').value=="") {
alert("請(qǐng)選擇充值金額");
return false;
}
}
</SCRIPT>
注:上面的代碼采用到實(shí)際網(wǎng)站中必須加載Jquery.ja的主文件,其實(shí)現(xiàn)在國(guó)外很多網(wǎng)站運(yùn)用Jquery技術(shù),其最重要的是使用Jquery大大提高了網(wǎng)站用戶體驗(yàn)度,提升網(wǎng)站的用戶體驗(yàn)效果對(duì)改善網(wǎng)的PV也是有很大的好處。這里只是做個(gè)拋磚引玉,不緊是上面的5個(gè),其實(shí)還有很多網(wǎng)站頁(yè)面體驗(yàn)效果,都可以運(yùn)用Jquery來(lái)實(shí)現(xiàn)更好的用戶體驗(yàn)效果。