首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
CSS/HTML
正文
css静态滤镜 + A:Hover
所属分类：
网络编程
/
CSS/HTML
阅读数： 868
收藏 0
赞 0
分享
css静态滤镜 + A:Hover 的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id=""> <a href="#" class="a0 a1"> <img src="/articleimg/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
然后配合上两行 JS, 做成这样,依然 IE Only
Step2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id="main" onmousemove="chkScroll(this);"> <a href="#" class="a0 a1"> <img src="/articleimg/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
继续努力，加上磁性效果............就是测试久了会看的头晕.......
Step3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id="main" onmousemove="chkScroll(this);"> <a href="#" class="a0 a1"> <img src="/articleimg/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
上一个效果鼠标动的快了会很头晕.......又做了一个磁性效果
Step4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id="main" onmousemove="chkScroll(this);"> <a href="#" class="a0 a1"> <img src="/articleimg/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
然后再加上一些不知所谓的特效，让这个东东有点动感（小新：看我的动感光波，BBBBB........） -_-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id="main" onmousemove="chkScroll(this);" onmouseout="hidePointer();"> <a href="#" class="a0 a1"> <img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a> </div> <div id="pointer"></div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
更多精彩内容
其他人还在看
input文本框样式代码实例
input文本框样式代码实例
评论 0
收藏 0
赞 0
分享
div+css实现自适应宽度按钮
div+css实现自适应宽度按钮
评论 0
收藏 0
赞 0
分享
h1标签的使用技巧
h1标签的使用技巧
评论 0
收藏 0
赞 0
分享
base href 使用方法详解
base href 使用方法详解
评论 0
收藏 0
赞 0
分享
html label标签的使用教程
html label标签的使用教程
评论 0
收藏 0
赞 0
分享
使用CSS不用程序实现文字自动截断 用省略号代替
使用CSS不用程序实现文字自动截断 用省略号代替
评论 0
收藏 0
赞 0
分享
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
评论 0
收藏 0
赞 0
分享
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
评论 0
收藏 0
赞 0
分享
CSS图片拼合生成器只需上传zip包即可
CSS图片拼合生成器只需上传zip包即可
评论 0
收藏 0
赞 0
分享
用iframe margin实现调用其他网页的某一区域的方法
用iframe margin实现调用其他网页的某一区域的方法
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
网赚之谈：做什么网站才能让我们草根站长有个出路
网上怎么赚钱 网络赚钱需要注意哪些东西
adsense西联邮局收款两张版本单子填写示例
浅谈一下个人站长领域的灰色地带有多么的暴利
Google AdSense 电汇教程 谷歌联盟国内电汇收款教程（招行）
Papi酱首次直播的八大平台是哪些 打赏90万服不服
站长故事
更多
站长故事：一个80后妈妈的微商之旅
苹果发布三款新品：一个丑+另一个丑+一个死贵？
站长故事 一位“苦逼站长”的心酸 SEO真的如此简单吗？
探讨：为什么个人站长越来越不愿做seo独立博客
人物：戴志康，80后创业者携惊叹号而来
为什么知乎做起来了？市场竞争的魅力和价值
