永康网站建设优化建站,在婚恋网站上做红娘怎么样,建设网站的网址,阿里云 域名 做网站jQuery案例专题
本学期主要担任的课程是js和jQuery#xff0c;感觉用到的有一些案例挺有意思的#xff0c;就对其进行了一下整理。
目录#xff1a; 电影院的幕帘特效 手风琴特效 星光闪烁 网页轮播图
1.电影院的幕帘特效代码如下
html
!DOCTYPE html
html…jQuery案例专题
本学期主要担任的课程是js和jQuery感觉用到的有一些案例挺有意思的就对其进行了一下整理。
目录 电影院的幕帘特效 手风琴特效 星光闪烁 网页轮播图
1.电影院的幕帘特效代码如下
html
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetgb2312 /
title幕帘效果/title
/head
script typetext/javascript srcJS/jquery-1.12.4.js/script
script typetext/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}});
});
/scriptstyle typetext/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:#FFFFFF;}/style
/headbody
欢迎来到小红棉戏班hr /div classleftcurtainimg srcimages/frontcurtain.jpg//divdiv classrightcurtainimg srcimages/frontcurtain.jpg//diva classrope href#拉开幕布/a
/body
/html效果图如下
2.手风琴特效代码如下 html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title无标题文档/title
style typetext/css
*{ margin:0; padding:0; list-style:none;}
.all{
width:1200px;
height:300px;
border:1px solid #000;
margin:100px auto;
overflow:hidden; /*在ul的父级上增加溢出隐藏*/
}
.all ul{
width:2000px;
}/*设置ul宽度很大防止li大于200px往下掉*/
.all li{
width:200px;
height:300px;
background:url(images/pic/01.jpg) no-repeat 0 0; /*加载一张相同图片*/
float:left; cursor:pointer;}/style
body
div classallulli/lili/lili/lili/lili/lili/li/ul
/div
/body
script srcjs/jquery-1.8.3.min.js/script
script typetext/javascript
$(function(){
$(.all li).each(function(index,obj){ var numindex1;$(obj).css(background,url(img/pic/0num.jpg));
/*动态加载图片不必在li中添加*/});$(.all li).hover(function(){ //hover事件就有鼠标移上和离开两个功能$(this).stop().animate({width:500},200).siblings().stop().animate({width:140},200)
/*链式写法$(this)的图片从200变为500其余siblings()从200变为140*/},function(){$(.all li).stop().animate({width:200},200); /*鼠标离开所有图的宽度还原为200*/});
})
/script
效果图如下
3.星光闪烁代码如下
html代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title星空闪烁动画/titlelink relstylesheet hrefcss/style.cssscript srcjs/jquery-1.12.4.js/script/headbodyinput typebutton value星空展示div classskyimg classwrap srcimages/night.jpg width920 height450div classstarWrapimg srcimages/star.png width150 height150img srcimages/star2.png width60 height60img srcimages/star.png width150 height150img srcimages/star2.png width60 height60img srcimages/star.png width150 height150img srcimages/star2.png width60 height60/div/divscript srcjs/nightSky.js/script/body
/htmlcss代码如下
* {margin: 0;padding: 0;
}
div.sky {margin: 0 auto;width: 920px;height: 450px;
}
.wrap {display: none;
}
div .starWrap {position: absolute;top: 0;background: pink;width: 920px;
}
div .starWrap img {position: absolute;top: 20px;left: 50px;display: none;
}
div .starWrap img:nth-child(2) {position: absolute;top: 50px;left: 680px;
}
div .starWrap img:nth-child(3) {position: absolute;top: 80px;left: 180px;
}
div .starWrap img:nth-child(4) {position: absolute;top: 280px;left: 180px;
}
div .starWrap img:nth-child(5) {position: absolute;top: 180px;left: 380px;
}
div .starWrap img:nth-child(6) {position: absolute;top: 110px;left: 480px;
}jquery代码如下 $(input).click(function() {$(.wrap).slideDown(1500,function() {setInterval(twinkle, 500);});});function twinkle() {$(.starWrap img:even).toggle(10);$(.starWrap img:odd).fadeToggle(300);}效果图如下
4.网页轮播图代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8title网页轮播图效果/titlelink hrefcss/wylbt.css relstylesheet/headbodydiv idboxdiv idpic!-- img添加class是为了在juqery里面设置自动轮播效果 --img classtp srcimg/01.jpgimg classtp srcimg/02.jpgimg classtp srcimg/03.jpgimg classtp srcimg/04.jpg/divulli classnum1/lili2/lili3/lili4/li/ula classbtn1 href#lt;/aa classbtn2 href#gt;/a/div/bodyscript srcjs/jquery-1.12.4.js/scriptscript srcjs/wylbt.js/script
/html css
*{margin: 0;padding: 0;
}ul,li,a{list-style: none;text-decoration: none;
}#box{width: 1210px;height: 360px;border: 1px solid red;margin: 50px auto;overflow: hidden;
}#box #pic{width: 100%;
}#box #pic .tp{position: absolute;
}#box #pic img{float: left;width: 1210px;height: 360px;
}#box ul{position: relative;top:85%;left:45%;
}#box ul li{display: inline-block;background: #ffff00;height: 30px;width: 30px;border-radius: 50%;text-align: center;line-height: 30px;margin: 10px;cursor: pointer;
}#box ul li.num{background: red;color:#fff;
}.btn1{position: relative;top:33%;width: 40px;height: 40px;background: #ccc;color:#ff5500;text-align: center;font-size: 30px;
}
.btn2{position: relative;top:33%;left:1160px;width: 40px;height: 40px;background: #ccc;color:#ff5500;text-align: center;font-size: 30px;
}javascript
//1.需要定义全局变量
var i0; //i是控制图片的个数
var timer; //timer是一个计时器 /*
3个效果
(1) 自动轮播效果
(2) 鼠标移入移出效果
(3) 左右按钮的单击效果
*/$(function(){
//2.需要显示第一张图片其他的图片隐藏
//显示第0张class为tp的图片同时兄弟级siblings(同级)的其它图片隐藏$(.tp).eq(0).show().siblings().hide();
//3.完成自动轮播 编写一个函数( class 类 类名 理解为函数 java叫方法)showpic();//4.完成鼠标的移入移出$(li).hover(//移入function(){//需要获取当前li的序号i$(this).index();//调用show函数直接切换show(); //需要将计时器函数清0 重新开始计时//通常情况 setInterval()和 clearInterval(timer)是配对使用的clearInterval(timer);},function(){showpic();}); //对左边的按钮进行单击事件 向左展示$(.btn1).click(function(){//计时器清0clearInterval(timer);//如果是第一个li 则点击之后变成最后一个liif(i0){i4;}i--;//调用show函数show();}); $(.btn2).click(function(){clearInterval(timer);i;if(i4){i0;}show(); });});//showpic函数完成每隔三秒进行一次切换
function showpic(){//setInterval(a,b)b为时间 a必须是一个函数timersetInterval(s(),3000);
}//完成图片切换
function show(){//设置当前第i张class名称是tp图片设置淡入效果fadeIn为300毫秒 //同时再次设置同级的其它tp为淡出效果fadeOut$(.tp).eq(i).fadeIn(300).siblings().fadeOut();//设置当前li的颜色$(li).eq(i).addClass(num).siblings().removeClass(num);
}function s(){//从第1张切换到第2张 再从第2张切换到第3张i;//如果是最后一张,则再次由第1张开始切换if(i4){i0;}//show()函数的目的就是进行图片切换show();}效果图如下
