栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

非常不错的 子鼠 滑动图片效果 Javascript+CSS

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

非常不错的 子鼠 滑动图片效果 Javascript+CSS

第一步,设计一下我想要的效果!
我用FW把以前作的相册效果(https://www.jb51.net/blogview.asp?logID=628)改了改,设计一张简单的效果图!

第二步,布局!
复制代码 代码如下:











这时可以看一下效果:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第三步,设计一下Javascript;
复制代码 代码如下:


这个时候再看一下效果!

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第四步,写CSS来完成计划时的样子!
复制代码 代码如下:


*{ margin:0; padding:0; list-style:none;}

body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;}

img{ border:0; display:block;vertical-align:middle}


#imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;}

#imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden}

#imgBox,#imgBox ul,#imgBox li{ float:left;}

#imgBox ul{ width:4100px;}


#imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none}
#imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF}
#imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;}
#imgBox a:hover span{ background:#000; color:#fff}


好了,全部完成,看一下最后的效果吧!

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/118493.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号