一. 循环滚动图
效果:图片循环滚动,当鼠标移入时其他图片变色
-
jQuery代码
$(function(){ // 定义变量 var offset = 0 // 设置图片滚动 var timer function anmiPlay(){ timer = setInterval(function () { offset += -10; // 当图片移动到第四张是跳转到第一张 if (offset <= -1200) { offset = 0 } // 移动ul的位置 $('ul').css('marginLeft', offset); }, 50) } anmiPlay(); // 监听li的移入移出事件 $('li').hover(function(){ // 停止滚动 clearInterval(timer); // 给非当前选择添加蒙版 $(this).siblings().fadeTo(100,0.5); // 去除当前选择的蒙版 $(this).fadeTo(100, 1); },function(){ // 继续滚动 anmiPlay(); // 去除所有蒙版 $('li').fadeTo(100,1) }) })
-
页面结构:设置六张图片,防止在跳转是出现卡顿感。
- 移动时动的是ul而不是图片
<div> <ul> <li><img src="imgs/1.jpg"></li> <li><img src="imgs/2.jpg"></li> <li><img src="imgs/3.jpg"></li> <li><img src="imgs/4.jpg"></li> <li><img src="imgs/1.jpg"></li> <li><img src="imgs/2.jpg"></li> </ul> </div>
-
css代码
*{ margin: 0; padding: 0; } div{ width: 600px; height: 161px; border: 1px solid black; margin: 200px auto; overflow: hidden; } ul{ list-style: none; width: 1800px; height: 161px; background-color: black; } ul>li{ float: left; } ul>li>img{ width: 300px; height: 161px; }
二. 弹窗广告
效果:上浮然后消失再出现。
-
jQuery代码
$(function(){ // span的点击事件 $('span').click(function(){ $('.nav').remove(); }) // 执行广告动画 // $('.nav').slideDown(1000,function(){ // $('.nav').fadeOut(1000,function(){ // $('.nav').fadeIn(1000); // }) // }) // 利用动画队列逐个执行简化写法 $('.nav').stop().slideDown(1000).fadeOut(1000).fadeIn(1000); })
-
页面结构
<div class="nav"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2481523084,1281116508&fm=26&gp=0.jpg"> <span></span> </div>
-
css代码
*{ margin: 0; padding: 0; } .nav{ position: fixed; right: 0; bottom: 0; display: none; } .nav span{ display: inline-block; width: 30px; height: 30px; position: absolute; right: 4px; top: 4px; }
三. 对联广告
滚动条到一定的地方浮现,反之消失
-
jQuery代码
$(function(){ // 监听网页的滚动 $(window).scroll(function(){ // 获取网页滚动的偏移位 var offset = $('html,body').scrollTop(); // 判断网页是否滚动到了指定位置 if(offset >= 1000){ // 显示广告 $('img').show(1000) }else{ // 隐藏广告 $('img').hide(1000) } }) })
-
页面结构
<img class="left" src="https://hbimg.huabanimg.com/a088f4cc9459b558166269335c7d041a53032d2d1dd2f0-aRBw1t_fw658/format/webp" alt=""> <img class="right" src="https://hbimg.huabanimg.com/a088f4cc9459b558166269335c7d041a53032d2d1dd2f0-aRBw1t_fw658/format/webp" alt="">
-
css代码
*{ margin: 0; padding: 0; } img{ width: 150px; height: 400px; display: none; } .left{ float: left; position: fixed; left: 0; top: 200px; } .right{ float: right; position: fixed; right: 0; top: 200px; }
四. 下拉菜单
-
jQuery代码
$(function(){ // 一级菜单移入事件 $('.nav>li').mouseenter(function(){ // 找到二级菜单 var $sub = $(this).children('.sub'); // 停止之前的动画 $sub.stop(); // 展开二级菜单 $sub.slideDown(1000); }) // 一级菜单移出事件 $('.nav>li').mouseleave(function () { // 找到二级菜单 var $sub = $(this).children('.sub'); // 停止之前的动画 $sub.stop(); // 收起二级菜单 $sub.slideUp(1000); }) })
为了防止动画队列中动画过多,建议执行一个动画前先调用stop()方法,然后在执行动画
- 不加stop()方法的效果
-
页面结构
<ul class="nav"> <li>一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul>
-
css代码
*{ margin: 0; padding: 0; } .nav{ list-style: none; width: 300px; height: 50px; background: red; margin: 200px auto; } .nav>li{ width: 100px; height: 50px; line-height: 50px; text-align: center; float: left; } .sub{ list-style: none; background: rebeccapurple; display: none; }
五. 折叠菜单
效果:点击打开二级菜单
-
jQuery代码
$(function(){ $('.nav>li').click(function(){ // 拿到二级菜单 var $sub = $(this).children('.sub'); // children()方法: 返回被选元素的所有直接子元素 // 展开二级菜单 $sub.slideDown(1000); // 找到所有非当前二级菜单 var other = $(this).siblings().children('.sub'); // 收起非当前的二级菜单 other.slideUp(1000); // 旋转当前选中箭头 $(this).addClass('current') // 恢复非当前选中箭头 $(this).siblings().removeClass('current') }) })
-
页面结构
<ul class="nav"> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul>
-
css部分
*{ margin: 0; padding: 0; } .nav{ list-style: none; width: 300px; margin: 100px auto; } .nav li{ border: 1px solid #000000; line-height: 35px; border-bottom: none; text-indent: 2em; position: relative; } .nav li:last-child{ border-bottom: 1px solid #000000; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .nav li:first-child{ border-top-left-radius: 5px; border-top-right-radius: 5px; } .nav li span{ background-image: url('imgs/openRightMini.png'); display: inline-block; width: 32px; height: 32px; position: absolute; right: 10px; top: 3px; } .sub{ display: none; } .sub li{ list-style: none; background: aquamarine; border: none; border-bottom: 1px solid white; } .sub li:hover{ background: hotpink; } .current span{ transform: rotate(90deg); }