jQuery自适应容器焦点图,兼容移动端
jQuery自适应容器焦点图,兼容移动端浏览器,支持移动端的touch触碰事件滑动切换图片。效果如下
兼容移动端的焦点图,只要放到指定的容器中,焦点图会自动水平填满容器宽度,移动端显示只需要控制指定容器的宽度,不需要关心焦点图显示,会自动填满此容器宽度,高度等比计算得出,图片不会变形。
jQuery自适应容器焦点图,兼容移动端浏览器源代码和使用说明如下
PC端浏览器可以更改窗体大小查看自适应效果,移动端开启自动转屏,然后切换屏幕横竖方向测试。
<!doctype html> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" /> <style> .bbSlider{width:100%;height:300px;overflow:hidden;position:relative}/*初始化300高度,代码会依据第一张图片等比缩放高度重置容器的高度,这样多张图片不会增加页面长度*/ .bbSlider img{width:100%;z-index:2;height:100%;border:none;display:block} .bbSlider a{display:block;width:100%;position:relative} .bbSlider a.pre,.bbSlider a.next{z-index:999;display:none;width:auto;padding:0 10px;position:absolute;line-height:30px;margin-top:-15px;filter:alpha(opacity=70);opacity:.7;background:#000;color:#fff;top:50%} .bbSlider a.pre{left:0} .bbSlider a.next{right:0} .bbSlider span{position:absolute;bottom:0;left:0;width:100%;background:#000;filter:alpha(opacity=70);opacity:.7;color:#fff;line-height:30px;text-align:center} .bbSlider div.scrollItem{width:100%;height:100%;overflow:hidden;position:relative} .bbSlider div.item{width:9999999px;height:100%} .bbSlider img.hidden{height:auto;visibility:hidden} .bbSlider img.hidden{height:auto;visibility:hidden} .bbSlider img.hidden{height:auto;visibility:hidden} </style> <title>jQuery自适应容器焦点图,兼容移动端浏览器</title> <div style="max-width:800px;margin:0px auto"> <div class="bbSlider"> <a href="#1"><img src="http://glgangyu.com/upload/20160902/110949074.jpg" /><span>文字描述1</span></a> <a href="#2"><img src="http://glgangyu.com/upload/20160728/210728434.jpg" /><span>文字描述2</span></a> <a href="#3"><img src="http://glgangyu.com/upload/20160728/210736188.jpg" /><span>文字描述3</span></a> </div> </div> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <script> //power by showbo,http://www.w3dev.cn ,please keep this //type参数说明,默认left(从右边往左边滚动),top(从下往上滚动),fade(淡入淡出,IE8-有问题,淡入淡出效果出不来,直接显示图片) //delay:动画间隔,默认6s //aDelay:动画效果时间,默认0.5s $.fn.bbSlider = function (type,delay,aDelay) { type = type || 'left'; delay = (delay || 6) * 1000; aDelay = (aDelay || 0.5) * 1000; return this.each(function () { function resetContainerHeight() { h = imgFirst.offsetHeight; w = imgFirst.offsetWidth; step = type == 'top' ? h : w; container.add(imgs).add(scrollItem).css('height', h); if (type != 'fade') { if (type == 'left') as.css('width', w); scrollItem.attr(attr, index * step); } } function initDomStructure() { imgFirst = imgs.eq(0).clone().addClass('hidden').appendTo(container)[0];//用来获取容器更改大小时获取高度用的 $(window).resize(resetContainerHeight);//这个可以不加,方便PC端览器缩小窗口看效果测试用的 if (type == 'fade') { as.eq(0).css('z-index',3).end().filter(':gt(0)').css({ 'z-index': 1, opacity: 0 }); as.css({ position: 'absolute', left: 0, top: 0 }); } else { scrollItem = $('<div class="scrollItem"></div>'); scrollItem.prependTo(container); if (type == 'left') { var item = $('<div class="item"></div>'); scrollItem.append(item); item.append(as.css('float', 'left')); } else scrollItem.append(as); } resetContainerHeight(); if (l > 1) { var prenext = $('<a href="#" class="pre">上一张</a><a href="#" class="next">下一张</a>'); container.append(prenext); if ($.fn.bbSlider.supportTouch) prenext.css('display', 'block');//触屏设备没有mouseover/mouseout事件,直接显示上下操作 prenext.click(function () { animate(this.className == 'pre'); return false }); if (!$.fn.bbSlider.supportTouch) container.mouseenter(function () { clearInterval(timer); prenext.show() }).mouseleave(function () { timer = setInterval(animate, delay); prenext.hide() }).trigger('mouseleave'); } } function animate(isPre) { if (type == 'fade') { next = index + (isPre ? -1 : 1); if (next >= l) next = 0; else if (next < 0) next = l - 1; as.eq(next).css({ 'z-index': 2, opacity: 100, display: 'block' }); as.eq(index).css({ 'z-index': 3 }).animate({ opacity: 0 }, aDelay, function () { $(this).css({ 'z-index':1 }); }); if (isPre === true) index--; else index++; if (index >= l) index = 0; else if (index < 0) index = l - 1; } else { if (isPre === true) index--; else index++; if (index >= l) index = 0; else if (index < 0) index = l - 1; aCfg[attr] = index * step; scrollItem.animate(aCfg, aDelay); } } var container = $(this), imgs = $('img', this), imgFirst = imgs[0], w, h, as = imgs.parent(), l = imgs.length, timer, index = 0, next,scrollItem , attr = { top: 'scrollTop', left: 'scrollLeft' }[type] || 'opacity', step, aCfg = {}; if ($.fn.bbSlider.supportTouch) container.data('type', type); //第一张图片未加载完毕注册load事件,因为宽度100%,高度会等比缩放,需要加载完毕才获取到等比 if (imgFirst.complete !== true && imgFirst.readyState !== 'complete') { imgs.eq(0).load(initDomStructure); } else initDomStructure();//缓存中加载的,不响应load事件,可以直接初始化DOM结构 }); }; (function () {//移动端touch触摸支持 try { document.createEvent("TouchEvent"); $.fn.bbSlider.supportTouch = true; //是否触碰了上下一张链接 $.fn.bbSlider.isPreNext = function (el) { return el.tagName == 'A' && /^[上下]一张$/.test(el.innerHTML); }; var x, y, target = false; document.addEventListener('touchstart', function (e) { target = false; var t = e.touches[0]; //是否触碰上下一张链接 if ($.fn.bbSlider.isPreNext(t.target)) { $(t.target).trigger('click'); e.preventDefault(); return; } target = $(t.target).closest('div.bbSlider')[0]; if (target) e.preventDefault(); x = t.pageX; y = t.pageY; }, false); document.addEventListener('touchend', function (e) {//触碰结束判断方向,到底是切换到上一张还是下一张 if (!target) return; target = $(target); var t = e.changedTouches[0], v = target.data('type') == 'top' ? t.pageY - y : t.pageX - x; if (v != 0) $(target).find('a.' + (v < 0 ? 'next' : 'pre')).trigger('click'); }, false); } catch (e) { } })(); $('div.bbSlider').bbSlider(''); </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:jQuery自适应容器焦点图,兼容移动端