杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校
发布于 2019-06-14 21:03:20
发布于 2019-06-14 21:03:20
JQuery案例
1.鼠标经过图片切换
运行效果图
示例代码：
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>鼠标经过图片切换</title>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
//从哪下手写程序? 从事件着手
/*$('img').mouseover(function(){
$(this).attr('src','images/3.jpg');
}).mouseout(function(){
$(this).attr('src','images/1.jpg');
});*/
//如果hover 里边鼠标经过和离开时一样的事件指令，那么可以写一个
//如果hover事件不同
$('img').hover(function(){
$(this).attr('src','images/3.jpg');
},function(){
$(this).attr('src','images/1.jpg');
});
});
</script>
</head>
<body>
<img src="img/1.jpg" height="320" width="400" alt="" />
</body>
</html>Img素材
jQuery控制css类选择器的切换
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>类的切换</title>
<style>
div{
width:200px;
height:200px;
background: #ccc;
}
.box{
border:1px solid #000;
}
.changeColor{
border:1px solid #000;
background:pink;
}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('button:eq(0)').click(function(){
$('div').addClass('box');
});
$('button:eq(1)').click(function(){
$('div').removeClass('box');
});
$('button:eq(2)').click(function(){
$('div').toggleClass('changeColor');
})
})
</script>
</head>
<body>
<button>添加类</button>
<button>移除类</button>
<button>切换类</button>
<div></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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>淘宝商品展示</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
div{
width:600px;
margin:50px auto;
border:1px solid #000;
padding:10px;
}
div ul{
overflow: hidden;
}
div li{
float:left;
width:200px;
height: 30px;
text-align: center;
line-height: 30px;
}
div p{
width:200px;
height:30px;
line-height: 30px;
text-align: center;
border:1px solid #000;
margin:0 auto;
cursor: pointer;
}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('li:gt(2):not(:last)').hide();
//点击显示
$('p').click(function(){
$('li:gt(2):not(:last)').slideToggle(500);
//如果点击的时候，当前是‘显示所有内容’ 就变为 ‘隐藏所有内容’ 否则‘显示所有内容’
if( $('p').html() == '显示所有内容' ){
$('p').html('隐藏所有内容');
}else{
$('p').html('显示所有内容');
}
});
})
</script>
</head>
<body>
<div>
<ul>
<li>佳能</li>
<li>索尼</li>
<li>三星</li>
<li>尼康</li>
<li>松下</li>
<li>卡西欧</li>
<li>富士</li>
<li>可达</li>
<li>宾得</li>
<li>理光</li>
<li>奥林巴斯</li>
<li>明基</li>
<li>显示其它品牌</li>
</ul>
<p>显示所有内容</p>
</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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>百度风云榜</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.box{
width: 100px;
border:1px solid #000;
background:#06f;
margin:100px;
color:#fff;
padding:10px;
}
.box li{
cursor: pointer;
}
.box span{
background:url(images/close.gif) no-repeat left center;
padding-left:14px;
}
.box ul{
padding-left:14px;
display: none;
}
.box .current ul{
display: block;
}
.box .current span{
background:url(images/open.gif) no-repeat left center;
}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
/*$('.box>li').click(function(){
$(this).toggleClass('current').siblings().removeClass('current');
});*/
$('.box span').click(function(){
$(this).parent().toggleClass('current').siblings().removeClass('current');
});
})
</script>
</head>
<body>
<ul class="box">
<li>
<span>事件</span>
<ul>
<li>上周</li>
<li>最近</li>
<li>上月</li>
</ul>
</li>
<li>
<span>娱乐</span>
<ul>
<li>游戏</li>
<li>电视</li>
<li>电影</li>
</ul>
</li>
<li>
<span>人物</span>
<ul>
<li>美女</li>
<li>帅哥</li>
<li>明星</li>
</ul>
</li>
</ul>
</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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>回到顶部</title>
<style>
a{
width: 100px;
height: 100px;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function() {
$('p').html('这是文字内容');
});
</script>
</head>
<body>
<a href="#"><i class="fa fa-rocket fa-3x" style="transform: rotate(-45deg); color:#ccc;"></i></a>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>素材：font-awesome.min.css
下载：https://files.cnblogs.com/files/xiaoxiao5016/font-awesome.min.css 或者官方下载：https://fontawesome.com/download
未完，会持续补入后续案例！
如果有需要查看JQueryAPI文档的童鞋，可以移步这里进行下载：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年05月22日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录