JQ实现accordion(可折叠)效果

先看效果--这个就是手风琴的效果: 原理:首先默认section1下面的dd可见,其他的全部隐藏:当点击某个obj时候, 快速隐藏全部的dd,然后只有obj.NEXT().show(), 实现: HTML <dl class="accordion" id="my-accordion"> <dt>Section 1</dt> <dd>Mauris mauris ante, bla…

本例中使用的是jq和es6的语法,代码如下: html: <div id="box"> this is test <br/> 这是测试用的 </div> css样式表: <style> #box { display: none; border: 1px solid #ccc; margin: 20px 30em; padding: 20px; line-height: 1.8; font: 14px/1.8 "microsof…

jq实现楼层切换效果

<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } a { color: #000; text-decoration: none; } .list { width: 50px; position: fixed; height: 150px; left: 0; top: 50%; margin-top: -75px; } ul {…

jq封装-无缝滚动效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{ margin:0; padding: 0; } .outer{ position: relative; margin:30px auto; border:1px solid #ccc; border…

jq的图片放大镜效果

<div class="imgbox"> <div class="probox"> <img src="" alt=""> <div class="hoverbox"></div> </div> <div class="showbox"> <img src="" alt=&quo…

jq PC做滚动效果经常用到的各类参数【可视区判断】

获取浏览器显示区域 (可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度: $(document).height(); 获取页面的文档宽度 : $(document).width(); 浏览器当前窗口文档body的高度: $(document.body).height(); 浏览器当前窗口文档body的宽度: $(document.body).width(); 获取滚…

jq数字翻页效果，随机数字显示，实现上下翻动效果

最近在做一个项目,需要实时展示一串数字,要有类似于日历翻页的效果,在网上找寻了一番,发现dataStatistics这个插件http://www.jq22.com/jquery-info8141能实现这种效果,但是它实现的是在min设置的数值上累加1,css样式效果满足,但不符合的需要实时展示任意的数字要求,于是就稍微改动了一下代码,下面是项目代码.前端新手,代码写的很粗糙. css样式部分 <style> .dataStatistics .digit_set { float: left; b…

jq实现多级手风琴效果

/*左侧*/ .wrapper, .main { height: 100%; z-index: 9 } .main { position: relative; } .main_L { width: 238px; height: 100%; background-color: #293038; position: absolute; left:; z-index: 99 } .main_R { width: 100%; padding-left: 180px; z-index: -1; } .ma…

jq 全选/取消效果

//全选框$('#btnbutton').live('click',function(){ var data = $(this).attr('data'); if(data=='on'){ $(":checkbox").each(function(){ $(this).attr('checked',true); }); $(this).attr('data','off'); } else if(data=='off'){ $(":checkbox").each(fu…

jq实现地址级联效果

(function ($) { $.fn.Address = function (options) { var defaults = { divid: "Address", callback: function (pageindex) { } }; var opts = $.extend(defaults, options); var AddressHtml = ""; AddressHtml = ("<span class=\"provi…