标签 [ 图片 ] 下的文章

两段兼容的控制图片宽度/高度的CSS代码

简单是max-width:就可完成图片最大宽度得限制,但是由于ie6不支持max-width只能通过expression来实现。
下面两段代码效果是一样的,我用的没问题,具体特色大家自行测试。第三段对高度同时做了限制。

代码如下:

img {max-width:400px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 400 ? "400px" : "auto"):"auto"); display:inline !important;}
.img{ 
max-width: 200px; 
height:auto; 
width:expression(this.width > 200 ? "200px" : this.width); 
}


第三段对高度同时做了限制。

.img{
max-width:201px; 
max-height:136px;
width:expression(this.width > 201 && this.width > this.height ? '201' : auto);
height: expression(this.height > 136 ? '136' : auto);
}


CSS实现鼠标滑过图片出现半透明效果

由于个人的一些需要,想通过CSS的方式来实现鼠标滑过图片出现半透明的效果,用JavaScript来实现是比较简单的,但是这里只分享如何用CSS来实现。
CSS中有个opacity属性,可以针对透明来设置,但是它只是对FireFox、Chrome等非IE内核下好用,在IE下并不是很好用。但是CSS下还有一个不常用的属性叫做滤镜filter,这个在IE下就好用。将opacity和filter属性结合一下,就可以实现鼠标滑过出现半透明效果了。

那么对应的CSS的写法如下:

.item1 a:hover img {

opacity:0.7;
filter:alpha(opacity=70);

[jQuery]图片轮播特效

随便一搜这个图片轮播,那源代码不是一份两份,那是几堆几堆哟~不过大部分都写得太复杂或者功能太弱,那咱就用jQuery自给自足呗。

要实现的效果也很明确:自动获取对象列表中第一个元素的宽度,然后列表整体向左平移,再把第一个元素绑定到列表最后去;可以再加个鼠标移到列表上停止平移,移开则恢复。

在线demo:http://immmmm.com/demo/scrollbox/

HTML结构代码:








More »

用Fireworks给美女脸部彩绘





发这篇文章,并不是希望大家看着这篇文章去做这个效果,而是希望能给大家一些启发。不想再把这个东西叫教程,我只是与大家分享一些我的感受,也许你能从中找到你所需要的叠加上你独特的思想,得到更多更有意思的东西。

More »

最新文章

最近回复

链接