css静态滤镜 + A:Hover

css静态滤镜 + A:Hover 的效果

WU XIN

* { margin:0px; padding:0px; }

.i1 { width:64px; border:0px none #888; margin:0px; }

.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}







[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

然后配合上两行 JS, 做成这样,依然 IE Only
Step2:

WU XIN

/* Author: Hutia */
function chkScroll(obj){
var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight;
obj.scrollTop=parseInt((y-y0)/h0*(h1-h0));
}

* { margin:0px; padding:0px; }

#main { height:198px; width:66px; overflow:hidden; }

.i1 { width:64px; border:0px none #888; margin:0px; }

.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}







[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

继续努力,加上磁性效果............就是测试久了会看的头晕.......
Step3:

WU XIN

/* Author: Hutia */
function chkScroll(obj){
var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight;
var sT=parseInt((y-y0)/h0*(h1-h0));
var dif=sT+y-y0-33;
if(dif%6654)sT=sT-dif%66+66;
obj.scrollTop=sT;
}

* { margin:0px; padding:0px; }

#main { height:198px; width:66px; overflow:hidden; }

.i1 { width:64px; border:0px none #888; margin:0px; }

.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}







[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上一个效果鼠标动的快了会很头晕.......又做了一个磁性效果
Step4:

WU XIN

/* Author: Hutia */
function chkScroll(obj){
var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight;
var sT=parseInt((y-y0)/h0*(h1-h0));
if(sT%6656)sT=sT-sT%66+66;
obj.scrollTop=sT;
}

* { margin:0px; padding:0px; }

#main { height:198px; width:66px; overflow:hidden; }

.i1 { width:64px; border:0px none #888; margin:0px; }

.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}







[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

然后再加上一些不知所谓的特效,让这个东东有点动感(小新:看我的动感光波,BBBBB........) -_-

WU XIN

/* Author: Hutia */
function chkScroll(obj){
var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight, currentNode;
var sT=parseInt((y-y0)/h0*(h1-h0));
var pT=document.getElementById("pointer");

if(sT%6656)sT=sT-sT%66+66;
obj.scrollTop=sT;

currentNode=obj.children[parseInt((sT+y-y0)/66)];
if(!currentNode)return;
with(pT.style){
display="block";
backgroundColor=currentNode.currentStyle.borderColor;
pT.baseY=top=currentNode.offsetTop-sT;
left=currentNode.offsetLeft+currentNode.offsetWidth+2;
}

}

function crazyPointer(){
try{
var pT=document.getElementById("pointer");
if(isNaN(parseInt(pT.baseY)))pT.baseY=0;
if(isNaN(parseInt(pT.y)))pT.y=0;
if(isNaN(parseInt(pT.h)))pT.h=0;
if(isNaN(parseInt(pT.vy)))pT.vy=1;
if(isNaN(parseInt(pT.vh)))pT.vh=1;

pT.y+=pT.vy*parseInt(Math.random()*3);
if(pT.y>65){pT.y=65;pT.vy=-1;}
if(pT.y65){pT.h=65-pT.y;pT.vh=-1;}
if(pT.h

* { margin:0px; padding:0px; }

#main { height:198px; width:66px; overflow:hidden; }

#pointer { display:none; position:absolute; width:3px; overflow:hidden; }

.i1 { width:64px; border:0px none #888; margin:0px; }

.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}







[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • css静态滤镜 + A:Hover

    css静态滤镜 + A:Hover 的效果 WU XIN * { margin:0px; padding:0px; } .i1 { width:64px; border:0px none #888; margin:0px; } .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } .a0:hover, .a0:active { filter:Alpha(Opacity=100); disp

  • css静态滤镜 + A:Hover 效果第1/3页

    IE Only Step1: WU XIN * { margin:0px; padding:0px; } .i1 { width:64px; border:0px none #888; margin:0px; } .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:blo

  • css静态滤镜

    很无聊的把n个滤镜堆在一起就成了下面这个效果,呵呵 IE5.5+ Only #pp00 { width:950px; height:256px; position:absolute; left:10px; top:0px; background-color:#000060; font-size:256px; } #pp01 { width:0px; height:256px; background-color:red; position:absolute; left:10px; top:0px;

  • CSS滤镜示范(filter)附源代码(静态滤镜)

    filter(css滤镜) body { margin: 0px; padding: 0px; } table { font-size: 12px; border: 1px solid #0000FF; } tr,td { padding: 0px; border: 1px solid #0000FF; } filter视觉滤镜的种类 Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) DropShadow(不透明阴影) FlipH&FlipV(翻转) Glow(边缘光晕) G

  • 用css alpha 滤镜 实现input file 样式美化代码

    在WEB上传文件时,要用到上传框:  <input type="file" id="f" name="f">         这东东在IE(其他偶没经过测试)中是一个非常特殊的对象. 如果是您手动写入的或其他对象经过某些事件触发填入的值 ,由于安全问题,在进行提交表单时,往往会被清空,所以上传失败. 简单点说,除非你的鼠标亲自点到了上传框f上,IE才会给你上传文件! 哪怕你将 f 的onclick句柄赋给某个对象,如:  <in

  • 用html css javascript打造自己的RIA图文教程第1/2页

    在制作之前,先建立开发环境.打开netbeans6.1,在项目工作区,右击新建项目,选择Web目录下的Web应用程序. 项目名称输入 RIADemo . 选择运行的服务器以及 java ee 标准. 在这里选择tomcat5.0,j2ee1.4,本文介绍例子,并不依赖于服务器,因为html&css&javascript本身都是静态的,做完以后就是一个html文件.严格意义上的web程序肯定是要有一个服务器来运行的,netbeans还是采用了这种管理理念.在这一步,已经可以点击完成建立项目,

  • 利用CSS,链接下划线也玩自定义

    原文链接:CSS Design: Custom Underlines 由 A List Apart 杂志及作者授权翻译.(Translated with the permission of A List Apart Magazine and the author[s].) 说明:文章中"[补充]"内容系译者所补充添加(来自 CSS 2.0 中文手册),目的是方便读者理解相关内容. 虽然网页设计师通常有大量的方法控制文档如何呈现,但是基本的CSS不能为页面中链接下方的下划线样式提供很多选

  • 用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • CSS实现阴影文字效果

    ..:: 巧用CSS制作艺术字 ::.. 如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果.这是一些效果示范,供各位参考. E流设计 用blur滤镜做出的效果,代码如下: FILTER: blur(direction=135,strength=8) E流设计 用dropshadow滤镜做出的效果,代码如下: FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1) E流设计 用glow滤镜做出的效果,代码如下:

  • Tomcat中对静态资源的处理教程

    前言 Tomcat 中的请求都是由 Servlet 处理,静态资源也不例外.在默认的 web.xml 中,配置了一个 DefaultServlet 用于处理静态资源,它支持缓存和断点续传. DefaultServlet 的基本处理过程如下: 查找资源是否存在缓存 检查是否满足可选 If 头域指定的条件 设置响应头域,如 Content-Type.Content-Length.ETag.Last-Modified 检查是否满足 Sendfile 的条件,否则将内容拷贝到输出流中 接下来主要分析资源

随机推荐