<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>写插件的栗子</title>
</head>
<body>
<img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0422/thumb_1_220_318_20150422091710455317.jpg" width="220" height="318" alt="神探驾到">
<img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0401/thumb_1_174_98_20150401051450832875.jpg" alt="" width="220" height="318">
<img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0422/thumb_1_220_318_20150422092027822146.jpg" alt="" width="220" height="318">
</body>
</html>
<script src="http://js.static.m1905.cn/core/jquery-edge.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.changeImgSrc = function(options){
var defaults = {
"data":"data-lazysrc",
‘border‘:"1px solid red"
};
//extend 是把options 和 defaults合并 取并集，在这config的结果其实就是defaults定义的对象，所以取值的时候可以直接config打点取到data border等自定义属性
// defaults = {
// "a" : 1,
// "b" : 2
// };
// options = {
// "a" : 1,
// "b" : 3
// };
// 那么config = {
// "a" : 1,
// "b" : 3
// }
// 以options最后自定义的为主优先级最高，defaults默认的其次
var config = $.extend({}, defaults, options);
return this.each(function(){
var lazysrc = $(this).attr(config.data);
$(this).attr(‘src‘,lazysrc).css("border",config.border);
})
}
$(‘img‘).changeImgSrc({
‘data‘:"data-lazysrc",
‘border‘:‘20px solid yellow‘
});
})(jQuery);
</script>
干前端两年了，第一次自己试着封装小插件，虽然有点迟但是依旧很兴奋！UP
时间： 2024-10-30 12:15:03