您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

网页设计中用VMiddleImg来达到图片居中裁切效果(图)

51自学网 2022-05-14 19:13:06
  javascript
对于正规性的网站来说,图片都是要经过处理才上传到页面上去的,但是一般的企业或是小行业网站,编辑又怎么会去处理下图片的尺寸呢,最多也就是改一下水印。所以上传到网站上后显示出来的图片就感觉像是变了形,大小不一,长宽不一,一点也不美观。
VMiddleImg可以实现图片居中而且还可以缩放、居中、裁剪(当然不是真正意义上的裁剪,只是把不显示的隐藏起来了)。
此脚本拟达到以下需求:
1、当图片高或宽超过父容器时截取中间部分显示。
2、当图片宽高小于父容器时,居中显示。
3、插件中”width”和”height”两个参数可以设定图片实际输出的宽度。
4、可以通过样式设置图片的偏移位置,例如.themes2 li a img{ margin-top: -5px; margin-left: -5px};
5、第3点和第4点结合可以尽可能的解决一个问题,就是解决图片边缘模糊是造成视觉上的不爽。
不爽之处:
1、图片上要加上width和height
2、无预加载效果

下载地址:[ 下载地址1 ]
相册的纵向选择效果 JS代码 JS纵向相册效果 非常方便有用的JS代码
可以实现6屏左右循环滚动效果的图片代码
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1