ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码

jq实现酷炫的鼠标经过图片翻滚效果(1/2)

来源:网络整理     时间:2016-06-06     关键词:jq,图片

本篇文章主要介绍了"jq实现酷炫的鼠标经过图片翻滚效果",主要涉及到jq,图片方面的内容,对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下: 短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果! html结构: 复制代码 代码如下...

短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果!
html结构:

复制代码 代码如下:




css代码:

复制代码 代码如下:


*{ margin:0; padding:0;}
.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}
.list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}
.list li img{ float:left; width:150px; height:80px; border:none;}
.list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}


jq代码(注意要引入jq库):

复制代码 代码如下:

相关图片

相关文章