• 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,呵呵 最近发现的。

  • 相关阅读:
    在实体属性上通过注解格式化日期
    @Validated和@Valid区别:Spring validation验证框架对入参实体进行嵌套验证必须在相应属性(字段)加上@Valid而不是@Validated
    两种根据关键字查询的方法SQL
    excel批量导入数据
    下载excel模板
    上传人员照片
    身份证校验类
    把字符串参数分割成数组 传入SQL foreach遍历查询
    使用Hibernate-Validator优雅的校验参数
    如何使用Graphics2D在一张图片上画线(包括箭头)
  • 原文地址:https://www.cnblogs.com/Longkin/p/1318938.html
Copyright © 2020-2023  润新知