软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 新闻 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

分享两个Jquery图片居中缩放预加载插件

时间:12-22 10:06 来源:完美时光 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  图片缩放、居中——这一直是我想解决的问题。因为对于正规性的网站来说,图片都是要经过处理才上传到页面上去的,但是一般的企业或是小行业网站,编辑又怎么会去处理下图片

图片缩放、居中——这一直是我想解决的问题。因为对于正规性的网站来说,图片都是要经过处理才上传到页面上去的,但是一般的企业或是小行业网站,编辑又怎么会去处理下图片的尺寸呢,最多也就是改一下水印。所以上传到网站上后显示出来的图片就感觉像是变了形,一点也不美观。

前不久在做一个WP模版时找了个小插件(暂且命名为VLoadedImg)我改了下,终于可以实现图片按比例缩放,并且居中显示了。但是这个小插件还是有个小问题,虽然图片没有变形,但是因为是按比例缩放到指定容器中全部显示,所以如果图片的比例与容器不一致,那上下或左右的留白就会比较多,页面中图片多的话对于正规正矩的页面来说也不是很美观。

今天无意浏览博客时,在WEB前端开发上看到了一个好的小插件——VMiddleImg,试了下感觉蛮不错的,不仅可以实现图片居中而且还可以缩放裁剪(当然不是真正意义上的裁剪,只是把不显示的隐藏起来了)。

话回来还是先说说这VMiddleImg

此脚本拟达到以下需求:

1、当图片高或宽超过父容器时截取中间部分显示。

2、当图片宽高小于父容器时,居中显示。

3、插件中”width”和”height”两个参数可以设定图片实际输出的宽度。

4、可以通过样式设置图片的偏移位置,例如.themes2 li a img{ margin-top: -5px; margin-left: -5px};

5、第3点和第4点结合可以尽可能的解决一个问题,就是解决图片边缘模糊是造成视觉上的不爽。

不爽之处:

1、图片上要加上width和height

2、无预加载效果

演示地址:在线演示

下载地址:115下载

之前用的那个VLoadedImg也总结了下

此脚本拟达到以下需求:

1、当图片高或宽超过父容器时按比例缩放。

2、当图片小于父容器时,居中显示。

3、显示预加载效果。

不爽之处:

1、不能裁剪

演示地址:在线演示

下载地址:115下载

怎么样,有你想要的嘛?至于插件中存在的小喝下我向鸟建议下。争取做到更好。

感谢 wmtimes 的投稿

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,分享两个Jquery图片居中缩放预加载插件对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与分享两个Jquery图片居中缩放预加载插件无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈