文档章节

焦点图学习

h
 housezhang
发布于 2015/11/23 13:52
字数 336
阅读 5
收藏 0

焦点图实现方法有很多,我才刚刚开始接触,我用的方法有两种,一个是无序列表,一种是普通div实现基本效果。

这两种方法的基本原理都是overflow来做,每次现实的地方只有一部分。然后控制显示部分的位置样式来改变焦点。

第一种:点击下一页或者上一页。这种方法的原理就是,当我们执行某一事件时,改变无序列表的顺序,如果是点击下一页,就把无序列表的第一个元素放到最后一个,相关方法:firstchild(),append();.animate();

第二种方法:点击li。这种方法只需要两个div;一个用来显示的div(外围,宽高比内部div小),另一个用来存放内容的div(宽高比外围的大)。具体方法,判断点击的li的index值,然后通过改变内部div的样式(margin-left),来实现动画效果,然后,给点击的li添加一个类并且清楚其他的li的同名类,用这个类来突出被点击的li和其他li的不同之处。


© 著作权归作者所有

共有 人打赏支持
h
粉丝 0
博文 2
码字总数 718
作品 0
贵阳
FL Studio音轨焦点知识介绍

玩音乐的朋友都知道,音轨,是一个乐谱中的很重要的元素,那么关于它的焦点知识又了解多少呢? 在剪辑音轨中是可以把各种剪辑重叠在一起的,但是重叠放置后在某些情况下就会变得不便于编辑。...

Abby88
2017/11/03
0
0
13、优化轮播图组件与vue深度处理器

前言:上篇讲了vue里面轮播图组件的使用,还有有个小问题可以优化一下。 github:https://github.com/Ewall1106/mall 1、焦点问题 我们看到这里的焦点会有一个默认的颜色,改变这个焦点颜色也...

Ewall_
06/22
0
0
面向对象中经常会用到序列图讲解

序列图的重要性 这个序列图的重要性不仅仅表现在它在使用软件工程和软件开发中,甚至是表现在某些算法当中,当然作为一个学计算机的人,你可以把它使用放在任何你觉得能够看得懂的地方去。 ...

qingliangdexiar
2017/05/31
0
0
10 个基于 jQuery/CSS3 的图片特效

jQuery作为理想的开源Javascript开发库,已经被广大前端开发者所接受和使用,由jQuery编写的图片插件也数不胜数。CSS3是最近几年刚兴起的新技术,CSS3的应用,可以让图片拥有非常绚丽的特效,...

ruby_chen
2013/10/26
591
0
windows下批量删除文件

FORFILES /P d:www /D -7 /S /M ex*.log /C "cmd /c del @path" 删除d:www目录下7天前ex*.log的所有文件 例子: D:test>FORFILES /D -30 /S /M *jpg /C "cmd /c echo @path 0x09 在 30 前就被......

无声胜有声
2015/05/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day96-20180923-英语流利阅读-待学习

英国王子也不看好人工智能,理由却和霍金不同 Daniel 2018-09-23 1.今日导读 2016 年 3 月 9 日至 15 日,世界围棋冠军李世石与谷歌研发的计算机围棋程序 AlphaGo 进行人机大战并以 1 比 4 ...

飞鱼说编程
25分钟前
1
0
今天在码云遇到一个很有意思的人 for Per.js

今天在码云遇到一个很有意思的人,他在我的Per.js项目下面评论了一句,大意为“你试试这句代码,看看速度到底是你快还是Vue快”【当然,这个评论被我手残不小心删掉了...】。 然后我就试了,...

Skyogo
30分钟前
23
0
Java -------- 首字母相关排序总结

Java 字符串数组首字母排序 字符串数组按首字母排序:(区分大小写) String[] strings = new String[]{"ba","aa","CC","Ba","DD","ee","dd"}; Arrays.sort(strings); for (int i ...

切切歆语
32分钟前
1
0
还在用 Git 的 -f 参数强推仓库,你这是在作死!

最近,美国一个程序员因为同事不写注释,代码不规范,最严重的是天天使用 git push -f 参数强行覆盖仓库,该程序员忍无可忍向四名同事开抢,其中一人情况危急!!! 不写注释、代码不规范是一...

红薯
45分钟前
347
0
NPM报错终极大法

所有的错误基本上都跟node的版本相关 直接删除系统中的node 重新安装 sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*} 重新安装 $ n lts$ npm...

lilugirl
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部