用CSS实现鼠标单击特效

如果你能很好地应用CSS，那么你的主页将被打扮得很靓。下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图。

1、将下面的代码复制到你的主页中和之间。

〈STYLE〉.shadow {
　　FILTER: shadow(color=blue，direction=225)
　　}
　　.shadow1 {
　　FILTER: shadow(color=red，direction=225)
　　}
　　.shadow2 {
　　FILTER: shadow(color=green，direction=225)
　　}
　　.div {
　　CURSOR: move; FILTER: blur(add=ture，direction=135，strength=10); WIDTH: 800px
　　}
　　〈/STYLE〉

在这里应用的是blur滤镜。

2、在页面中插入一张图片，比如我插入是〈img border="0" src="/Article/UploadPic/2005-9/200598478474.jpg" width="300" height="210"〉。在其前加入〈TD id=flttgt style="filter: light(enabled=1)，''width 300''" width=315〉。

在刚才我们插入图片下一行中加入〈TD style="VERTICAL-ALIGN: top" width=314〉

3、在设置了图片属性后，我们还要应用Javascript脚本代码，也就是使图片跟随鼠标移动一些特效，代码如下。

〈script language=Javascript〉
　　〈!--
　　var g_numlights=0;
　　var blurbs= new Array(" 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。"，" 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。"，" 通过捕捉用户鼠标位置的方法来移动光源。"，" 不需要太多的编程。");
　　window.onload=setlights;
　　document.onclick=keyhandler;
　　flttgt.onmousemove=mousehandler;
　　function setlights(){
　　flttgt.filters[0].clear();
　　flttgt.filters[0].addcone(0，0，5，100，100，225，225，0，60，15);
　　if (g_numlights>0){
　　flttgt.filters[0].addcone(400，170，5，100，100，225，0，0，160，15);
　　if (g_numlights>1){
　　flttgt.filters[0].addcone(320，330，5，100，100，0，225，225，60，15);
　　}
　　}
　　}
　　function keyhandler()
　　{
　　g_numlights=(g_numlights+=1)%4;
　　holder.innerHTML=blurbs[g_numlights];
　　setlights();
　　}
　　function mousehandler()
　　{
　　x=(window.event.x-80);
　　y=(window.event.y-80);
　　flttgt.filters[0].movelight(1，x，y，5，1);
　　if(g_numlights>0){
　　flttgt.filters[0].movelight(1，x，y，5，1);
　　if(g_numlights>1)
　　{
　　flttgt.filters[0].movelight(2，x，y，5，1);
　　}
　　}
　　}
　　〈/script〉

这样就设置好一个比较有个性的图片特效

赞 (0)

相关推荐

  • jQuery 和 CSS 的文本特效插件集锦

    jQuery 和 CSS 的文本特效插件集锦

    Jumble Text Effect Plugins Demo||Download Vticker – Vertical News Ticker With JQuery Plugin Demo||Download JQuery TE – Text Editor With JQuery Plugin Demo||Download Squishy – JQuery Plugin For Fitting Text Exactly To Its Container Demo||Download Boot

  • DIV+CSS实现的滑动门菜单特效代码

    DIV+CSS实现的滑动门菜单特效代码

    我们DIV+CSS实现的滑动门菜单特效 #menu { margin:0; padding:0; height:26em; overflow:hidden; background:#FFFCF2; } #menu li { list-style-type:none; float:left; display:block; width:100%; } #menu li a { display:block; text-decoration:none; color:#00b; margin:0; wid

  • 精心挑选的15款优秀jQuery 本特效插件和教程

    精心挑选的15款优秀jQuery 本特效插件和教程

    今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果. 01. 滑动的字符 在线演示 下载源码 02. 鼠标悬停变换效果 在线演示 下载源码 03. 旋转的文本 在线演示 下载源码 04. 滚动变换的文本 在线演示 下载源码 05. 精致的倒计时效果 在线演示 下载源码 06.

  • jquery淡化版banner异步图片文字效果切换图片特效

    复制代码 代码如下: <pre code_snippet_id="280064" snippet_file_name="blog_20140408_1_8982765" name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • 用CSS实现文字变图象特效

    一段文字,当鼠标在文字上面单击,文字消失,原来文字的地方却立即变成了一张图片,当鼠标在图片上单击,图片又消失,原来的文字又重现了,像变魔术一样,是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现,但那要增加一段javascript程序,明显增加了不少代码.而用CSS来制作这种效果,增加的代码却要少得多. 原理:利用CSS的属性值可动态改变的特点. 思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML元素的属性值,从而达到

  • jQuery实现Twitter的自动文字补齐特效

    jQuery实现Twitter的自动文字补齐特效

    上图效果可以使用jQuery插件Typeahead.js来实现,这款jQuery插件来自于Twitter的一个新的项目,支持远程和本地的数据集.比较有特色的地方在于你可以将数据集使用本地存储(local storage)来保存在本地,有效的提高用户体验.同时也拥有很多远程数据集的处理选项,例如(请求频率,最大的并发请求数,等等). 主要特性 支持数据本地保存,客户端加载,优化加载速度 支持多语言,并且支持阿拉伯文 支持Hogan.js模板引擎整合 支持多数据集拼装 支持本地和远程的数据集 项目地

  • 基于jQuery实现的文字按钮表单特效整理

    基于jQuery实现的文字按钮表单特效整理

    1.jQuery幻灯片按钮控制图片过渡特效 基于jQuery实现的幻灯片按钮控制图片过渡特效源码,共有4幅图片进行自动切换,且切换时有幻灯片过度的效果.用户还可自定义幻灯片的标题文字和内容.是一款非常优秀的特效源码. 在线演示 源码下载 2.htm5+CSS3实现的表单美化带输入验证特效 纯html5+css3实现的表单美化效果,以及具有输入验证特效的代码,此种特效在网站非常实用. 在线演示 源码下载 3.jquery制作的带有遮罩弹出层实现登录注册等表单 实现了点击后在原始页面上弹出想用页面的

  • 保存几个不错的css特效字

    .drop0 {color:#FFFFFF;filter: DropShadow(Color=#000000, OffX=1, OffY=1, Positive=1);FONT-SIZE: 12px;} .drop1 {color:#000000;filter: DropShadow(Color=#FFFFFF, OffX=1, OffY=1, Positive=1);FONT-SIZE: 12px;} 测试CSS文字阴影特效 测试CSS文字阴影特效 Test CSS text Shadow s

  • 用CSS实现鼠标单击特效

    如果你能很好地应用CSS,那么你的主页将被打扮得很靓.下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图. 1.将下面的代码复制到你的主页中和之间. 〈STYLE〉.shadow { FILTER: shadow(color=blue,direction=225) } .shadow1 { FILTER: shadow(color=red,direction=225) } .shadow2 { FILTER: shadow(color=green,direction=225) } .div {

  • jQuery+ajax实现鼠标单击修改内容的思路

    现有表格中的一行的代码如下所示: 效果可以看下具体51搜索展示http://www.51bt.cc,结合Xunsearch全文检索技术,可以达到毫秒级的数据搜索 <tr> <td><span class="catid">2</span></td> <td>公司介绍</td> <td>内部栏目</td> <td><span class="listorde

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • 非常漂亮的JS+CSS图片幻灯切换特效

    非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm

  • jQuery+ajax实现鼠标单击修改内容的方法

    现有表格中的一行的代码如下所示: <tr> <td><span class="catid">2</span></td> <td>公司介绍</td> <td>内部栏目</td> <td><span class="listorder" title="点击修改">2</span></td> <

  • jquery实现美观的导航菜单鼠标提示特效代码

    jquery实现美观的导航菜单鼠标提示特效代码

    本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码.分享给大家供大家参考.具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称"链接提示",鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容,提示用户到达需要的页面. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • JavaScript实现的鼠标跟随特效示例【2则实例】

    JavaScript实现的鼠标跟随特效示例【2则实例】

    本文实例讲述了JavaScript实现的鼠标跟随特效.分享给大家供大家参考,具体如下: 鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星 如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小.根据书上的代码做了一些修改.比如,如果用户不移动鼠标,是不会显示星星效果的:其次就是将源代码中的亮度调节等去掉了,因为效果并不是很明显.截了三幅图,黑点近似代表鼠标的位置.效果图如下: 源代码: <html>

  • js实现鼠标单击Tab表单切换效果

    js实现鼠标单击Tab表单切换效果

    本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text

  • JavaScript利用canvas实现鼠标跟随特效

    目录 前言 创建canvas画布 定义鼠标 x / y 初始化canvas 画箭头 循环动画 鼠标事件 前言 canvas是一个很神奇的玩意儿,比如画表格.画海报图都要用canvas去做,前几天有用css去做一个鼠标跟随的恶魔之眼的动画效果,想着能不能用canvas也做一个鼠标跟随的效果呢? 创建canvas画布 canvas画布创建可以直接用canvas标签即可 <canvas></canvas> 也没有过多的样式,基本都是用js去完成画布中的内容的 const canvas =

随机推荐