jquery swipper 轮播中间图放大解决方案
直接把swipper-container 高度设置高一点 然后 图片垂直居中 就不怕放大的时候部分被截取了
.tuandui-swiper-container .swiper-slide-next{ -webkit-transform:scale(1.2,1.2); overflow: visible; }
newmiracle学习天地
jquery swipper 轮播中间图放大解决方案
直接把swipper-container 高度设置高一点 然后 图片垂直居中 就不怕放大的时候部分被截取了
.tuandui-swiper-container .swiper-slide-next{ -webkit-transform:scale(1.2,1.2); overflow: visible; }
jquery trigger使用方法
比方说写了下面点击事件 采用trigger 要触发他
$('.biaoqian_ula').on('click',function () { $('.lianxi_nav img').css('border','1px #d6d6d6 solid'); $(this).css('border','1px #e99a83 solid'); $('.chanpininfo').css('display','none'); $('.ulapic_info').fadeIn(); })
$(".biaoqian_ula").trigger("click");
jquery swiper自定义pagination的方法
<script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, paginationBulletRender: function (swiper, index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } }); </script>
具体详情http://www.swiper.com.cn/api/pagination/2014/1217/70.html
ps:自定义classname方法
bulletClass: 'chanpin-bullet', bulletActiveClass: 'chanpin-bullet-active',
jquery鼠标经过弹出层写法
<div class="navitem"><a href="/index.php?c=news&a=index&id=52">新闻中心</a> <div class="navitemlist" style="display: none;"> <a href="/index.php?c=news&a=index&id=52">公司新闻</a> <a href="/index.php?c=news&a=index&id=53">媒体报道</a> </div> </div>
$(".navitem").hover(function(){ $(this).children('a').next('.navitemlist').fadeIn(); },function(){ $(this).children('a').next('.navitemlist').css('display','none'); });
.header .navitem { height: 100%; padding-left: 20px; padding-right: 20px; display: block; line-height: 102px; font-size: 16px; color: #242169; border-bottom: 1px #FFF solid; text-decoration: none; float: left; position: relative; } .navitemlist { height: auto; overflow: hidden; position: absolute; left: 0px; top: 75px; background: #FFF; z-index: 9999; text-align: left; display: none; }
jquery向上滚动页面的写法
$('.arrow_top').on('click',function () { $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); $body.animate({scrollTop: 0}, 1000); }) $(window).scroll(function() { if(parseInt($(document).scrollTop())>=300){ $('.arrow_top').fadeIn(); }else{ $('.arrow_top').fadeOut(); } });
jquery选择器的高级用法
根据类 然后根据属性 来获取
$(".danxuan_tiyan[is_select=1]")
jquery自定义单选框的方法
直接用div做 再加事件 基本原理就这样
1 多选的时候 点击1个div 就加属性记录选中了
2 点击1个 其他几个消失。。
jquery json对象转换
//json数组转json串 var arr = [1,2,3, { a : 1 } ]; JSON.stringify( arr ); //json字符串转json数组 var jsonStr = '[1,2,3,{"a":1}]'; JSON.parse( jsonStr );
额外小知识:
如果要拼json字符串 以下2种写法 (先拼接json对象 然后再转换成json字符串)
var contact = new Object(); contact["firstname"] = "Jesper"; contact["surname"] = "Aaberg"; console.log(JSON.stringify(contact));
var sellist = []; $('.sel').each(function() { var sel = $(this).val(); sellist.push(sel); }) var sellist = JSON.stringify(sellist);
jquery实现tab菜单点击换菜单图片方法 代码如下
<div class="menulist"> <p class="active" cur="p1"> <img class="img1" src="{$yuming}/images/menu/jituanjianjie.jpg" alt=""> <img class="img2" src="{$yuming}/images/menu/jituanjianjie_h.jpg" alt=""> </p> <p cur="p2"> <img class="img1" src="{$yuming}/images/menu/jituanrongyu.jpg" alt=""> <img class="img2" src="{$yuming}/images/menu/jituanrongyu_h.jpg" alt=""> </p> <p cur="p3"> <img class="img1" src="{$yuming}/images/menu/dashiji.jpg" alt=""> <img class="img2" src="{$yuming}/images/menu/dashiji_h.jpg" alt=""> </p> <p cur="p4"> <img class="img1" src="{$yuming}/images/menu/kongjian.jpg" alt=""> <img class="img2" src="{$yuming}/images/menu/kongjian_h.jpg" alt=""> </p> </div>
.menulist{ width:100%; height:auto; overflow: hidden; background: #b49b87; } .menulist p{ width: 23.2%; text-align: center; display: block; float: left; padding: 0px; margin: 0px; margin-left: 0.2rem; margin-top: 0.4rem; float: left; position: relative; } .menulist p img{ width:100%; } .img1{ width:100%; position: absolute; left:0px; top:0px; z-index: 2; } .active .img1{ display: none; }
$('.menulist p').on('click', function () { $(this).addClass('active'); $(this).siblings('p').removeClass("active"); })
ps 原理就是 点击控制class
比较靠谱的手风琴代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>自制手风琴</title> <script type="text/javascript" src="/index/js/jquery.min.js"></script> <style type="text/css"> .menulist li { display: none; } </style> </head> <body> <div class="menulist"> <ul> <span>AAAAA<b>+</b></span> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> <ul> <span>BBBBB<b>+</b></span> <li>22222</li> <li>22222</li> <li>22222</li> </ul> <ul> <span>CCCCC<b>+</b></span> <li>33333</li> <li>33333</li> <li>33333</li> <li>33333</li> <li>33333</li> </ul> <ul> <span>DDDDD<b>+</b></span> <li>44444</li> <li>44444</li> </ul> <ul> <span>EEEEE<b>+</b></span> <li>55555</li> <li>55555</li> <li>55555</li> </ul> </div> <script type="text/javascript"> $(function () { $('span').click(function () { if ($(this).siblings('li').hasClass('on')) { $(this).siblings('li').slideUp(500).removeClass('on'); $(this).children('b').text('+'); } else { $(this).siblings('li').slideDown(500).addClass('on'); $(this).children('b').text('-'); } }); }); </script> </body> </html>