JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图:
类似于这样的,在列表中循环添加背景样式的跑马灯效果。
准备引入JS插件:
<script type="text/javascript" src="xxx/2017mobile/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="xxx/2017mobile/js/TouchSlide.1.1.js"></script>
然后是页面布局,将个小块做一个div包起来,再单独用一个div来循环样式,而且给样式起个名字on,默认在第一个上加上on的样式名字:
<div class="qw_bzhong" id="qw_bzhong"><div class="hd"><ul><li class="on"><a href="javascript:void(0)" onClick="openZoosUrl();">射精过快</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">勃起困难</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">龟头敏感</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">无法勃起</a></li><div class="clear"></div><li><a href="javascript:void(0)" onClick="openZoosUrl();">龟头水泡</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">龟头痘痘</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">尿频尿急</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">小便刺痛</a></li><div class="clear"></div><li><a href="javascript:void(0)" onClick="openZoosUrl();">尿道瘙痒</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">阴囊瘙痒</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">尖锐湿疣</a></li><li><a href="javascript:void(0)" onClick="openZoosUrl();">阴茎短小</a></li></ul><div class="clear"></div></div><div class="bd" style="display:none;"><ul><li></li></ul></div>
</div>
样式布局依据个人爱好来写,本人用的flex布局,所以就不献丑了。
JS部分:
在引用了Touchslide后,在页面中该部分内容下写入即可:
<script type="text/javascript">TouchSlide({ slideCell:"#qw_bzhong", mainCell:".bd ul", effect:"leftLoop",autoPlay:"true",interTime:"3800" });
</script>
slidecell滑动的部分,maincell滑动的主体内容是ul里面的li,滑动方向从左开始leftLoop,自动滑动autoplay,间隔时间interTime。
转载于:https://www.cnblogs.com/xiaobeiju/p/10224133.html
JS写一个列表跑马灯效果--基于touchslide.js相关推荐
- js html css 图片跑马灯效果(轮播)
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
- 分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- html文本框中加入跑马灯,js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如 ...
- vue 手写图片左右跑马灯 效果
效果图与代码贴上: 1.html部分 <template><div class="box"><Icon class="icons1 icon ...
- java公告栏js资源_javascript公告栏跑马灯效果代码
51前端 ul{ list-style:none; margin:0px; padding:0px; width:1500px; float:left; } ul li{ height:25px; l ...
- web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)
本帖最后由 yoin 于 2019-11-21 16:24 编辑 产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...
- php实现跑马灯闪亮,JavaScript_基于jquery实现的文字向上跑动类似跑马灯的效果,想实现一个类似跑马灯的效果, - phpStudy...
基于jquery实现的文字向上跑动类似跑马灯的效果 想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 恭喜187****5204获得1000RBM 恭喜1 ...
- 原生js实现跑马灯效果,鼠标放下可以停止跑动
js原生代码跑马灯效果纯js代码如下: 1.首先html的内容(里面图片自己可以换,li里面也可以填文字) <div> <ul><li>呵呵呵呵呵3</li& ...
- 原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
最新文章
- 《数据科学:R语言实现》——2.7 爬取网络数据
- 谷歌AI发布“会动的”3D物体数据集,附带标记边界框、相机位姿、稀疏点云,网友:快给我的AR模型用上...
- 链栈的建立、判空、入栈、出栈、求长、访顶、清空和销毁
- 永洪Desktop关于MAC系统使用问题
- Mule学习笔记(二)
- 第三章JavaScript 内置对象
- About Exception Handling
- opengl 关于glGenBuffers函数没有定义
- VC++6.0环境下调试c语言代码的方法和步骤_附图
- WPF自定义Main函数
- 【RTD】AD7793三线式铂电阻PT100/PT1000应用
- SeaweedFS安装部署
- 修改计算机照片格式怎么修,电脑上如何修改照片文件大小?2种免费方法简单解决...
- c#图片转ico自制小工具
- ECS实例及阿里云服务器ECS功能组件的说明
- 105道Java面试题
- 安卓蓝牙操作+蓝牙工具类
- ubuntu双系统命令行访问win盘
- 那一阙词,早已波澜-仓央嘉措
- Hibernate: Duplicate entry for key错误排查