jQuery案例专题

最新推荐文章于 2024-06-27 00:06:13 发布

pumpkin_truck

最新推荐文章于 2024-06-27 00:06:13 发布

阅读量358

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/pumpkin_truck/article/details/134233947

版权

jQuery案例专题

本学期主要担任的课程是js和jQuery，感觉用到的有一些案例挺有意思的，就对其进行了一下整理。

电影院的幕帘特效
手风琴特效
星光闪烁
网页轮播图

1.电影院的幕帘特效代码如下

`html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>幕帘效果</title>
</head>
<script type="text/javascript" src="JS/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     
	var curtainopen = false;//定义布尔型变量
	$(".rope").click(function(){
     //当单击超链接时
		$(this).blur();//使超链接失去焦点
		if (curtainopen == false){
      //判断变量值是否为false
			$(this).text("关闭幕帘");//设置超链接文本 
			$(".leftcurtain").animate({
     width:'60px'}, 2000 );//设置左侧幕帘动画
			$(".rightcurtain").animate({
     width:'60px'},2000 );//设置右侧幕帘动画
			curtainopen = true;//变量值设为true
		}else{
     
			$(this).text("拉开幕帘"); //设置超链接文本
			$(".leftcurtain").animate({
     width:'50%'}, 2000 );//设置左侧幕帘动画
			$(".rightcurtain").animate({
     width:'51%'}, 2000 );//设置右侧幕帘动画
			curtainopen = false;//变量值设为false
		}
	});	
});	
</script>
	<style type="text/css">
	    *{
     
	    	margin:0;
	    	padding:0;
	    }
	    body {
     
			color: #FFFFFF;
	    	text-align: center;
	    	background: #4f3722 url('images/darkcurtain.jpg') repeat-x;
	    }
	    img{
     
			border: none;
		}
		p{
     
		margin-bottom:10px;
		color:#FFFFFF;
		}
	    .leftcurtain{
     
			width: 50%;
			height: 495px;
			top: 0px;
			left: 0px;
			position: absolute;
			z-index: 2;
		}
		 .rightcurtain{
     
			width: 51%;
			height: 495px;
			right: 0px;
			top: 0px;
			position: absolute;
			z-index: 3;
		}
		.rightcurtain img, .leftcurtain img{
     
			width: 100%;
			height: 100%;
		}
		.rope{
     
			position: absolute;
			top: 70%;
			left: 60%;
			z-index: 100;
			font-size:36px;
			color<