js实现感应鼠标图片透明度变化的方法

本文实例讲述了js实现感应鼠标图片透明度变化的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html>
<head>
<title>感应鼠标图片透明度变化</title>
<SCRIPT language="JavaScript">
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}

//-->

</SCRIPT>
</head>
<body>
将鼠标放在图片上看看效果!<br>
<img src="/images/skinslogo.gif" style="filter:alpha(opacity=20)" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

  • 推荐js实现商品分类到搜索栏友好提示（人机交互）第1/3页

    中间的表格代表搜索表单,要实现的是点商品分类后有一个方框指向到搜索栏,用以清楚地告诉用户:点商品分类后是哪里改变了转载请注明出处 blueidea 方框移动 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 呵呵,效果很棒,不过在ff下有些小问题,已经改了.加精 方框移动 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 [Ctrl+A

  • js实现透明度渐变效果的方法

    本文实例讲述了js实现透明度渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现一开始元素的透明度是30,鼠标移上的时候,透明度慢慢增加,到透明度100停止.鼠标移出,透明度慢慢减少,减少到30的效果. 要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,最后把变量的值再赋给元素的透明值. var alpha=30; 要点二:判断目标值和目前透明值,来判定是正向速度还是负向速度. if(target > alpha){ speed = 2; }else{

  • 基于JS实现仿京东搜索栏随滑动透明度渐变效果

    基于JS实现仿京东搜索栏随滑动透明度渐变效果

    废话不多说,直接上代码: 1.HTML <header class="module-layer"> <div class="module-layer-content"> <div class="search-box-cover"></div> <p class="layer-return"></p> <h1 class="layer-hea

  • JavaScript CSS 修改学习第四章 透明度设置

    JavaScript CSS 修改学习第四章 透明度设置

    这里是测试页.在JavaScript里面设置透明度 我用下面的代码来设置透明度: 复制代码 代码如下: function setOpacity(value) {     testObj.style.opacity = value/10;     testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; } 在Mozilla和Safari里使用opacity,IE使用filter.value的值从0到10. 测试结果 IE说明:一个元素必须

  • 原生js和jquery中有关透明度设置的相关问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2 原生js设置透明度 为了兼容IE与其他浏览器对透明度的设置,

  • js实现感应鼠标图片透明度变化的方法

    本文实例讲述了js实现感应鼠标图片透明度变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>感应鼠标图片透明度变化</title> <SCRIPT language="JavaScript"> <!-- function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100

  • javascript感应鼠标图片透明度显示的方法

    本文实例讲述了javascript感应鼠标图片透明度显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>感应鼠标的图片透明度显示效果</title> <head> <script language="JavaScript1.2"> function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=

  • jQuery实现菜单感应鼠标滑动动画效果的方法

    本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • JS实现FLASH幻灯片图片切换效果的方法

    本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh

  • JS实现跟随鼠标闪烁转动色块的方法

    本文实例讲述了JS实现跟随鼠标闪烁转动色块的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS跟随鼠标闪烁转动的色块</title> </head> <body> <script language="JavaScript"> <!-- if (document.all){ colours=new Array('ff0000','00

  • JS实现动态给图片添加边框的方法

    本文实例讲述了JS实现动态给图片添加边框的方法.分享给大家供大家参考.具体如下: 下面的JS代码设置图片的边框为2个像素,即border=2 <!DOCTYPE html> <html> <head> <script> function addBorder() { document.getElementById("compman").border="2"; } </script> </head>

  • vue.js使用watch监听路由变化的方法

    vue.js使用watch监听路由变化的方法

    watch除了可以监听数据的变化,路由的变化也能被其监听到 效果如下: 具体代码 当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe

  • node.js WEB开发中图片验证码的实现方法

    用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿

  • Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)

    本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial

  • js实现背景图片感应鼠标变化的方法

    本文实例讲述了js实现背景图片感应鼠标变化的方法.分享给大家供大家参考.具体分析如下: 鼠标点击后背景图片变化,点击另外一个菜单项前面的会自动恢复背景,其实这个如果单纯使用CSS是没办法做的,我们还要使用JS来判断鼠标状态,代码如下: <style type="text/css"> .dh a{ background:#FFFFCC; width:50px; height:30px; display:block; text-align:center; color:#0000

随机推荐