<!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{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{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">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ul> <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li> </ul> </div> <div class="play" id="play2"> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ul> <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li> <li><a href="http://www.zhinengshe.com/"><img src="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 = 0; var timer = setInterval(next,1000); this.hover(function(){ clearInterval(timer); },function(){ timer = setInterval(next,1000); }); function next(){ iNow++; if(iNow == $aLi.length){ iNow = 0; } 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}); } };
