淺談jQuery效果函數(shù)
更新時間：2016年09月16日 12:05:41 投稿：jingxian
下面小編就為大家?guī)硪黄猨Query效果函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
jQuery有很多的效果可以實現(xiàn)，比如說淡入淡出的效果：<html>
<head>
<style>
#box{width:200px;height:200px;background:red;opacity:1;}
</style>
</head>
<body>
<div id="box">
</div>
<input type="button" value="隱藏/顯示"id="bt1"><br/><br/>
<input type="button" value="淡入"id="bt2"><br/><br/>
<input type="button" value="淡出"id="bt3"><br/><br/>
<input type="button" value="滑入"id="bt4"><br/><br/>
<input type="button" value="滑出"id="bt5"><br/><br/>
<input type="button" value="半透明"id="bt6"><br/><br/>
<input type="button" value="滑入/滑出"id="bt7"><br/><br/>
<input type="button" value="淡入入/淡出"id="bt7"><br/><br/>
</body>
<script src="jquery-1.6.js"></script>
<script>
$(function(){
$("#bt1").click(function(){
$("#box").toggle(1000)
}),
$("#bt2").click(function(){
$("#box").slideDown(1500)
}),
$("#bt3").click(function(){
$("#box").slideUp(1500)
}),
$("#bt4").click(function(){
$("#box").fadeIn(1000)
}),
$("#bt5").click(function(){
$("#box").fadeOut(1000)
}),
$("#bt6").click(function(){
$("#box").fadeTo(1500,0.4)
}),
$("#bt7").click(function(){
$("#box").fadeToggle(1000)
}),
$("#bt8").click(function(){
$("box").slideToggle(1500)
})
})
</script>
</html>
jQuery也可以來實現(xiàn)一個滾動字幕的效果，比如說下邊這個例子：<html>
<head>
<style>
#box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function(){
str="我是中國人"
$("#box").html(str)
setInterval(go,300)
function go(){
str=str.substr(1)+str.substr(0,1)
$("#box").html(str)
}
})
</script>
</html>
jQuery可以用來實現(xiàn)一個刪除功能的實現(xiàn),比如：<html>
<head>
<style>
#box{
width:400px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="box">
<p id="a">第一a</p>
<p>第二</p>
<p id="a">第三a</p>
<p>第四</p>
</div>
<button id="del">刪除</button>
<button id="cle">清空</button>
</body>
<script src="jquery-1.6.js"></script>
<script>
$(function(){
$("#del").click(
function(){
$("p").remove("#a")
});
$("#cle").click(
function(){
$("#box").empty()
});
})
</script>
</html>
jQuery還會做出一選課功能的實現(xiàn),比如:<html>
<head>
<title></title>
<style>
li{
list-style:none;
}
#you{
position:absolute;
left:300px;
top:10px;
}
ul{
position:absolute;
left:150px;
top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
$(function(){
$("button:first").click(function(){
$("#zuo>option:selected").prependTo($("#you"));
//$("#you").append($("#zuo>option:selected");
})
$("button:eq(1)").click(function(){
$("#you>option:selected").appendTo($("#zuo"));
//$("#you").append($("#zuo>option:selected");
})
$("button:eq(2)").click(function(){
$("#zuo>option").appendTo($("#you"));
})
$("button:eq(3)").click(function(){
$("#you>option").appendTo($("#zuo"));
})
$("button:eq(4)").click(function(){
//$("#zuo>option:first").before($("#zuo>option:selected"))
$("#zuo>option:selected").prependTo($("#zuo"));
})
$("button:eq(5)").click(function(){
// $("#zuo>option:last").after($("#zuo>option:selected"))
$("#zuo>option:selected").appendTo($("#zuo"));
})
$("button:eq(6)").click(function(){
$("#zuo>option:selected").prev().before($("#zuo>option:selected")) ;
})
$("button:eq(7)").click(function(){
$("#zuo>option:selected").next().after($("#zuo>option:selected")) ;
})
})
</script>
</head>
<body>
<select size="10" id="zuo" style="width:100px">
<option>職業(yè)英語</option>
<option>高等數(shù)學</option>
<option>大學語文</option>
<option>大學物理</option>
<option>計算機基礎</option>
<option>基本網(wǎng)頁設計</option>
<option>c語言程序設計</option>
<option>數(shù)據(jù)結(jié)構(gòu)</option>
<option>UI設計</option>
<option>產(chǎn)品腳本設計</option>
<option>產(chǎn)品腳本提高</option>
<option>產(chǎn)品腳本實戰(zhàn)</option>
</select>
<ul>
<li><button>選擇</button></li>
<li><button>退選</button></li>
<li><button>全選</button></li>
<li><button>全退</button></li>
<li><button>置頂</button></li>
<li><button>置底</button></li>
<li><button>上移</button></li>
<li><button>下移</button></li>
</ul>
<select size="10" id="you" style="width:100px">
</select>
</body>
</html>
jQuery還能夠?qū)崿F(xiàn)下滑框功能:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 領先的 Web 技術(shù)教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網(wǎng)站建設教程。</p>
</div>
<p class="flip">請點擊這里</p>
</body>
</html>
jQuery能夠?qū)崿F(xiàn)簡單的動畫效果：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery能實現(xiàn)一個動畫的開始與停止的功能:<html>
<head>
<style>
#box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}
</style>
</head>
<body>
<div id="box"></div>
<button id="bt">開始</button>
<button id="bt1">停止</button>
</body>
<script src="jquery-1.6.js"></script>
<script>
$(function(){
$("#bt").click(function(){
$("div").animate({left:"800px",top:"300px",width:"500px",height:"500px"},3000)
}),
$("#bt1").click(function(){
$("div").stop();
})
})
</script>
</html>
jQuery還能做一些向上輪播圖片廣告的功能:<html>
<head>
<style>
#box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}
ul{list-style:none;}
img{width:600px;height:300px;}
*{padding:0;margin:0;}
</style>
</head>
<body>
<div id="box">
<ul id="pic">
<li><img src="1.png"></li>
<li><img src="2.png"></li>
<li><img src="3.png"></li>
<li><img src="4.png"></li>
<li><img src="1.png"></li>
</ul>
</div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function(){
m=0;
p=setInterval(go,100)
function go(){
m+=20;
$("#pic").css("margin-top",-m+"px")
if(m>=1200){m=0}
}
})
</script>
</html>
jQuery還能實現(xiàn)兩個下拉展開于閉合的效果于一體的:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery 樂趣十足！</p>
<button>點擊這里</button>
</body>
</html>
以上就是我分享給大家的，謝謝。
關于這篇jQuery效果函數(shù)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
jquery中map函數(shù)與each函數(shù)的區(qū)別實例介紹
​jquery中的each函數(shù)和map函數(shù)的用法看起來差不多，但其實還是有一點區(qū)別的,each返回的是原來的數(shù)組，并不會新創(chuàng)建一個數(shù)組。而map方法會返回一個新的數(shù)組2014-06-06
jQuery實現(xiàn)鼠標經(jīng)過購物車出現(xiàn)下拉框代碼(推薦)
在做web前端項目開發(fā)的時候，使用jquery庫的感觸頗多，下面小編通過寫購物車的下拉框做法，把我的想法給大家分享一下，感興趣的朋友可以參考下2016-07-07
這篇文章主要介紹了jQuery多級彈出菜單插件ZoneMenu的使用方法，有需要的小伙伴可以參考下2014-12-12
使用ajax+jqtransform實現(xiàn)動態(tài)加載select
本文給大家介紹了使用ajax+jqtransform實現(xiàn)動態(tài)加載select，效果非常的不錯，這里推薦給大家，有需要的小伙伴直接拿走使用。2014-12-12
這篇文章主要介紹了jquery實現(xiàn)樹形菜單完整代碼,需要的朋友可以參考下2015-12-12
今天看到一個jquery插件jquery.fileupload.v.1.5.0，自己試著結(jié)合java做了一個ajax的文件上傳小應用2009-03-03
默認的html復選框控件樣式可定義相當有限，下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用2013-11-11
這篇文章主要給大家介紹了關于jquery兩種導入方式之本地導入和線上導入的相關資料,jQuery是一款JavaScript庫,封裝了JavaScript相關方法調(diào)用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
增強用戶體驗友好性之jquery easyui window 窗口關閉時的提示
在項目中，客戶提出這么個要求，就是在關閉彈出的窗口的時候，如果點擊 紅X 或 取消按鈕 則提示 ”確認保存了當前的操作“ 這么個信息，否則就不提示啦2012-06-06
jQuery對checkbox 復選框的全選全不選反選的操作
這篇文章主要介紹了jQuery對checkbox 復選框的全選全不選反選的操作 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08