鼠标移上图片变暗效果,超炫的网页滑动效果

第一部分预览效果

css:@charset "utf-8";
/*页脚导航*/
#footer{background:#FFF;bottom:0;position:fixed;width:100%;height:54px;}
#footer-content{background:url(http://jingyan.baidu.com/images/fc_bg.jpg) repeat-x;height:54px;width:100%;}
#toolbar{height:100%;list-style:none;margin:0 auto;display:block;width:410px;}
#toolbar li{float:left;display:block;width:82px;height:54px;line-height:54px;text-align:center;}
.inactive{display:block;width:82px;height:54px;float:left;line-height:54px;text-align:center;cursor:pointer;font-size:14px;}
.inactive a{font-size:14px;color:#333333;text-decoration:none;}
#footer .active{background:url(http://jingyan.baidu.com/images/li_bg.jpg) no-repeat;color:#4998fa;display:block;width:82px;height:54px;float:left;line-height:54px;text-align:center;cursor:pointer;}
#footer .active a{font-size:14px;color:#4998fa;text-decoration:none;}
img{border:none;}
#footer li a{display:block;width:82px;height:54px;}
/*优惠活动*/
.page3{width:900px;height:100%;margin:0 auto;}
.page3 .content{width:900px;height:468px;position:relative;}
.page3 .mask{position:absolute;background:#000;left:0;top:0;width:444px;height:148px;}
/*热销单品*/
.page4{width:900px;height:100%;margin:0 auto;}
.page4 .content{width:900px;height:380px;position:relative;}
.page4 .mask{position:absolute;background:#000;left:0;top:0;}
.page4 .m1{width:250px;height:250px;}
.page4 .m2{width:120px;height:120px;}
.page4 .item1{display:block;width:250px;height:250px;}
.page4 .item2{display:block;width:120px;height:120px;}
.page4 .item2 .mhover{width:120px;height:20px;background:url(http://jingyan.baidu.com/images/rx/m_bg.png) no-repeat;position:absolute;bottom:0;font-size:12px;font-family:Arial, Helvetica, sans-serif,"宋体";line-height:20px;text-align:center;color:#FFF;display:none;}
.page4 .mhover span{color:#ff0000;font-weight:bold;}
.page4 .item1 .mhover{width:250px;height:40px;background:url(http://jingyan.baidu.com/images/rx/big_bg.png) no-repeat;position:absolute;bottom:0;font-size:20px;font-family:Arial, Helvetica, sans-serif,"宋体";color:#FFF;display:none;}
.page4 .item1 .mleft{width:114px;height:40px;float:left;text-align:right;line-height:40px;padding-right:38px;}
.page4 .item1 .mleft span{color:#ff0000;font-size:30px;font-weight:bold;}
.page4 .item1 .mright{width:97px;height:40px;float:left;line-height:40px;text-align:left;}
.page4 .item1 .mright span{color:#ff0000;font-size:30px;font-weight:bold;}
/*外套*/
#frame {overflow: hidden;margin: 0 auto;width: 100%;position:fixed;top:122px;}
#scroller {width: 1024px;margin: 0 auto;overflow: hidden;}
#content {width: 6144px;}
.section {width: 1024px;float: left;height: 100%;}
.wrapper{position:fixed;top:0px;width:100%;}
.page4 .content a{text-decoration:none;}

第二部分预览效果

第三部分预览效果哦

第四部分哦

哈哈，最后一部分了

js(没办法由于很多效果用到了js代码所以呢，代码自然比较长喽，大家慢慢滴耐心看吧)

虽然有点长，但是效果还是不错的哦

用户类似问题：

问题1：CSS怎样用hover实现图片暗中反亮的效果？

用css的a:hover完全可以做到 有两种思路： 1-是做两张图，一张上有遮罩，一张是正常的图 2-一个a标签里，放一个隐藏的透... >>详细

问题2：网页 JavaScript HYML5 鼠标滚轮驱动的图片组左右...

你要的效果用附件的形式上传了。。。。。【记得采纳我的】！！！！ 简单的介绍下功能： ①支持鼠标滚轮。 ②支持键盘左右... >>详细

问题3：请教大神，CSS怎么实现鼠标移至一张图片时，图片变...

你这种效果纯CSS是搞不出来的，我这有个类似的，你看看行不行 div{ float: left; width: 180px; height: 180px; margin: 0 auto; background: url(Zombatar_1.jpg) center center no-repeat; z-index: 1;}a{ filter: alpha(opacity=80); opacity... >>详细

问题4：网页制作，鼠标经过图片变暗,点击变大,图标上浮，...

其实就是html里面的a标签的css属性伪类，link、visited、hover、active；通过css可以实现的。 >>详细

问题5：求网页上的一个鼠标滑动事件，就是移动到网站标题...

看看是不是这种图片切换 有12345数字一起切换 鼠标点一下数字会变换到另一张图片，不点就会自动换 里面有教程和源码 >>详细