jquery特效

最新推荐文章于 2024-05-16 10:00:15 发布

我叫吴桂鑫

最新推荐文章于 2024-05-16 10:00:15 发布

阅读量332

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/baidu_36583119/article/details/80540358

版权

jquery 专栏收录该内容

6 篇文章 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>无标题文档</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
	
	   alert("我编写的第一个jQuery程序！");
	   //选择器数组的each方法和$(this)的运用
	   $(".title").each(function(){
		    //点击事件
		    $(this).click(function(){
				  //获取标签元素的css值
		          $(this).next().toggle();//可以切换元素的可见状态
			});
			//鼠标over事件
			$(this).mouseover(function(){
			      $(this).css("color","white");	
			});
			//鼠标out事件
		    $(this).mouseout(function(){
			      $(this).css("color","black");	
			});
	   });
	   //选取索引是偶数的li元素，索引从0开始
	   $(".content li:even").css("background-color","white");
	   //选取索引是奇数的li元素
	   $(".content li:odd").css("background-color","lightgray");
	   //表单事件-获取焦点事件
	   $("input[type=text]").focus(function(){
		   $(this).css("background-color","#3FF");
	   });
	   //表单事件-失去焦点事件
	   $("input[type=text]").blur(function(){
		   $(this).css("background-color","white");
	   });
	   //绑定方法
	   $(".second div").each(function(){
		   $(this).bind(
		       {   
		         mouseover:function(){$(this).css("background-color","#06F");}, 
				 mouseout:function(){$(this).css("background-color","#09F");}  
			   }
		   );
	   });
	   //悬停事件
	   //多次Click事件
	   //淡入淡出方法
	   $("#talk span").each(function(){
		   $(this).fadeIn(1000);//淡入
		   setTimeout(function(){return;},5000);
		   $(this).animate({marginLeft:'1000px'},8000,'swing');//动画
		   $(this).fadeOut(1000);//淡出
	   });
	   //setInterval("alert('123')",4000);
	   //向上向下滑动方法
	   $(".first").each(function(){
		      $(this).click(function(){
				     if($(this).next().css("display")=="none"){
				          $(this).next().slideDown("fast");
					 }
				      else
					      $(this).next().slideUp("fast");
			  });
	   });
});


</script>
<style>
*{padding;0;margin:0;}
.title{
	background-color:#F9F;
	cursor:pointer;
}
.content{
	background-color:#F9F;
	display:none;
}
#hesder{
	text-align:center;
}




/*左导航栏*/
#nav{
	outline:solid;
	outline-color:#F90;
	width:200px;
	left:0px;
}
#nav .first{
	width:200px;
	background-color:#06F;
	text-align:center;
	color:white;
	line-height:40px;
}
#nav .second{ display:none;}
#nav .second ul li div{
	background-color:#09F;
	width:200px;
	text-align:center;
	color:white;
	border-top:1px solid white;
	line-height:30px;
}
#nav .second ul li{list-style-type:none;}
#nav .second ul{padding:0;}

#talk span{
	margin-left:0px;
	display:none;
}
</style>
</head>
  
<body>
<div id="hesder">
     <h1>诗歌  <span><input type="text"/></span></h1>
</div>

<div id="content">
     <div class="title"><h2>1.如何使用淘宝网购物？</h2></div>
     <div class="content">
        <ul>
           <li>第一步：下载并安装手机淘宝客户端</li>
           <li>第二步：注册淘宝帐号</li>
           <li>第三步：下载并安装支付宝</li>
           <li>第四步：注册支付宝帐号，绑定淘宝帐号</li>
        </ul>
     </div>
     <div class="title"><h2>2.如何使用淘宝网购物？</h2></div>
     <div class="content">
        <ul>
           <li>第一步：下载并安装手机淘宝客户端</li>
           <li>第二步：注册淘宝帐号</li>
           <li>第三步：下载并安装支付宝</li>
           <li>第四步：注册支付宝帐号，绑定淘宝帐号</li>
        </ul>
     </div>
     <div class="title"><h2>3.如何使用淘宝网购物？</h2></div>
     <div class="content">
        <ul>
           <li>第一步：下载并安装手机淘宝客户端</li>
           <li>第二步：注册淘宝帐号</li>
           <li>第三步：下载并安装支付宝</li>
           <li>第四步：注册支付宝帐号，绑定淘宝帐号</li>
        </ul>
     </div>
     <hr /> 
     <!--左导航栏-->
     <div id="nav">
               <div class="first"><h4>购物特权</h4></div>
               <div class="second">
                  <ul>
                   <li><div>全额兑换</div></li>
                   <li><div>俱乐部包邮卡</div></li>
                   <li><div>购物领金币</div></li>
                   <li><div>每日领金币</div></li>
                   <li><div>VIP阶梯价</div></li>
                  </ul>
               </div>
               <div class="first"><h4>购物特权</h4></div>
               <div class="second">
                  <ul>
                   <li><div>全额兑换</div></li>
                   <li><div>俱乐部包邮卡</div></li>
                   <li><div>购物领金币</div></li>
                   <li><div>每日领金币</div></li>
                   <li><div>VIP阶梯价</div></li>
                  </ul>
               </div>    
     </div>
     <!--评论流动-->
     <div id="talk"> 
        <div><span>吃瓜群众。。。。</span><span>你好，行星，我是恒星。。。。</span></div>
        <div><span>墙都不扶，就服你。。。。</span><span>吃屎啦！梁飞凡！</span></div>
     </div>
</div>

<div id="footer"></div>
</body>
</html>

我叫吴桂鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery特效

<!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...
复制链接

扫一扫