zoukankan      html  css  js  c++  java
  • jQuery插件ImageBox的使用

    具体的下载包,网上好像有很多,我只想说一下我在网站加这个效果时,遇到的一些问题。

    给一个我用的下载包:http://www.cssrain.cn/article.asp?id=616

    图片显示的页面

         如果你想哪个图片有此效果就要给这个图片的的链接加上rel属性,否则不会有效果的哦,至于rel的值吗,我随便写也可以用的,无论把图片放在什么容器中,必须要有这个属性的。

         在显示大图时你会发现左下脚,显示 "Showing image 1 from 1",有两个数字,这个是根据rel的值的来决定的,如果有多个相同的rel值,JQuery就会把这几个相同rel的图片列为一组,所以from后的数字就是这组成员数量啦。

         每个图片要加上链接,至于链接的目标,我测试是没什么作用的,你必须要加title,这个是在现实打图像时那个图像名称,如果你没写的话,就会出现undefind

         样式表中的有要显示时候需要用到的样式,你可以修改的。

     /*显示的页面背景色*/ 

       #ImageBoxOverlay {
     BACKGROUND-COLOR: #ccc
    }

    /*最底部的背景色*/
    #ImageBoxCaption {
     BACKGROUND-COLOR: #f4f4ec
    }

    /*显示图片区域的那个样式*/
    #ImageBoxContainer {
     WIDTH: 250px; HEIGHT: 250px; BACKGROUND-COLOR: #f4f4ec
    }

    /*图片文字说明也就是那个图片链接的title)样式,*/
    #ImageBoxCaptionText {
     FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 5px; COLOR: #000
    }
    #ImageBoxCaptionImages {
     MARGIN: 0px
    }

    /*鼠标移动到右边时显示的下张图片的那个背景图片*/
    #ImageBoxNextImage {
     BACKGROUND-IMAGE: url(spacer.gif); BACKGROUND-COLOR: transparent
    }

    /*鼠标移动到左边时显示的上一张图片的那个背景图片*/
    #ImageBoxPrevImage {
     BACKGROUND-IMAGE: url(spacer.gif); BACKGROUND-COLOR: transparent
    }

    /*鼠标移动到右边时显示的下张图片的那个表示图片*/
    #ImageBoxNextImage:hover {
     BACKGROUND-POSITION: right top; BACKGROUND-IMAGE: url(/imagebox/next_image.jpg); BACKGROUND-REPEAT: no-repeat
    }

    /*鼠标移动到左边时显示的上一张图片的那个表示图片*/

    #ImageBoxPrevImage:hover {
     BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(/imagebox/prev_image.jpg); BACKGROUND-REPEAT: no-repeat
    }

    2009-4-17修正

    在imagebox的使用过程,发现当鼠标移到有些图片上面时候,不能显示下一张和上一张的图片,最后测试发现啊,imagebox 中的a标签不能使用小写的,只能使用大写的A,呵呵 最近发现的。

  • 相关阅读:
    CH the luckiest number 欧拉函数 同余
    bzoj1257余数求和 数论分块 暴力
    luogup1463 反素数
    CH3101 阶乘分解
    T10396 曹老板斗地主(中度模拟)
    NOIP 2015子串(DP)
    CF1205B Shortest Cycle(Floyd判最小环)
    P2055 [ZJOI2009]假期的宿舍(二分图匹配)
    灾后重建(最短路)
    CF1098A Sum in the tree(贪心)
  • 原文地址:https://www.cnblogs.com/Longkin/p/1318938.html
Copyright © 2011-2022 走看看