这次来分享一个用jquery实现的一个类似于简单图文介绍的列表目录。
- 先设置一个开头标题heml代码,再添加一下它的css样式。
2.记住,写完上面的代码到js框架这个地方我们需要用到jquery插件,所以一定要先引入,否则后面打代码打着打着就忘记了。
3.这里我们创造一个方法,这个方法里面我们把一个列表的图片,标题和序号还有简介都封装在里面。(这里你想封装多少个都可以,我里面是封装了十一个的)
4.然后把那个方法名在下面这里,写一个for函数循环创造,在函数里面写一个形参,后面添加内容直接引用形参加方法里面的名称即可,这里需要用append的一个添加标签方法,选定到list的id然后在这里添加标签。
5.后面给个反引号作为添加,这样就可以不用这么麻烦那些乱码看着的代码,再把movie引用进来分别填写到四个地方后序加上封装里面的标题,序号,图片和介绍。
6.这边添加之后肯定也是要设置一下样式的,样式的代码和效果展示。
7.最后用一个鼠标伪类事件hover,jquery方法和this,鼠标滑到li标签的话再用查找标签的方法find,当前标签就会触发一个jquery的slideToggle上卷下拉动画效果。
8.下面是展示效果。
上面就是我所学到的jquery部分知识制作的列表单,新手上路,多多指教,如果有更好的方法或不 懂得地方欢迎在评论区教导和提问喔!