怎样实现ul、li 切换、滚动？有详细的步骤吗？

nansilafu 2017-12-27 04:19:15

刚学了静态页代码，没做过这种滚动，看了半天都不明白，好复杂。

这怎么弄？html、css以及js怎么写呢？

...全文

663 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

当作看不见 2017-12-27

打赏
举报

回复

http://blog.csdn.net/qq_29594393/article/details/52891881 提供一个简单的示例 , 就三行jq 代码..

li ，div 自动切换，可用按钮切换，图片滚动，效果真的一级棒，是目前我找到的最棒的一个，需要的亲赶紧下手。适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

之前我们为大家分享过一款jQuery内容层叠滚动切换动画插件，主要是针对文字的层叠式切换。今天要介绍的也是一款层叠式切换插件，不过它是一款jQuery焦点图应用，除了当前的图片，我们可以看到所有图片的一部分，切换后显示下一张图片，切换动画是层叠式的效果。下面我们一起来看看实现这款jQuery层叠式图片切换焦点图的具体细节。 HTML代码 HTML代码非常简单，主要是使用了ul列表将所有图片列出来，当然需要在ul外面包一层div，并将div的class设置成carousel，因为后面jQuery调用时需要找到这个节点，具体代码如下：

<ul class="list"> <li>li> <li>li> <li>>

本项目是集vue2.6+vuex+vue- router+Element Ul+ES6+webpack+axios+Nodejs等技术栈打造的一款商城项目。内容包含:项目需求分析、首页组件和商品组件模块显示、用户模块显示、Token+JWT登录流程、购物车商品操作等功能。本项目以实战项目为切入点，模拟公司Vue项目研发流程，从头到尾讲解项目功能实现和优化、打包上线流程等，帮助提高你的技术层级，突破技术瓶颈。

代码片段： <ul class="ct-fimglist clearfix"> <li class="ct-banner01">li> <li class="ct-banner02">li> <li class="ct-banner03">li> <li class="ct-banner04">li> ul>

这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrapper').scroll({ bounce: false, indicators: true, //是否显示滚动条 deceleration:deceleration }); $.ready(function() { //循环初始化所有下拉刷新，上拉加载。 $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) { $(pullRefreshEl).pullToRefresh({ down: { callback: function() { var self = this; setTimeout(function() { var ul = self.element.querySelector('.mui-table-view'); ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild); self.endPullDownToRefresh(); }, 1000); } }, up: { callback: function() { var self = this; setTimeout(function() { var ul = self.element.querySelector('.mui-table-view'); ul.appendChild(createFragment(ul, index, 5)); self.endPullUpToRefresh(); }, 1000); } } }); }); var createFragment = function(ul, index, count, reverse) { var length = ul.querySelectorAll('li').length; var fragment = document.createDocumentFragment(); var li; for (var i = 0; i < count; i ) { li = document.createElement('li'); li.className = 'mui-table-view-cell'; li[removed] = '第' (index 1) '个选项卡子项-' (length (reverse ? (count - i) : (i 1))); fragment.appendChild(li); } return fragment; }; }); })(mui); [removed]

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章