建站
咨詢
售后
建站咨詢
新聞中心
jquery鼠標(biāo)滑過停止，離開繼續(xù)切換， 幫我寫一個(gè) 謝謝。
function StopScrolll() //當(dāng)鼠標(biāo)移動(dòng)到對(duì)象上面的時(shí)候停止自動(dòng)滾動(dòng)
睢寧縣網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司從2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
{
clearTimeout(beauBeauSlide);
}
JQUERY 實(shí)現(xiàn) 鼠標(biāo)滑過 文字陰影效果
你可以這樣，先定義一個(gè)樣式，比如: .c { text-shadow:0 0 20 white;}
當(dāng)鼠標(biāo)滑入的時(shí)候就給當(dāng)前滑入的塊加一個(gè)class，滑出后再把class去掉，根據(jù)分析，我們可以寫出如下jQuery,代碼如下：
$("#test1").hover(function(){
$(this).addClass("c")
}, function(){
$(this).removeClass("c");
}
)
Jquery幻燈片特效代碼分享--鼠標(biāo)滑過按鈕時(shí)切換（2）
這篇文章主要介紹了jQuery實(shí)現(xiàn)幻燈片焦點(diǎn)圖，可實(shí)現(xiàn)非常炫目時(shí)尚的幻燈片效果，非常具有實(shí)用價(jià)值，基本能滿足你在網(wǎng)頁上使用幻燈片(焦點(diǎn)圖)效果，具體如下
幻燈片效果描述：用鼠標(biāo)滑過右下角數(shù)字按鈕幻燈片進(jìn)行左右切換進(jìn)行切換。
自定義切換參數(shù)效果：向下切換、切換時(shí)間為8秒、鼠標(biāo)滑過按鈕時(shí)切換
運(yùn)行效果截圖如下：
具體代碼如下
head
titleJquery幻燈片焦點(diǎn)圖插件/title
script
src="js/jquery-1.4a2.min.js"
type="text/javascript"/script
script
src="js/jquery.-1.2.1.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function(){
$("#KinSlideshow").KinSlideshow({
moveStyle:"down",
intervalTime:8,
mouseEvent:"mouseover",
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}
});
})
/script
style
type="text/css"
.code{
height:auto;
padding:20px;
border:1px
solid
#9EC9FE;
background:#ECF3FD;}
.code
pre{
font-family:"Courier
New";font-size:14px;}
.code
pre
code.note{
color:#999}
.code2{border:1px
solid
#FEB0B0;
background:#FFF1F1;
margin-top:10px;}
.code2
pre{
margin-left:20px;
font-size:12px;}
.info{
font-size:12px;
color:#666666;
font-family:Verdana;
margin:20px
50px
0;}
.info
p{
margin:0;
padding:0;
line-height:22px;
text-indent:40px;}
h2.title{
margin:0;
padding:0;
margin-top:50px;
font-size:18px;
font-family:"微軟雅黑",Verdana;}
h2.title
span.titleInfo{
font-size:12px;
color:#333;
margin-left:10px;font-family:Verdana;}
h3.title{
font-size:16px;
font-family:"微軟雅黑",Verdana;}
.importInfo{
font-family:Verdana;
font-size:14px;}
/style
/head
body
lih3a
href="demo2.html"自定義切換參數(shù)效果/a/h3/li
/ol
div
id="KinSlideshow"
style="visibility:hidden;"
a
target="_blank"img
src="images/11.png"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/23.png"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/22.png"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/5.jpg"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/4.jpg"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
/div
/body
/html
希望本文所述對(duì)大家的Jquery特效設(shè)計(jì)有所幫助。
jQuery 鼠標(biāo)滑過執(zhí)行一個(gè)函數(shù)，當(dāng)鼠標(biāo)在某元素上多次快速的滑過，鼠標(biāo)離開，函數(shù)仍在執(zhí)行……
添加stop()方法即可解決
看我中午寫的例子：
!DOCTYPE?HTML
html
head
title已測(cè)試，都可以顯示/title
meta?charset=UTF-8?/
style?type="text/css"
.menu?{
position:?relative;
width:?100%;
height:?50px;
background:?#efefef;
z-index:?999;
}
.menu?.nav?{
position:?relative;
width:?100%;
height:?50px;
/*?left:50%;
margin-left:-500px;?*/
}
.menu?.nav?li?{
float:?left;
font-size:?18px;
width:?140px;
}
.menu?.nav?li?a?{
float:?left;
display:?block;
height:?50px;
padding:?0?30px;
line-height:?50px;
color:?#333;
text-decoration:?none;
position:?relative;
overflow:?hidden;
transition:?0.5s?ease;
-webkit-transition:?0.5s?ease;
}
.menu?.nav?li?a:hover,.menu?.nav?li?a.current?{
background:?#8ecb8d;
color:?#fff;
}
.menu?.nav?li?.box?{
width:?100%;
height:?35px;
position:?absolute;
top:?50px;
/*?left:?203px;
*left:?198px;
left:?198px\0;?*/
background-color:?rgba(0,?0,?0,?0.4)?!important;
background-color:rgb(0,0,0);
filter:?Alpha(opacity?=?40);
display:?none;
font-size:?16px;
z-index:?999;
}
.menu?.nav?li?.box?a?{
display:?block;
height:?35px;
color:?#fff;
line-height:?35px;
border:?none;
background:?none;
padding:?0;
width:?114px;
text-align:?center;
}
.menu?.nav?li?.box?a:hover?{
text-decoration:?underline;
color:?#8ecb8d;
}
ul?{
list-style:?none;
}
/style
script?type="text/javascript"?src="jquery-1.8.0.min.js"/script
script?type="text/javascript"
jQuery?(function?($)
{
$?(".menu?.nav?li").hover?(function?()
{
$(this).find?("a").addClass?("current").end().find?(".box").stop().slideDown?(140);
},function?()
{
$(this).find?("a").removeClass?("current").end().find?(".box").stop().slideUp?(140);
});
})
/script
/head
body
div?class="menu"
ul?class="nav"
lia?href="#"網(wǎng)站首頁/a/li
lia?href="#"概況介紹/a
div?class="box"
a?href="#"院系簡介/a?a?href="#"機(jī)構(gòu)設(shè)置/a?a?href="#"現(xiàn)任領(lǐng)導(dǎo)/a
/div/li
lia?href="#"黨建工作/a
div?class="box"
a?href="#"支部設(shè)置/a?a?href="#"黨員教育/a?a?href="#"書記信箱/a?a?href="#"榮譽(yù)獎(jiǎng)勵(lì)/a
/div/li
lia?href="#"教學(xué)工作/a
div?class="box"
a?href="#"專業(yè)設(shè)置/a?a?href="#"師資隊(duì)伍/a?a?href="#"實(shí)習(xí)基地/a?a?href="#"教學(xué)成果/a
/div/li
lia?href="#"教學(xué)資源/a
div?class="box"
a?href="#"教材專著/a?a?href="#"重點(diǎn)課程/a?a?href="#"主干課程/a
/div/li
lia?href="#"科研工作/a
div?class="box"
a?href="#"科研課題/a?a?href="#"科研論文/a?a?href="#"科研條件/a
/div
lia?href="#"招生就業(yè)/a
div?class="box"
a?href="#"招生情況/a?a?href="#"就業(yè)概況/a?a?href="#"就業(yè)信息/a
/div
lia?href="#"聯(lián)系交流/a
div?class="box"
a?href="#"合作交流/a?a?href="#"系友通訊/a?a?href="#"對(duì)外服務(wù)/a
/div/li
/ul
/div
/body
/html
標(biāo)題名稱：jquery鼠標(biāo)滑過,jquery鼠標(biāo)按下與松開事件
文章來源：http://www.dlmjj.cn/article/dsejdee.html
