JS+JQ手风琴效果

【JS+JQ手风琴效果】的更多相关文章

最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; padding: 0px; } .leftli { float: left; width: 200px; background: #3D4444; } ul li { display: block; line-height: 25px; width: 200px; height: 25px; list-styl…

使用JS实现手风琴效果

想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再给每个li 添加绝对定位,以及设置对应的宽高,如下: <style> * { padding:0 ;margin:0;} ul { width:640px; height:400px; border:1px solid #ccc; position:relative; margin:100px a…

js实现手风琴效果

之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> <li class="pic1"><a href="javascript:;">床头明月光</a></li> <li class="pic2"><a href="javascr…

JS/JQ动画效果

1.弹出框 <style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.6); } .mask .login { width: 500px; height: 350px; background: #fff; margin: 150px auto; } </style> <a href="#&quo…

js 特效手风琴效果

$(document).ready(function(){ //定义展开的块 var lastBlock = $('#a1'); //展开的块的宽度 var maxWidth = 406; //折叠的块的宽度 var minWidth = 166; $('.picon ul li').hover(function(){ $(lastBlock).animate( {width: minWidth + "px"}, {queue:false,duration:1000} ); $(thi…

jq手风琴效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding:0; margin:0; } ul,ol{ list-style: none; } a{ text-decoration:…

animatescroll.min.js ~~~~ jq滚动效果优化target自定义方法

$(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("body").animatescroll({ "scrollSpeed":400, "easing":"easeInOutQuart", "padding": -asideTop, }); });…

js&jq 发送验证码倒计时

<input type="text" name='' id="btn"> //发送验证码倒计时var wait=30; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="免费获取验证码"; wait = 30; }else{ o.setAttribute("disabled", true…

jquery 图片手风琴效果

这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是做的过程中也遇到很多纠结的事. 一起来看代码吧!(很多变量没有给出,请结合Demo js里的ImageSlide.js) <li> <span style="position: absolute;bottom: 5px;width: 100%;text-align: center;…

一步步教你css3手风琴效果的实现

什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画面正常显示的效果类似我们的手风琴,所以叫手风琴效果. 手风琴效果的实现把图片显示出来通过上面的效果,我们不难发现,首先所有照片的集合是一个有1px边框的div盒子,盒子里面有一组ul li ,每个li标签里面有一张照片,那么我们首先把这段代码实现,html代码如下 <div class="…