jquery组件和插件写法
2024-08-26 22:45:45
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="jquery-1.7.2.js"></script>
<script> $.fn.toRed = function(){
//插件里面的this 是jquery对象
this.css("background","red");
}; $.fn.toGreen = function(){
//插件里面的this 是jquery对象
this.css("background","green");
}; $(function(){
$("#div1").toggle(function(){
$(this).toRed();
},function(){
$(this).toGreen();
});
});
</script>
</head> <body> <div id="div1"></div> </body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="jquery-1.7.2.js"></script>
<script> $.fn.extend({
toRed:function(){
this.css("background","red");
},
toGreen:function(){
this.css("background","green");
}
}); $(function(){
$("#div1").toggle(function(){
$(this).toRed();
},function(){
$(this).toGreen();
});
});
</script>
</head> <body> <div id="div1"></div> </body>
</html>
<!--
智能社© - http://www.zhinengshe.com/ 微博：@北京智能社
微信：zhi_neng_she 最具深度的前端开发培训机构 HTML+CSS/JS/HTML5
--> <!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>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能社</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.7.2.js"></script>
<script src="slide.js"></script>
<script>
$(function(){
$("#play").slide();
$("#play2").slide();
});
</script>
</head> <body> <div class="play" id="play">
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/5.jpg" alt="广告五" /></a></li>
</ul>
</div> <div class="play" id="play2">
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/5.jpg" alt="广告五" /></a></li>
</ul>
</div>
</body>
</html>
//版权 北京智能社©, 保留所有权利
$.fn.slide = function (){
var $aBtn =this.find("ol li");
var $oUl = this.find("ul");
var $aLi = this.find("ul li");
var iNow = ;
var timer = setInterval(next,);
this.hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(next,);
});
function next(){
iNow++;
if(iNow == $aLi.length){
iNow = ;
}
tab();
}
$aBtn.mouseover(function(){
iNow = $(this).index();
tab();
});
function tab(){
$aBtn.removeClass("active");
$aBtn.eq(iNow).addClass("active");
$oUl.stop().animate({top:-$aLi.height()*iNow});
}
};
最新文章
- php操作mysql
- 从零开始学Python第七周：面向对象进阶（需修改）
- android HAL 教程（含实例）
- bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)
- 当kfreebsd 用户遇见openSUSE系统
- iOS7 兼容及部分细节
- imod报错：error while loading shared libraries: libjpeg.so.62的解决办法
- Java – 4 Security Vulnerabilities Related Coding Practices to Avoid---reference
- display：table 表格布局
- asp.net -mvc框架复习（4）-ASP.NET MVC中的约定规则
- 用Postman做自动化测试的功能
- LambdaToSql 发布 兰姆达转换sql
- git 中文文档 及测试命令
- windows docker常用命令
- RabbitMQ事物模式
- 剑指offer（30）连续子数组和的最大值
- Shell基础知识（六）
- 用CMD命令进行关机/重启
- Beta发布文案+美工
- OO第二阶段作业总结