建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

图片轮换的两边按钮的加载与控制如何通过像素定位

更新时间:2017-01-08整理编辑:建站学习网阅读:0

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%;  
  • }  
  • 对应的页面代码如下:

    [html]
    1. <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控制没有右滑动图片时按钮的背景图片。


    如果想通了,其实是很好玩的,如果有什么疑问,可以留言,我会尽快给予回复。

     

    [html]
    1.  

    本文网址:https://www.dedexuexi.com/divcss/jc/2245.html

    本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

    标签:技巧
    收藏此文 赞一下!() 打赏本站

    如本文对您有帮助,就请建站学习网抽根烟吧!

    支付宝打赏
    微信打赏
    CSS中a标签样式原则
    « 上一篇2017年01月08日
    CSS网页布局实用小技巧
    2017年01月08日下一篇 »
     
    QQ在线咨询