帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» H5 Switch全屏垂直滚动
H5 Switch全屏垂直滚动
浏览:584次
-
评论:0次
-
发布时间:2017-07-11
Html
Css
Js
section1
section2
section3
section4
section4
#section1 { background-color:#D546D6 } #section2 { background-color:#263FD7 } #section3 { background-color:#20AA7F } #section4 { background-color:#A5B109 } #section5 { background-color:#5F5F5F } html,body { margin:0; padding:0; height:100%; overflow:hidden; } #container,.sections,.section { /*必须,兼容,在浏览器不支持transform属性时,通过改变top/left完成滑动动画*/ position:relative; /*必须,关系到单个page能否全屏显示*/ height:100%; } .section { /*有背景图时必须,关系到背景图能够全屏显示*/ background-color:#000; background-size:cover; background-position:50% 50%; } /*以下样式用来设置slider样式,可自行修改*/ .pages { position:fixed; right:10px; top:50%; list-style:none; } .pages li { width:8px; height:8px; border-radius:50%; background:#fff; margin:15px 0 0 7px; } .pages li.active { margin-left:0; width:14px; height:14px; border:4px solid #FFFFFF; background:none; }
(function(b) { b.fn.XSwitch = function(d) { return this.each(function() { var f = b(this), e = f.data("XSwitch"); if (!e) { e = new c(f, d); f.data("XSwitch", e) } if (b.type(d) === "string") { return e[d]() } }) }; b.fn.XSwitch.defaults = { selectors: { sections: ".sections", section: ".section", page: ".pages", active: ".active" }, index: 0, easing: "ease", duration: 500, loop: false, pagination: true, keyboard: true, direction: "vertical", callback: "" }; var a = (function(e) { var h = ["webkit", "moz", "o", "ms"], g = ""; for (var f = 0, d = h.length; f < d; f++) { g = h[f] + "Transition"; if (e.style[g] !== undefined) { return "-" + h[f].toLowerCase() + "-" } return false } })(document.createElement("div")); var c = (function() { function g(j, i) { this.settings = b.extend(true, b.fn.XSwitch.defaults, i); this.element = j; this.init() } g.prototype = { init: function() { var i = this; this.selectors = this.settings.selectors; this.sections = this.element.find(this.selectors.sections); this.section = this.sections.find(this.selectors.section); this.direction = this.settings.direction === "vertical" ? true : false; this.pagesCount = this.pagesCount(); this.index = (this.settings.index >= 0 && this.settings.index < this.pagesCount) ? this.settings.index : 0; this.canScroll = true; if (!this.direction) { d(i) } if (this.settings.pagination) { h(i) } f(i) }, pagesCount: function() { return this.section.size() }, switchLength: function() { return this.duration ? this.element.height() : this.element.width() }, prve: function() { var i = this; if (this.index > 0) { this.index-- } else { if (this.settings.loop) { this.index = this.pagesCount - 1 } } e(i) }, next: function() { var i = this; if (this.index < this.pagesCount) { this.index++ } else { if (this.settings.loop) { this.index = 0 } } e(i) } }; function d(k) { var j = (k.pagesCount * 100) + "%", i = (100 / k.pagesCount).toFixed(2) + "%"; k.sections.width(j); k.section.width(i).css("float", "left") } function h(o) { var n = o.selectors.page.substring(1), l = '
'; o.activeClass = o.selectors.active.substring(1); for (var m = 0, k = o.pagesCount; m < k; m++) { l += "
" } l += "
"; o.element.append(l); var j = o.element.find(o.selectors.page); o.pageItem = j.find("li"); o.pageItem.eq(o.index).addClass(o.activeClass); if (o.direction) { j.addClass("vertical") } else { j.addClass("horizontal") } } function f(i) { i.element.on("click", i.selectors.page + " li", function() { i.index = b(this).index(); e(i) }); i.element.on("mousewheel DOMMouseScroll", function(j) { if (!i.canScroll) { return } var k = -j.originalEvent.detail || -j.originalEvent.deltaY || j.originalEvent.wheelDelta; if (k > 0 && (i.index && !i.settings.loop || i.settings.loop)) { i.prve() } else { if (k < 0 && (i.index < (i.pagesCount - 1) && !i.settings.loop || i.settings.loop)) { i.next() } } }); if (i.settings.keyboard) { b(window).on("keydown", function(k) { var j = k.keyCode; if (j === 37 || j === 38) { i.prve() } else { if (j === 39 || j === 40) { i.next() } } }) } b(window).resize(function() { var j = i.switchLength(), k = i.settings.direction ? i.section.eq(i.index).offset().top : i.section.eq(i.index).offset().left; if (Math.abs(k) > j / 2 && i.index < (i.pagesCount - 1)) { i.index++ } if (i.index) { e(i) } }); i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() { i.canScroll = true; if (i.settings.callback && type(i.settings.callback) === "function") { i.settings.callback() } }) } function e(l) { var i = l.section.eq(l.index).position(); if (!i) { return } l.canScroll = false; if (a) { l.sections.css(a + "transition", "all " + l.settings.duration + "ms " + l.settings.easing); var j = l.direction ? "translateY(-" + i.top + "px)" : "translateX(-" + i.left + "px)"; l.sections.css(a + "transform", j) } else { var k = l.direction ? { top: -i.top } : { left: -i.left }; l.sections.animate(k, l.settings.duration, function() { l.canScroll = true; if (l.settings.callback && type(l.settings.callback) === "function") { l.settings.callback() } }) } if (l.settings.pagination) { l.pageItem.eq(l.index).addClass(l.activeClass).siblings("li").removeClass(l.activeClass) } } return g })() })(jQuery); $(function() { $("[data-XSwitch]").XSwitch() });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>H5 Switch全屏垂直滚动-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:html5 switch全屏垂直滚动幻灯片
CSS加载+canvas动画
用css实现图片翻转
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
584
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值