<!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" /> <script type="text/javascript" src="../js/jquery-1.7.2.min.js" ></script> <title>无标题文档</title> <style> #panel{ position:relative; width:100px; height:100px; border:1px solid #0050D0; background:#96e555; cursor:pointer; } </style> <script> $(function(){ /* $("#panel").click(function(){ $(this).animate({left:"+=500px",height:"200px"},3000); }) */ $("#panel").css("opacity","0.5"); //设置透明度 $("#panel").click(function(){ $(this).animate({left:"500px",height:"200px",opacity:"1"},1000).animate({top:"200px","200px"},3000).fateIn().hide(1000); }) }) </script> </head> <body> <div id="panel"> </div> </body> </html>
<!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" /> <script type="text/javascript" src="../js/jquery-1.7.2.min.js" ></script> <title>无标题文档</title> <script> $(function(){ $("#panel").toggle(function(){ $("#panel h5.head").slideDown().fadeOut().show(1000); }, function(){$("#panel h5.head").slideUp().fadeIn().hide(1000); } ) }) </script> <style> #panel{width:100px;height:100px;background:green;} h5{width:100px;height:300px;background:red;} </style> </head> <body> <div id="panel"> <h5 class="head"></h5> </div> </body> </html>
<!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>无标题文档</title> <script type="text/javascript" src="../js/jquery-1.7.2.min.js" ></script> <script> var page=1; var i=4; //每个版面四张 $("span.next").click(function(){ //根据当前的元素获取到父元素 var $parent=$(this).parents("div.v_show"); //找到视频内容展示区域 var $v_show=$parent.find("div.v_content_list"); //找到外围的div var $v_content=$parent.find("div.v_content"); var v_width=$v_content.width(); var len=$v_show.find("li").length; var page_count=Math.ceil(len/i); //判断是否处于动画状态 if(!$v_show.is(":animate")){ //判断是否到了最后的一个版面了 if(page=page_count){ $v_show.animate({left:"0px"},"slow"); page=1; }else{ $v_show.animate({left:"-="+v_width},"slow"); page++; } } // $parent.find("span").eq((page-1)).addClass("current") .siblings().removeClass("current"); }) </script> </head> <body> <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="change_btn"> <span class="prev">上一页</span> <span class="next">下一页</span> </div> <em><a href="#">更多》》</a></em> </div> <div class="v_content"> <ul> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> </ul> </div> </div> </body> </html>