教学信息化大赛网站建设作品,有没有人一起做网站,网站建站平台排行榜,wordpress评论 图片1、概述 iscroll 专注于页面滚动js。Iscroll滚动做的挺好,特别是针对手机网页#xff08;android、iphone#xff09;正好弥补手动滑屏的遗缺#xff0c;而今研究一番#xff0c;把代码贴出来#xff0c;供大家参考。 2、iscroll使用说明 初始化iScroll wrapperhour//标识…1、概述 iscroll 专注于页面滚动js。Iscroll滚动做的挺好,特别是针对手机网页android、iphone正好弥补手动滑屏的遗缺而今研究一番把代码贴出来供大家参考。 2、iscroll使用说明 初始化iScroll wrapperhour//标识要滚动的div对应ID iScroll myhourScroll new iScroll(wrapperhour, {snap: li,//一次滚动单位limomentum: false,hScrollbar: false,//水平滚动条是否显示true显示false隐藏vScrollbar: false,//垂直滚动条是否显示true显示false隐藏onScrollEnd: //滚动停止回调函数function () {//处理自己的逻辑代码if (!hourisfirst){var ChangeTemplet (this.currPageY);//currPageY垂直当前坐标或者叫单元数if (ChangeTemplet 23)ChangeTemplet 23 $(#btnhour).val(ChangeTemplet);$(#lbhour).text(ChangeTemplet);var currobject $(#hourlist).children()[ChangeTemplet 1];$(currobject).attr(class, timeselectncl);$(currobject).siblings().each(function () { $(this).attr(class, timeunselectclass); });}else {hourisfirst false;}}}); //初始化调用iscroll代码document.addEventListener(touchmove, function (e) { e.preventDefault(); }, false);
document.addEventListener(DOMContentLoaded, loaded, false); //滚动到当前初始化的值 myhourScroll.scrollToElement(li:nth-child( hour ), 300); 3、水平滚动 主要分析css利用到的关键是css position这个属性可以参考查看potioin设置 !doctype html
html
head
meta charsetutf-8
meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalable0, minimum-scale1.0, maximum-scale1.0
title家庭成员/title
style typetext/css.mfpiccontext2{position: absolute;z-index: 2;width:100%;top:3.2em; padding:15px 0px; text-align:center;}.mfpiccontext2 ul {width: 40em;overflow: hidden;float: left;}.mfpiccontext2 li{ float:left; width:5em; text-align:center;}.mfpiccontext2 li img{ width:85%; border:1px solid #f78320; border-radius:38px;}
/stylescript srcjscript/jquery-1.11.2.min.js/scriptscript srcjscript/iscroll.js/scriptscript typetext/javascript var myScroll;function loaded() {myScroll new iScroll(wrapper);}document.addEventListener(touchmove, function (e) { e.preventDefault(); }, false);document.addEventListener(DOMContentLoaded, loaded, false);/script
/headbodydiv classpicadddivtitle滑动选择头像/divdiv classmfacontentdivdiv class mfpiccontext2 idwrapperulliimg srcimages/ompic.png//liliimg srcimages/ompic.png//liliimg srcimages/ompic.png//liliimg srcimages/ompic.png//liliimg srcimages/ompic.png//liliimg srcimages/ompic.png//liliimg srcimages/ompic.png//liliimg srcimages/ompic.png//li/ul/div/div
/body
/html 4、垂直滚动 .wrapper {position: absolute;top: 14em;height: 6em;left: 0;right: 0;overflow-y: scroll;overflow-x: hidden;z-index: 5;}.ultime li {text-align: center;font-size: 1em;height: 2em;display: block;line-height: 2.0em;width: 4em;}div classwrapper div classtimesetdiv idwrapperhour styleoverflow: hidden; ul idhourlist classultime ultimeright li/lili classtimeunselectclass00/li li classtimeunselectclass01/li li classtimeunselectclass02/li li classtimeunselectclass03/li li classtimeunselectclass04/li li classtimeunselectclass05/li li classtimeunselectclass06/li li classtimeunselectclass07/li li classtimeunselectclass08/li li classtimeunselectclass09/li li classtimeselectncl10/li li classtimeunselectclass11/li li classtimeunselectclass12/li /ul /div
div//初始化小时、分钟滚动条
$loadHourMinuteData function (hour, minute) {hour hour 1;minute minute 1;myhourScroll new iScroll(wrapperhour, {snap: li,momentum: false,hScrollbar: false,vScrollbar: true,onScrollEnd: function () {if (!hourisfirst){var ChangeTemplet (this.currPageY);if (ChangeTemplet 23)ChangeTemplet 23 $(#btnhour).val(ChangeTemplet);$(#lbhour).text(ChangeTemplet);var currobject $(#hourlist).children()[ChangeTemplet 1];$(currobject).attr(class, timeselectncl);$(currobject).siblings().each(function () { $(this).attr(class, timeunselectclass); });}else {hourisfirst false;}}});myminuteScroll new iScroll(wrapperminute, {snap: li,momentum: false,hScrollbar: false,vScrollbar: false,onScrollEnd: function () {if (!minuteisfirst) {var ChangeTemplet (this.currPageY);if (ChangeTemplet 59)ChangeTemplet 59$(#btnmiute).val(ChangeTemplet);$(#lbminute).text(ChangeTemplet)var currobject $(#minutelist).children()[ChangeTemplet 1];//console.log(currobject);$(currobject).attr(class, timeselectncl);$(currobject).siblings().each(function () { $(this).attr(class, timeunselectclass); });}else {minuteisfirst false;}}});myhourScroll.scrollToElement(li:nth-child( hour ), 300);myminuteScroll.scrollToElement(li:nth-child( minute ), 300);
} 代码分析灵活运用转载于:https://www.cnblogs.com/xibei666/p/5076763.html
