文档章节

焦点图学习

h
 housezhang
发布于 2015/11/23 13:52
字数 336
阅读 5
收藏 0
点赞 0
评论 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
贵阳
13、优化轮播图组件与vue深度处理器

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

Ewall_ ⋅ 06/22 ⋅ 0

面向对象中经常会用到序列图讲解

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

qingliangdexiar ⋅ 2017/05/31 ⋅ 0

10 个基于 jQuery/CSS3 的图片特效

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

ruby_chen ⋅ 2013/10/26 ⋅ 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

使用canvas寻路最小生成树

online source 问题引入 在学习了加权无向图寻找最小生成树的算法之后,想通过可视化的方式来表示一个图的构造和最小生成树的寻路过程,就使用canvas来模拟了图的构造,连接边和加重显示最小...

xiyuyizhi ⋅ 2017/11/12 ⋅ 0

20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen ⋅ 2013/10/14 ⋅ 5

推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229 ⋅ 2017/07/03 ⋅ 0

【Android游戏开发二十三】自定义ListView【通用】适配器并实现监听控件!

李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/374.html ListView :在Android应用开发过程中属于最常用的系统组件之...

迷途d书童 ⋅ 2012/03/19 ⋅ 0

JS三教九流系列-jquery实例开发到插件封装3

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址 http://my.oschina.net/u/2352644/blog/49082...

透笔度 ⋅ 2015/08/25 ⋅ 0

微信小程序学习笔记(三)

视图容器组件 view view是最常用的视图容器组件,相当于HTML页面的标签,推荐使用flex布局。 示例代码 wxml: wxss: 效果图: 图(1) scroll-view 属性表 可滚动视图区域的属性参见表1: 表1 s...

Mr_OOO ⋅ 2017/06/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

20.zip压缩 tar打包 打包并压缩

6月25日任务 6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩 6.5 zip压缩工具: zip支持压缩目录 zip压缩完之后原来的文件不删除 不同的文件内容其实压缩的效果不一样 文件内有很多重复的用xz压...

王鑫linux ⋅ 1分钟前 ⋅ 0

double类型数据保留四位小数的另一种思路

来源:透析公式处理,有时候数据有很长的小数位,有的时候由在四位以内,如果用一般的处理方法,那么不足四位的小树会补充0到第四位,这样子有点画蛇添足的感觉,不太好看。所以要根据小数的...

young_chen ⋅ 8分钟前 ⋅ 0

Python 优化 回溯下降算法

使用sympy构造表达式,实现回溯下降算法 画出函数图像,先使用暴力搜索,找到最小值约为2.5左右 然后选定初始点,开始进行回溯搜索,下降方向为负梯度方向 完整代码 from matplotlib import...

阿豪boy ⋅ 13分钟前 ⋅ 0

Django配置163邮箱出现 authentication failed(535)错误解决方法

最近用Django写某网站,当配置163邮箱设置完成后,出现535错误即:smtplib.SMTPAuthenticationError: (535, b'Error: authentication failed') Django初始配置邮箱设置 EMAIL_HOST = "smtp.1...

陈墨轩_CJX ⋅ 14分钟前 ⋅ 0

用接口模拟可伸缩枚举(34)

1、枚举的可伸缩性最后证明都不是什么好点子 扩展类型的元素是基本类型实例,基本类型的实例却不是扩展类型的元素,很混乱 目前还没有很好的方法来枚举基本类型的所有元素,及其扩展 可伸缩性...

职业搬砖20年 ⋅ 18分钟前 ⋅ 0

Ubuntu18.04 IDEA快捷键无法使用

IDEA默认的回退到上一视图的快捷键是Ctrl + Alt + Left,在ubuntu中这个快捷键被占用了,在16.04中可以在界面中取消这个快捷键,但是18.04就看不到了,可以使用以下命令解决 gsettings set ...

Iceberg_XTY ⋅ 22分钟前 ⋅ 0

如何解决s权限位引发postfix及crontab异常

一、问题现象 业务反馈某台应用服务器,普通用户使用mutt程序发送邮件时,提示“postdrop warning: mail_queue_enter: create file maildrop/713410.6065: Permission denied”,而且普通用法...

问题终结者 ⋅ 34分钟前 ⋅ 0

Unable to load database on disk

由于磁盘空间满了以后,导致zookeeper异常退出,清理磁盘空间后,zk启动报错,信息如下: 2018-06-25 17:18:46,904 INFO org.apache.zookeeper.server.quorum.QuorumPeerConfig: Reading co...

刀锋 ⋅ 54分钟前 ⋅ 0

css3 box-sizing:border-box 实现div一行多列

<!DOCTYPE html><html><head><style> div.container{ background:green; padding:10px 10px;}div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Fir......

qimh ⋅ 59分钟前 ⋅ 0

Homebrew简介和基本使用

一、Homebrew是什么 Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径...

说回答 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部