分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

css样式支持左右滑动要点

发布时间:2023-09-06 02:22责任编辑:胡小海关键词:暂无标签

div 包含 ul ,ul 包含 li

div宽度固定,ul 宽度随着li的可以无限增加,li 左右滑动的最小容器。

div 样式position:relative;width:xxpx;height:xxpx;

ul 样式 list-style: none; white-space: nowrap;position: absolute; top: 0; left: 0;margin: 0px; padding: 0px;

li 样式 display: inline-block; vertical-align: top;list-style: none;white-space: nowrap;

 li元素水平有间隙,需要在其父元素上加配置:font-size:0

滚动设置:

 1 $(".mini-docker-right-array").click(function(event){ 2 ????????????var p = ?$(this).parent().parent(); 3 ????????????var appToScroll = p.find(".app-to-scroll"); 4 ????????????var ul = p.find(".node-scroll-container"); 5 ????????????var ulLeft = parseInt(ul.css("left")); 6 ????????????var left = ulLeft; 7 ????????????if(ul.width() + ul.position().left > appToScroll.width()){ 8 ????????????????left = ulLeft - appToScroll.width(); 9 ????????????}10 ????????????ul.animate({11 ????????????????"left": left + "px"12 ????????????});13 ????????????event.stopPropagation();14 ????????})15 ????????16 ????????$(".imagebutton-left-botton").click(function(event){17 ????????????var p = ?$(this).parent().parent();18 ????????????var appToScroll = p.find(".app-to-scroll");19 ????????????var ul = p.find(".node-scroll-container");20 ????????????var ulLeft = parseInt(ul.css("left"));21 ????????????var left = ulLeft = appToScroll.width();22 ????????????if(left > 0){23 ????????????????left = 0;24 ????????????}25 ????????????ul.animate({26 ????????????????"left": left + "px"27 ????????????});28 ????????????event.stopPropagation();29 ????????})

css样式支持左右滑动要点

原文地址:https://www.cnblogs.com/sxtg/p/9950565.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved