自己做网站教学视频教程,推广项目的平台,做旅游网站的目的与意义,组建网站手风琴效果有不少#xff0c;王者荣耀官网#xff08;源网址 https://pvp.qq.com/raiders/ #xff09;有一处周免英雄#xff0c;使用的就是手风琴效果#xff0c;如图所示。 我试着用css、js、jQuery三种方式实现了这种效果#xff0c;最终效果差不多#xff0c;美中不…手风琴效果有不少王者荣耀官网源网址 https://pvp.qq.com/raiders/ 有一处周免英雄使用的就是手风琴效果如图所示。 我试着用css、js、jQuery三种方式实现了这种效果最终效果差不多美中不足的是css方式当鼠标离开后会恢复到初始状态也就是显示第一张大图片的状态。而使用js和jQuery方式则会停留在鼠标进入的那一张不恢复到第一张的状态。 如何使用纯CSS保留住:hover的状态我还没有找到解决方法若有哪位大神知晓欢迎告知多谢。
一、CSS方式
显示、隐藏以及过渡效果是通过不透明度opacity实现的关键是鼠标停留在列表上各项的状态鼠标停留在某个列表项上这个列表项的状态。用到的图片是之前从官网下载的。 代码如下
!doctype html
htmlheadmeta charsetutf-8title王者荣耀-手风琴案例/title!-- 原网址为 https://pvp.qq.com/raiders/ --style typetext/css* {margin: 0;padding: 0;}ul ,li{list-style: none;}.king {width: 708px;background: url(images/bg.png) no-repeat;padding: 10px;overflow: hidden;margin: 100px auto;font-size: 0;}.king ul li {position: relative;display: inline-block;width: 69px;height: 69px;padding-right: 10px;transition: all 0.3s; /*过渡效果*/overflow: hidden;}.big {opacity: 0; /*完全透明*/}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}/* 初始状态第一项展示宽224px.big显示.small隐藏 */.king li:first-child {width: 224px;}/* 使用opacity进行显示隐藏有过渡效果visibility没有渐变效果 */.king li:first-child .big {opacity: 1;/* visibility: visible; */}/* .small隐藏*/.king li:first-child .small {opacity: 0;}/* 鼠标移到列表ul上时.big隐藏.small显示 */.king ul:hover li {width: 69px;}.king ul:hover li .big {opacity: 0;}.king ul:hover li .small {opacity: 1;}/* 鼠标移动到列表项li上时,当前项宽度变成224px.big显示.small隐藏 */.king ul li:hover {width: 224px;}.king ul li:hover .big {opacity: 1;}.king ul li:hover .small {opacity: 0;}/style/headbodydiv classkingullia href#img srcimages/zhaojun1.jpg alt classsmallimg srcimages/zhaojun.png alt classbig/a/lilia href#img srcimages/fuzi1.jpg alt classsmallimg srcimages/fuzi.png alt classbig/a/lilia href#img srcimages/cheng1.jpg alt classsmallimg srcimages/cheng.png alt classbig/a/lilia href#img srcimages/lanling1.jpg alt classsmallimg srcimages/lanling.png alt classbig/a/lilia href#img srcimages/zhang1.jpg alt classsmallimg srcimages/zhang.png alt classbig/a/lilia href#img srcimages/lianpo1.jpg alt classsmallimg srcimages/lianpo.png alt classbig/a/lilia href#img srcimages/libai1.jpg alt classsmallimg srcimages/libai.png alt classbig/a/li/ul/div/body
/html
二、JavaScript方式 代码不麻烦主要还是排他思想先把所有的变成普通样式再把移入的变成当前样式。使用的是mouseenter事件使用mouseover事件的话在这个例子中没看出有什么区别。 代码如下
!doctype html
htmlheadmeta charsetutf-8title手风琴案例/titlestyle typetext/css* {margin: 0;padding: 0;}ul {list-style: none;}img {display: block;}.king {width: 708px;background: url(images/bg.png) no-repeat;padding: 10px;overflow: hidden;margin: 100px auto;}.king ul {overflow: hidden;font-size: 0;}.king li {position: relative;display: inline-block;width: 69px;height: 69px;margin-right: 10px;overflow: hidden;transition: all .3s;}
/* 当前项宽度224大图片显示小图片隐藏 */.king li.current {width: 224px;}.king li.current .big {opacity: 1;}.king li.current .small {opacity: 0;}.big {width: 224px;opacity: 0;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;transition: all .3s;opacity: 1;}/style/headbodydiv classkingulli classcurrenta href#img srcimages/zhaojun1.jpg alt classsmallimg srcimages/zhaojun.png alt classbig/a/lilia href#img srcimages/fuzi1.jpg alt classsmallimg srcimages/fuzi.png alt classbig/a/lilia href#img srcimages/cheng1.jpg alt classsmallimg srcimages/cheng.png alt classbig/a/lilia href#img srcimages/lanling1.jpg alt classsmallimg srcimages/lanling.png alt classbig/a/lilia href#img srcimages/zhang1.jpg alt classsmallimg srcimages/zhang.png alt classbig/a/lilia href#img srcimages/lianpo1.jpg alt classsmallimg srcimages/lianpo.png alt classbig/a/lilia href#img srcimages/libai1.jpg alt classsmallimg srcimages/libai.png alt classbig/a/li/ul/div!-- 排他思想 1.当前小li 宽度变为 224px 同时里面的小图片淡出大图片淡入2.其余兄弟小li宽度变为69px 小图片淡入 大图片淡出--scriptwindow.addEventListener(load, function() {var lis document.querySelectorAll(.king li);for (let i 0; i lis.length; i) {lis[i].addEventListener(mouseenter, function() {for (let k 0; k lis.length; k) {lis[k].children[0].children[0].style.opacity 1;lis[k].children[0].children[1].style.opacity 0;lis[k].style.width 69px;}this.style.width 224px;this.children[0].children[0].style.opacity 0;this.children[0].children[1].style.opacity 1;})}})/script/body
/html
三、jQuery方式
jQuery采用的链式写法用到的方法挺多。我去官网看了看最新版本是3.7.1。使用jQuery可以让代码简洁一些不过在这个例子中不是很明显。
!doctype html
htmlheadmeta charsetutf-8title手风琴案例/titlestyle typetext/css* {margin: 0;padding: 0;}ul {list-style: none;}img {display: block;}.king {width: 750px;background: url(images/bg.png) no-repeat;padding: 10px;overflow: hidden;margin: 100px auto;}.king ul {overflow: hidden;font-size: 0;}.king li {position: relative;display: inline-block;width: 69px;height: 69px;margin-right: 10px;transition: all .3s;}.king li.current {width: 224px;}.king li.current .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}/stylescript srcjs/jquery-3.7.0.min.js/script/headbodydiv classkingulli classcurrenta href#img srcimages/zhaojun1.jpg alt classsmallimg srcimages/zhaojun.png alt classbig/a/lilia href#img srcimages/fuzi1.jpg alt classsmallimg srcimages/fuzi.png alt classbig/a/lilia href#img srcimages/cheng1.jpg alt classsmallimg srcimages/cheng.png alt classbig/a/lilia href#img srcimages/lanling1.jpg alt classsmallimg srcimages/lanling.png alt classbig/a/lilia href#img srcimages/zhang1.jpg alt classsmallimg srcimages/zhang.png alt classbig/a/lilia href#img srcimages/lianpo1.jpg alt classsmallimg srcimages/lianpo.png alt classbig/a/lilia href#img srcimages/libai1.jpg alt classsmallimg srcimages/libai.png alt classbig/a/li/ul/div!-- 1.当前小li 宽度变为 224px 同时里面的小图片淡出大图片淡入2.其余兄弟小li宽度变为69px 小图片淡入 大图片淡出--script typetext/javascript$(function() {$(.king li).mouseenter(function() {$(this).css({width: 224}).find(.small).stop().fadeOut().siblings(.big).stop().fadeIn();$(this).siblings(li).css({width: 69}).find(.small).stop().fadeIn().siblings(.big).stop().fadeOut();})});/script/body/html
