我们先写实例，然后可能需要在封装为插件，最后做更高级的处理！
封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688
1-7实例地址 http://my.oschina.net/u/2352644/blog/490827
8-17实例地址 http://my.oschina.net/u/2352644/blog/491933
效果目录：
18.计数增加效果
19.模仿3d的焦点图效果
20.倒计时效果
21.导航滚动监听
18.计数增加效果
我们在浏览网页，有的页面会有对会员注册人数的显示，并且是从0增加到指定值的，动态增长
其实原理很简单，我们指定目标值，然后指定增长速度，间隔函数不断从0开始累加增长速度，超过目标值清空间隔函数即可！
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
/*
cdom 获取外围对象
cont 获取显示数字
speed 设置循环次数
cdom 设置动画延时
cdom 设置数字间距，存在时speed参数无效
*/
function count(cdom,cont,speed,interspe,speedt){
var speedb=speedt?speedt:Math.ceil(cont/speed);
var coni=0;
var jsq=setInterval(function(){
if(coni>=cont){cdom.html(cont);clearInterval(jsq)}else{
cdom.html(coni);coni+=speedb;}
},interspe)
};
//call fun
count($(".cont"),$(".cont").attr("data"),10,50);
count($(".cont1"),$(".cont1").attr("data"),10,50);
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.nm{ height:100px; width:100px;opacity:0.5; filter:alpha(opacity=50); background:#09F;}
#ckepop{ height:200px; width:200px; background:#3F9;}
</style>
</head>
<body>
<br>
<div class="cont" style="height:100px; line-height:100px; text-align:center; width:500px;background:#69F;font-size:50px; color:#fff; font-weight:bold;" data="54752"></div>
<div class="cont1" style="height:100px;line-height:100px; text-align:center; width:500px;background:#69F;font-size:50px;color:#fff; font-weight:bold;" data="8975"></div>
</body>
</html>
19.模仿3d的焦点图效果
这样一种焦点图效果，中间的比较大，两侧依次变小，并且被压住一部分，
原理：点击触发切换，将所有元素通过jq的each遍历，判断当前的位置，根据切换方向，对当前位置、层高。大小等属性做出css的更改
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
$("#Main").click(function(event){
var med=$("#Main").offset().left,medw=$("#Main").width(),medl=med+medw/2,medr=med+medw;
var el=event.pageX;
if(el>med&&el<medl){
Turns("left")}
else if(el>medl&&el<medr){
Turns("right")}
});
//end
});
var isMoving=false;
var isfa=function(){isMoving = false};
function Turns(fangxiang) {
if (isMoving == false) {
isMoving = true;
//start
var tindex1=1,tindex2=2,tindex3=10,tindex4=5,tindex5=0;
var anim5=function(){
target.css("z-index", tindex5);
target.animate({width:"150px",height:"100px",marginTop:"75px",marginLeft:"1000px"}, 800,isfa);
};
var anim2=function(){
target.css("z-index", tindex2);
target.animate({width:"250px",height:"175px",marginTop:"35px",marginLeft:"150px"}, 800,isfa);
};
var anim3=function(){
target.css("z-index", tindex3);
target.animate({width:"350px",height:"250px",marginTop:"0px",marginLeft:"400px"}, 800,isfa);
};
var anim4=function(){
target.css("z-index", tindex4);
target.animate({width:"250px",height:"175px",marginTop:"35px",marginLeft:"750px"}, 800,isfa);
};
var anim1=function(){
target.css("z-index", tindex1);
target.animate({width:"150px",height:"100px",marginTop:"75px",marginLeft:"0px"}, 800,isfa);
};
if(fangxiang=="left"){
for (var i = 0; i < $(".wheelItem").length; i++) {
var target = $(".wheelItem").eq(i);
if (target.css("margin-left") == "0px" || target.css("margin-left") == "auto") {
anim5();
} else if (target.css("margin-left") == "150px") {
anim1();
} else if(target.css("margin-left")=="400px"){
anim2();
}else if(target.css("margin-left")=="750px"){
anim3();
}else if(target.css("margin-left")=="1000px"){
anim4();
}
}
}
//cc
if(fangxiang=="right"){
for (var i = 0; i < $(".wheelItem").length; i++) {
var target = $(".wheelItem").eq(i);
if (target.css("margin-left") == "0px" || target.css("margin-left") == "auto") {
anim2();
} else if (target.css("margin-left") == "150px") {
anim3();
} else if(target.css("margin-left")=="400px"){
anim4();
}else if(target.css("margin-left")=="750px"){
anim5();
}else if(target.css("margin-left")=="1000px"){
anim1();
}
}
}
//end
}
}
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
#Main{width:1180px;height:300px;margin:0 auto;margin-top:100px;}
.wheelItem{float:left;position:absolute;border:2px solid #fff;}
.img1{width:150px;height:100px;margin-top:75px;margin-left:0px;}
.img2{width:250px;height:175px;margin-top:35px;margin-left:150px;}
.img3{width:350px;margin-left:400px;height:250px;z-index:10;}
.img4{width:250px;height:175px;margin-left:750px;margin-top:35px;z-index:9;}
.img5{width:150px;margin-left:1000px;height:100px;margin-top:75px;}
</style>
</head>
<body>
<div id="Main">
<img class="wheelItem img1" src="http://h.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=deceb63ade54564ee530b779d5e3a8b0/5ab5c9ea15ce36d342a3091939f33a87e950b170.jpg"/>
<img class="wheelItem img2" src="http://a.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=5a2d9b6a88d4b31cf069c7fbe1eb134d/cc11728b4710b912d83c76d7c0fdfc039245221d.jpg"/>
<img class="wheelItem img3" src="http://b.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=33201307abd3fd1f365cf17a5673112d/b17eca8065380cd7208822c4a244ad3459828101.jpg"/>
<img class="wheelItem img4" src="http://f.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=d774260ab37eca8012506aa7f71ea3ef/1e30e924b899a901296ddb1f1e950a7b0208f5bb.jpg"/>
<img class="wheelItem img5" src="http://d.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=55c411d57fd98d1076815f7147028c3c/f603918fa0ec08fa2a24948e5aee3d6d55fbdaf7.jpg"/>
</div>
</body>
</html>
20.倒计时效果
倒计时的原理：传入指定时间（当前做秒数的处理），调用间隔函数，执行时间为一秒；秒数时间/60获取分钟，秒数时间%60取得余数，得到秒数，
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
function timeend(classname,maxtime){
var timer = setInterval(countDown,1000);
countDown();
function countDown(){
if(maxtime>=0){
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
msg = "距离结束还有"+minutes+"分"+seconds+"秒";
classname.html(msg);
if(maxtime == 5*60)
{alert(‘注意，还有5分钟!‘);}
maxtime--;
}else{
clearInterval(timer);
classname.html("时间到，结束!");
}
};
};
timeend($(‘.timeend1‘),24*60);
timeend($(‘.timeend2‘),50*60);
timeend($(‘.timeend3‘),48*60);
timeend($(‘.timeend4‘),6*60);
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.timer{ height:40px; line-height:40px; margin:40px;}
</style>
</head>
<body>
<div style="color:red" class="timer timeend1"></div>
<div style="color:red" class="timer timeend2"></div>
<div style="color:red" class="timer timeend3"></div>
<div style="color:red" class="timer timeend4"></div>
</body>
</html>
21.导航滚动监听
原理：window监听滚动事件，返回滚动值；创建数组，存放所有标题锚点相对页面顶部的top值；滚动值与所有锚点top值做差值，获取最小值在数组位置
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var navarr=[];
$(".con .con-title a").each(function(index, element) {
navarr[index]=($(this).offset().top);
});
$(window).scroll(function(){
var scrolltop=$(window).scrollTop();
scrolllin(scrolltop);
});
function scrolllin(scrolltop){
var temparr=[];
$.each(navarr, function(i, n){
temparr[i]=Math.floor(Math.abs(scrolltop-navarr[i]));
});
console.log(temparr)
minaddclass(temparr);
};
function minaddclass(temparr){
var ind=returnin(temparr);
$(".nav").children().eq(ind).addClass("focus").siblings().removeClass("focus");
};
function returnin(temparr){
var minval=Math.min.apply(null,temparr);
var resval;
for(var i=0;i<temparr.length;i++){
if(temparr[i]==minval){
resval=i;
}else{}
};
return resval
};
$(".nav").children().click(function(){
$(this).addClass("focus").siblings().removeClass("focus");
});
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.nav{ position:fixed; right:0px; top:200px; width:100px; height:200px; line-height:40px; background:#000; opacity:0.6;}
.nav a{ float:left; margin:0 10px; color:#09F; width:100px; height:40px;}
.nav a.focus{ color:#F03;}
.box{}
.con{ height:400px;}
.con .con-title{ height:40px; line-height:40px; font-size:14px; text-indent:20px;}
.con .con-title a{}
</style>
</head>
<body>
<div class="nav">
<a href="#h1" class="focus" idlink="h1">html章节</a>
<a href="#h2" idlink="h2">css章节</a>
<a href="#h3" idlink="h3">js章节</a>
<a href="#h4" idlink="h4">jquery章节</a>
<a href="#h5" idlink="h5">jq实例开发</a>
</div>
<div class="box">
<div class="con">
<div class="con-title">
<a id="h1">html章节</a>
</div>
</div>
<div class="con">
<div class="con-title">
<a id="h2">css章节</a>
</div>
</div>
<div class="con">
<div class="con-title">
<a id="h3">js章节</a>
</div>
</div>
<div class="con">
<div class="con-title">
<a id="h4">jquery章节</a>
</div>
</div>
<div class="con">
<div class="con-title">
<a id="h5">jq实例开发</a>
</div>
</div>
</div>
<div style="height:300px;">footer</div>
</body>
</html>
时间： 2024-08-16 16:54:35