图片轮换的按钮如何通过像素定位
图片轮换效果是很多网站某些模块所需要的样式,但对于两边的按钮的加载与控制,常常让人不知所措,很头大。
网上也有很多种这样的特效,会将左右两边的图片做到一张图上,用像素定位即可获得想要的图片效果。
比如小按钮的图片为
下边是css的样式
a.abtn
{display: block;height: 130px;width: 15px;overflow: hidden;background: url(/images/frontground/arrow4.png) no-repeat 0px 50%;
}
a.aleft
{float: left;
}
a.agrayleft
{cursor: default;background-position: -30px 50%;
}
a.aright
{float: right;background-position: -15px 50%;
}
a.agrayright
{cursor: default;background-position: -45px 50%;
}
对应的页面代码如下:
<a class="abtn aleft" href="#left" title="左移"></a><a class="abtn aright" href="#right" title="右移"></a>
a.abtn:定义背景图片,以及设定图片的大小
a.aleft:定义元素左浮动
a.agrayleft:定义图片左滑动,有图片滑动时,按钮的背景图片
a.aright:定义元素右浮动,并且按钮的背景图片
a.agrayright:定义图片右滑动,没有图片滑动时,按钮的背景图片
对应每个css的含义说明,通过下边的图片定位再加上abtn这个样式,即可得到相应的图片。
比如 <a class="abtn aleft" href="#left" title="左移">这个css中abtn是加载背景图片和规定图片的大小,aleft是设置背景图片左浮动,两者结合即可以定位左边按钮的背景图片,对应的<a class="abtn aright" href="#right" title="右移"></a>也是相同的道理。
对应鼠标点击按钮,进行滑动后,就要通过abtn agrayleft 控制有左滑动 图片时按钮的背景图片,abtn agrayleft控制没有右滑动图片时按钮的背景图片。
如果想通了,其实是很好玩的,如果有什么疑问,可以留言,我会尽快给予回复。
图片轮换的按钮如何通过像素定位相关推荐
- Flash 图片轮换效果
Flash全站的技术应用系列: (一)AS+JS的Flash网站无刷新定位技术 (二)Flash网站的SEO (三)Flash网站的流量统计 (四)让Flash网站具有IE前进后退的功能 (五)图片 ...
- 转:享受 Bcastr 4.0,优秀的通用图片轮换播放器~~
特别提示:xml 是可以动态生成的,但是在生成的时候要着重考虑 bcastr4.swf .bcastr.xml 以及 图片的路径关系,另外需要注意 flash新版本 是不能跨域的,flash里面的链接 ...
- CMS用通用图片轮换flash幻灯片播放器:Bcastr3和Bcastr4
这款Bcastr通用图片轮换播放器(或者叫他幻灯片播放器),由于其简洁的代码及其易用性,被dedeCMS.PHPCMS.帝国CMS.Z-blog等诸多网站内容管理程序开发者广泛引用.被使用的最多的是b ...
- js图片轮换显示实例(转载)
2019独角兽企业重金招聘Python工程师标准>>> 转自:http://www.cnblogs.com/yes123/p/3702519.html 用js脚本实现图片轮换显示,很 ...
- javascript图片轮换
先完成结构层与表现层部分,做一个纯CSS相册,好让JS不能动弹时,相册还能运作.过程见<纯CSS相册>,只不过是在它的基础再做了一些优化,更符合人的思路走向,好让下面JS顺产而已. < ...
- 简单的图片轮播器(一):一个关于仿flash的图片轮换器
仿flash的图片轮换器 web小渣渣,最近在网上看了一个n年前的视屏(地址这里)照着视屏的代码参照网上的写了一波,发一篇博客记录一波 学习历程 最终效果图: 最终代码如下: tuPianLunHua ...
- javascript图片轮换2
javascript图片轮换2 图片轮换是一种相当复杂的技术,早些年基本用flash实现.这里有一个链接,教大家如何用flash实现它的.之所以用flash,是因为flash是基于帧的,这与图片轮换的 ...
- php中轮转图片js代码,js实现图片轮换效果代码
var numb = 0; var imgnumb = 1; function showimg() { //两张图片切换方法1 /*numb++; if (numb % 2 == 0) { docum ...
- Py之wxPython:利用wxPython设计GUI界面(图片背景+简单按钮)
Py之wxPython:利用wxPython设计GUI界面(图片背景+简单按钮) 目录 实现界面 实现代码 实现界面 实现代码 import wxclass MyPanel(wx.Panel):def ...
最新文章
- 基于.Net Core开发现代化Web应用程序系列课程和文章
- ASP.NET MVC实践系列5-结合jQuery
- 浅谈Lucene中的DocValues
- Android AsyncTask源码解读
- jQuery自定义选择器
- OpenDiscussion_DataDrivenDesign
- [codility]Min-abs-sum
- STM32工作笔记0055---认识pcbdoc文件Schdoc文件
- 完美!解决无法启动承载网络的问题
- 如何在Ruby中编写switch语句
- 百炼-2701:与7无关的数
- 腾讯会议共享屏幕,ppt如何使用演讲者模式
- IDEA环境下yml文件不显示小绿叶(不被识别为配置文件)
- iOS友盟社会化分享完全攻略
- 数据分析师,你是车夫,还是拉车的驴子
- 微信营销为什么会用到微信公众号客服系统?
- 边缘计算的下一场革命:1+12?
- 小程序轮播图_微信小程序层叠轮播图
- 疲惫的 618,很难再激起年轻人的多巴胺?
- 微信奇销36计 赖老师
热门文章
- 淘宝卖家如何通过宝贝详情页装修提高店铺转化?
- 嵌入式系统的基本架构
- 苹果手机充电孔变松了_用iPhone 12的MagSafe无线充电器给安卓充电?苹果:你想多了|充电器|手机|安卓手机|iphone...
- drawboard pdf拆分文件_Drawboard PDF(pfd处理软件)V5.5.20.1 最新版
- 聊一聊期货反向跟单百科知识
- 学习网站:中国大学MOOC(慕课)
- 求职与面试(一):Java必备
- Peter Coad的7项修炼
- 【Linux】Linux下基本指令(二)
- python统计字母a的个数_32个经典Python小例子测测你的基础知识(11-20)