Opacity.js

代码如下:

//--------------------------------------------------------------- 
// Opacity Displayer, Version 1.0 
// Copyright Michael Lovitt, 6/2002. 
// Distribute freely, but please leave this notice intact. 
//---------------------------------------------------------------

//--------------------------------------------------------------- 
// OPACITY OBJECT 
// 
// Instantiates the object, defines the properties and methods.

function OpacityObject(div, strPath) { 
 this.layerObject = div; 
 this.path = strPath; 
/* if (ns){ 
  if (browserVersion>=5) { 
   this.layerObject = document.getElementById(divId).style; 
  } else {  
   this.layerObject = eval("document."+divId); 
  } 
 } else { 
  this.layerObject = eval(divId + ".style"); 
 }/**/ 
 this.setBackground = od_object_setBackground; 

// Uses AlphaImageLoader filter, or the css background property, 
// as appropriate, to apply a PNG or GIF as the background of the layerObject. 
function od_object_setBackground() { 
 if (pngAlpha) { 
  this.layerObject.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.path+".png', sizingMethod='scale')"; 
 } else if (pngNormal) { 
  if (browser.isMac && browser.isIE5up ) this.layerObject.backgroundColor = '#999999'; 
  else this.layerObject.backgroundImage = 'url('+this.path+'.png)'; 
 } else { 
  this.layerObject.backgroundImage = 'url('+this.path+'.gif)'; 
 } 

//---------------------------------------------------------------

//--------------------------------------------------------------- 
// OPACITY DISPLAY FUNCTION 
// Outputs the image as a div with the AlphaImageLoader, or with 
// a standard image tag. 
function od_displayImage(strId, strPath, intWidth, intHeight, strClass, strAlt) {  
 if (pngAlpha) { 
  document.write('<div style="height:'+intHeight+'px;width:'+intWidth+'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+strPath+'.png\', sizingMethod=\'scale\')" id="'+strId+'" class="'+strClass+'"></div>'); 
 } else if (pngNormal) { 
  document.write('<img src="students/%27%2BstrPath%2B%27.png" width="'+intWidth+'" height="'+intHeight+'" name="'+strId+'" border="0" class="'+strClass+'" alt="'+strAlt+'" />'); 
 } else { 
  document.write('<img src="students/%27%2BstrPath%2B%27.gif" width="'+intWidth+'" height="'+intHeight+'" name="'+strId+'" border="0" class="'+strClass+'" alt="'+strAlt+'" />'); 
 } 

//---------------------------------------------------------------

//--------------------------------------------------------------- 
// OPACITY ROLL-OVER FUNCTIONS 
function od_rollOver(strId, strColor) {  
 if (pngAlpha) { 
  document.getElementById(strId).style.backgroundColor = strColor; 
 } else { 
     if (document.images && (flag == true)) { 
         document[strId].src = eval(strId + "on.src"); 
     } 
 } 

function od_rollOut(strId, strColor) {  
 if (pngAlpha) { 
  document.getElementById(strId).style.backgroundColor = strColor; 
 } else { 
     if (document.images) { 
         document[strId].src = eval(strId + "off.src"); 
     } 
 } 

//---------------------------------------------------------------

//--------------------------------------------------------------- 
// global variables

// if IE5.5+ on win32, then display PNGs with AlphaImageLoader 
if ((browser.isIE55 || browser.isIE6up) && browser.isWin32) { 
 var pngAlpha = true; 
 var strExt = ".png"; 
// else, if the browser can display PNGs normally, then do that. that list includes: 
 //     -Gecko Engine: Netscape 6 or Mozilla, Mac or PC 
 //     -IE5+ Mac (OpacityObject applies the background image at 100% opacity) 
 //     -Opera 6+ PC 
 //     -Opera 5+ Mac (Doesn't support dynamically-set background images) 
 //     -Opera 6+ Linux  
 //     -Omniweb 3.1+  
 //     -Icab 1.9+  
 //     -WebTV  
 //     -Sega Dreamcast 
} else if ((browser.isGecko) || (browser.isIE5up && browser.isMac) || (browser.isOpera && browser.isWin && browser.versionMajor >= 6) || (browser.isOpera && browser.isUnix && browser.versionMajor >= 6) || (browser.isOpera && browser.isMac && browser.versionMajor >= 5) || (browser.isOmniweb && browser.versionMinor >= 3.1) || (browser.isIcab && browser.versionMinor >= 1.9) || (browser.isWebtv) || (browser.isDreamcast)) { 
 var pngNormal = true; 
 var strExt = ".png"; 
 // otherwise, we use plain old GIFs 
} else { 
 var strExt = ".gif"; 
}

var ns = (document.all)?false:true; 
var browserVersion = parseFloat(navigator.appVersion ); 
//---------------------------------------------------------------

(0)

相关推荐

  • IE6下opacity与JQuery的奇妙结合

    复制代码 代码如下: <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">&l

  • 原生js实现半透明遮罩层效果具体代码

    复制代码 代码如下: <!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"> <head> <meta http-equiv=&qu

  • 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

  • CSS opacity - 实现图片半透明效果的代码

    前几天一位做网页设计的朋友问我这个问题:如何通过CSS来实现图片半透明效果,并且在IE和Mozilla上都可以得到支持.下面将我的方法分享给大家. 下图为通过CSS实现的图片透明效果 这个效果在IE和Mozilla浏览器上都可以工作,代码如下 <img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" s

  • js和jQuery设置Opacity半透明 兼容IE6

    1.css设置透明度 透明度在IE浏览器和其他相关浏览器中的设置方法是不一样的,IE使用滤镜filter的alpha属性,firefox和其它浏览器不支持滤镜,它们使用opactiy属性设置透明度,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2.使用js设置透明度 为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置.下面是一段示例代码: 复制代码 代码如下: var alpha =

  • Cross-Browser Variable Opacity with PNG

    Periodically, someone tells me about the magic of PNG, how it's the ideal image format for the web, and that someday we'll all be using it on our sites instead of GIF. People have been saying this for years, and by now most of us have stopped listeni

  • 纯JS半透明Tip效果代码

    Test function opacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd)

  • Opacity.js

    复制代码 代码如下: //---------------------------------------------------------------  // Opacity Displayer, Version 1.0  // Copyright Michael Lovitt, 6/2002.  // Distribute freely, but please leave this notice intact.  //-------------------------------------

  • Maps Javascript

    <html>   <head>      <title>Ajaxian Maps</title>   <style type="text/css">      h1{      font:20pt sans-serif;   }   #outerDiv{      height:600px;      width:800px;      border:1px solid black;      position:relativ

  • two.js之实现动画效果示例

    一.什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内置的动画循环,可搭配其他动画库.Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中. 二.导入two.js 三.用two.js实现动画 1)

  • Angular.js通过自定义指令directive实现滑块滑动效果

    前言 最近因为工作需要让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(directive). 方法如下 1.下面是我html部分代码,detail-scroll是我自定义的标签 ............... <div id="time" style="position: relative;"> <div n

  • Vue.js每天必学之组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

  • js库Modernizr的介绍和使用

    传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况. Modernizr 并非试图添加老版本浏览器不支持的功能,而是令你通过创建可选风格配置修改页面设计. 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能. 什么是Modernizr? Modernizr是一个开源的JS库,它使得那些基

  • 原生JS实现的放大镜效果实例代码

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

  • js自制图片放大镜功能

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 注释: small img size:600x400 big img size:1200x800 原理: 1.大图是小图的 2倍整 2.大图以小图片中心点为中心       a.transform : translate(-50%,-50%)       b.(rate-0.5)*50%       c.clip : rect(t,r,b,l) 以小图边界为边界 3.rect必须有absolute 4.获取鼠标

随机推荐