天魅设计 - JS 脚本

鼠标经过图片半透明效果，支持Firefox/IE

191997910@qq.com(天魅) — Tue,16 Jun 2009 14:41:57 +0800

鼠标经过图片半透明效果,有很多做法，这里说一种做法，支持IE和FF而且代码很精减

样式img_link是写出几种兼容的图片透明样式，IE的从10.20.30...100为最大，FF的从0，0.1，0.2...1为最大

onmouseover="this.className='null" onmouseout="this.className='img_link'" 这句相信不用解释了，null就是一个空样式，根本没有定义的，就是让他还原为默认状态，如果鼠标离开透明度要和前面两种情况都不一样，那么再定义一下Null的样式就好了！

代码如下：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
  <head>
    <title>鼠标经过图片半透明效果，支持Firefox/IE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/<a href="http://www.tmxhx.com/default.asp?cateID=4" target="_blank">css</a>">
      body {background:#000;}
      .img_link{filter:alpha(opacity=50); /* IE */
            -moz-opacity:0.5; /* Moz + FF */
            opacity:0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/
          }
      .img_link:hover {
            filter:alpha(opacity=100); /* IE */
            -moz-opacity:1; /* Moz + FF */
           opacity:1; /* 支持CSS3的浏览器（FF 1.5也支持）*/
           }
    </style>
  </head>
  <body>
   http://www.tmxhx.com/attachments/month_0808/k2008823103739.jpg</a>" alt="测试效果"  onMouseOver="this.className='null'" onMouseOut="this.className='img_link'" />
  </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

评论中说不支持IE，不好意思，代码中的 onMouseOver="this.className='null'" onMouseOut="this.className='img_link'" 之前写错了，呵呵```现在可以了

filter滤镜相关问题

191997910@qq.com(天魅) — Thu,27 Nov 2008 16:35:31 +0800

今天会转这篇关于滤镜文章是因为,刚刚在制作一个网页用到PNG,为了让IE6也透明,用了滤镜,问题出现了,使用滤镜后所在块内的链接没了,我晕...当时还不知道是这个原因,找了好久,上百度问了问,找到答案了,所以把东西贴出来,让大家也瞄瞄:(红色为我碰到的问题)

<提醒:没有十分必要时不要用滤镜......>

filter滤镜通常被分为三种：程序性的界面滤镜，静态滤镜，动态过渡效果滤镜，通常被ie5.5+所支持。前两者又被称为视觉滤镜，它允许您更改web页面上的元素的外观，从而可以在文本和图像上利用视觉滤镜获得各种效果，例如：阴影，浮雕以及模糊等效果。动态过渡效果滤镜将动态影响web内容的外观，它使用动画来体现内容上的变化。一般，该滤镜将会和脚本程序配合使用。例如，使用脚本代码更改img元素的src属性，从而改变了图像的来源，那么，这个时候您可以使用过渡来将图像渐变到视点中。

下面先来说一下滤镜的使用方法：
先来看一个示例

原图片:

加入滤镜后的图片:

这段代码使用了滤镜的功能：filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=20,Direction=90); 括号前的MotionBlur即是滤镜的名字，括号内是滤镜的参数，参数之间用逗号隔开，滤镜名字前面的字符串filter:progid:DXImageTransform.Microsoft. 是微软滤镜执行程序的包路径。

也可以对同一个元素使用多个滤镜，如下：
filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=20,Direction=90)progid:DXImageTransform.Microsoft.Wave (add=false,lightStrength=30);
这里提醒大家，多个滤镜之间不要使用分号，直接将后面的滤镜写在前一个的后面即可。

下面来看一下都有几种滤镜
1.程序性的滤镜界面，用于在对象的背景和内容之间显示一个定制的色彩层。该滤镜有下面两种效果：

AlphaImageLoader:在对象box边界内显示一个图像，该图像位于对象的背景和内容之间，并且可以对此图进行剪切和改变尺寸。如果载入的是PNG图片，则能够呈现0%-100%的透明度。
语法格式：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true/false,sizingMethod=size,src=sURL)

属性介绍：
sizingMethod 功能是设置滤镜作用的图片在对象容器边界内的显示方式。可取值，crop：剪切图片以适应对象尺寸（如果图片比对象尺寸大）；image：默认值，增大或减小对象的尺寸边界以适应图片的尺寸。scale：缩放图片以适应对象的尺寸边界。
src：使用绝对或相对url地址指定背景图像。
enabled：可取值，设置滤镜是否激活，true表示激活，false表示不激活。

示例：

，img中的图片要使用透明的才会看到更好的效果。
注意：如果使用滤镜的样式放在了css文件里，那么图片的src需注意加载滤镜的页面相对于图片的路径而不是css文件相对于图片的路径，比方说如果filter属性写在了一个单独的css文件里，那么平时我们引用图片的相对路径可能写成"../img/x.jpg"，但是filter中的src需要写成"img/x.jpg"，这样才不会出错。
还有一点需要注意的，不过也只是听说的，本人并没有遇到过这样的问题，暂记下来，给以后遇到时留个提示： AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮添加：position:relative使其相对浮动。当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议改用浮动（float）。

Gradient：在对象的背景和内容之间显示一个定制的色彩层，色彩层可以是线性渐变的形式。
下面来看一下它的属性：
GradientType：设置色彩渐变的方向。0表示垂直渐变，1表示水平渐变。
StartColorStr:设置色彩渐变的开始颜色和透明度
StartColor:设置色彩渐变的开始颜色。值为0-4294967295之间的整数，0表示透明，4294967295表示不透明，即为白色。
EndColorStr：设置色彩逐渐的结束颜色和透明度。
EndColor：设置色彩渐变的结束颜色。取值与StartColor值相同。
Enabled:设置滤镜是否激活，true表示激活，false表示不激活。
示例：

2.静态滤镜：用来调整对象的静态变化。

Alpha:调整对象内容的透明度
示例：

BasicImage：调整对象内容的色彩，图像旋转或透明度

BlendTrans:用渐隐效果转换对象内容，新对象逐渐出现，旧对象逐渐消失。这个滤镜也被认为是一个过渡滤镜效果。

Blur：使对象内容模糊。

Chroma：将对象内容中指定的颜色显示为透明。

Compositor:将初始对象和新对象的色彩进行逻辑的混合，并使用混合后的色彩显示新的对象内容。初始对象和新对象的色彩，透明度通过计算来确定最终要输出的效果。

DropShadow：制作对象的阴影效果，也就是说对象的内容会呈现一个轮廓并偏离对象，但阴影只能是纯色的。

Engrave:用灰度值为对象内容制作篆刻纹理效果

FlipH：用于水平反转对象内容，不过已经被BasicImage滤镜取代。

FlipV：用于垂直反转对象内容，不过已经被BasicImage滤镜取代。

Glow：为对象内容添加辉光效果，辉光出现在对象内容的外边缘。

Gray：以灰度方式显示对象内容，不过已经被BasicImage滤镜取代。

ICMFilter：根据一个图像颜色管理（ICM）的配置文件转换对象内容的色彩。这样能激活对某些内容的显示的改良，或激活对硬件设备输出的模拟显示，例如打印机或显示器。

Invert:以反相方式显示对象内容，不过已经被BasicImage滤镜取代。

Light：为对象内容建立光照效果。

MaskFilter：将对象内容的透明像素显示为一个遮罩，而非透明像素则转为透明。

Matrix：使用矩阵转换改变对象内容的尺寸，并可以旋转或反转对象内容。

MotionBlur：为对象内容制作运动模糊效果，例如残影。

RevealTrans:使用预定的24种转换效果转换对象的内容。这个滤镜也被认为是一个过渡效果滤镜。

Shadow：为对象内容建立阴影效果，阴影可以使用线性渐变颜色。

Wave：沿着纵轴为对象内容建立一个像正弦曲线那样的波纹式扭曲效果。

3.过渡滤镜效果，能够将内容以特殊的视觉效果显示出来。

Barn：用类似开门或关门的效果来转换新的对象内容。
属性介绍：orientation （horizontal/vertical ）,表示对象是过渡水平显示还是过渡竖直显示。
motion （out/in），表示从对象的中间向两边移动/从对象的两边向中间转变。
duration，表示状态转换的快慢。

Blinds：用类似打开百叶窗或关闭百叶窗的效果来转换新的对象内容。
bands：值为1-100之间的整数，应该是设置随机改变的形状，这个形状就好比是百叶的宽窄。
Direction ：转换的方向，up/down/right/left
duration，表示状态转换的快慢。

CheckerBoard：用类似国际象棋棋盘的网格翻起效果转换新对象内容和旧的对象内容。
属性：Direction和duration这两个属性使用同上。
squaresX,值为大于等于2的正整数，默认值为12.设置方块的x值（即方块的宽度）大小。
squaresY 值为大于等于2的正整数，默认值为10，设置方块的y值（即方块的高度）大小。

Fade：用类似淡入的效果来呈现新对象内容，而同时旧的对象内容逐渐淡出。
属性：center:值为true/false默认值为true。
duration：同上。
enabled：表示filter是否可用，true表示可用，false表示不可用，默认值为true。
overlap：在转换时显示原有图片和新图片的一小部分部分，值为0.0-1.0，1.0为默认值

GradientWipe：用类似线性渐变滚过的方式呈现新对象内容，而同时旧的对象内容以线性渐变滚过的方式消失。
属性：duration 和 enabled同上。
gradientSize:对象被渐变带所覆盖的百分比。值为0.0,0.25,1.0，默认值为0.25
motion：设置一个值，该值表示是按照设置好的wipestyle的值显示，还是相反的方向显示。值为forward/reverse，forward按照wipestyle的设定显示，reverse按照wipestyle相反的方向显示。

Inset:用对角线逐渐扩展方式显示新的对象内容。
属性：duration 和 enabled同上。

Iris：用类似照相机光圈打开的方式显示新的对象内容，并且形状各异。
属性：duration 和 enabled同上。
irisStyle:对象显示的形状，值为：DIAMOND,CIRCLE,CROSS,PLUS,SQUARE,STAR
motion:out 默认值，对象转化由外向里，in 转换方向有里向外。

Pixelate:将对象的内容分为色彩方块，这些方块最终被替换成对象内容，每个方块的色彩就是他们要替换的像素颜色值。这个滤镜本身就可以呈现为过渡动画。

RadialWipe：用放射状擦除效果转换对象内容，效果类似于汽车挡风玻璃的雨刷器擦过。

RandomBars：用随机出现的线条来逐渐呈现对象内容。

RandomDissolve:用随机出现的像素来逐渐呈现对象内容，这个又被称为溶解。

Slide:用随机滑入，滑出图片的一部分这样的效果来转换对象内容。

Spiral:用螺旋式运动来呈现对象内容。

Stretch：用伸缩变形运动效果来呈现新的对象内容同时隐去旧的对象内容。其中一个功能就类似于一个六面体魔方从一面翻到另一面。

Strips:用带锯齿的边逐渐覆盖旧的对象内容，并呈现新的对象内容。

Wheel:用旋转运动效果逐渐覆盖旧的对象内容，并呈现新的对象内容。旋转运动效果就像是轮子的辐条在旋转。

Zigzag：用向前或向后运动的效果逐渐覆盖旧的对象内容，并呈现新的对象内容。

JS - document.domain获取网站域名

191997910@qq.com(天魅) — Tue,25 Nov 2008 08:35:51 +0800

很多时候我们要获取一当前网站的域名或完整的网址进行判断一些东西,来进行限制或做一些别的功能,借一下JS,很容易搞定,下面还是列代码吧!

域名就是这样获取!下面运行试试!

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

那么要获行完整的网址呢?
如下:

网址就是这样获取!下面运行试试!

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

如何应用JS+CSS实现网站换肤呢?

191997910@qq.com(天魅) — Tue,18 Nov 2008 08:36:20 +0800

其实都不知道这篇日志该归到网页设计还是JS里,不过还是JS起决定性做用,所以还是放这了,找了很多相关JS+CSS网页换肤的例子,很多不尽人意,当然也有写得还不错的,起码我认为,昨晚把一个整站做了一下实验,效果还不错,其实换肤要解决的问题只有两个:第一就是如何在客户端选择皮肤后实时的去更新样式(CSS).第二是,在客户端选皮肤后如何让他在刷新后不会回到默认皮肤?

下面我把代码贴出来,注意看:

JS部份:

程序代码

上面单独保存JS为js.js,当然你要一起写在页面里也可以,对于整站来说还是不要写在页面上!
看上面的JS已经很明显了,同时解决上面说的两个问题,开始的数组里面有五个样式文件,那些就是皮肤,那么在网页里的调用呢?看下面.
............................................................................................
在写样式的地方载入JS,样式由JS输出!

程序代码

下面这一段是输出选择界面的,就是选择这五个样式的按钮

程序代码

如何用JS+CSS实现改变文章字体大小?(onclick事件)

191997910@qq.com(天魅) — Mon,17 Nov 2008 10:29:19 +0800

其实JS+CSS可以做出很多有趣漂亮的东西,不是应该是实用的东西....比如说JS控制CSS换肤,不过今天要发的东西不是换服,而是利用onclick事件实现改变文章字体大小,我们经常可以看到很多网站的内容页面可以点击:“大字体”，“中字体”，“小字体”来实现你想要看的字体大小,下面贴一段代码,很简单,但是请不要直接复制用,自己好好看看是怎么做的,下回就能举一仿三了...

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

JS控制页面按钮到当前壮态

191997910@qq.com(天魅) — Sun,28 Sep 2008 09:13:32 +0800

这个是JS控制按钮的,就是点击到哪一页保持一个按下壮态....很好用...现在的导航都是这样...注意ID和JS里面的样式

服务概述

企业展厅

询盘查询

企业视频

独立域名

排名优化

展会巡展

展会特刊

安全指数

产品推荐

即时工具

优质客服

JS效果比阅兵还整齐,呵呵开玩笑

191997910@qq.com(天魅) — Wed,20 Aug 2008 15:08:04 +0800

非常经典的JS效果,很好玩哦,效果很像机械公敌的感觉,就是这个人有点恶!

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank">http://www.w3.org/TR/html4/strict.dtd</a>">
<html>
<head>
<title>1</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/<a href="http://www.tmxhx.com/default.asp?cateID=4" target="_blank">css</a>">
	html {
		overflow: hidden;
	}
	body {
		margin: 0px;
		padding: 0px;
		background: #222;
		position: absolute;
		width: 100%;
		height: 100%;
		filter: alpha(opacity=100);
	}
	#screen {
		position:absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: #000;
		cursor: pointer;
	}
	#screen img {
		position: absolute;
	}
</style>

init : function ()
	{
		this.scr = document.getElementById('screen');
		this.img = document.getElementById('particles');
		this.scr.onselectstart = function () { return false; }
		this.scr.ondrag        = function () { return false; }

for (var x = -r3d.N; x <= r3d.N; x++)
		{
			for (var z = -r3d.N; z <= r3d.N; z++)
			{
				o = document.createElement('img');
				o.x3d = x;
				o.z3d = z;
				o.src = r3d.img.src;
				r3d.scr.appendChild(o);
				r3d.O.push(o);
			}
		}
		this.scr.onmousemove = function (e)
		{
			if (r3d.down)
			{
				if (window.event) e = window.event;
				r3d.xm = e.clientX - r3d.nx;
				r3d.ym = e.clientY - r3d.ny;
				r3d.scr.style.cursor = "move";
			} else r3d.scr.style.cursor = "pointer";
			return false;
		}
		this.scr.onmousedown = function (e)
		{
			r3d.down = true;
			r3d.scr.style.cursor = "move";
			return false;
		}
		this.scr.onmouseup   = function (e)
		{
			r3d.down = false;
			r3d.scr.style.cursor = "pointer";
			return false;
		}

r3d.resize();
		r3d.y = r3d.nh / 2;
		r3d.ym = r3d.nh;
		r3d.xm = r3d.nw * .9;
		r3d.run();
	},

resize : function () {
		var o = r3d.scr;
		r3d.nw = o.offsetWidth / 2;
		r3d.nh = o.offsetHeight / 2;
		for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent)
		{
			r3d.nx += o.offsetLeft;
			r3d.ny += o.offsetTop;
		}
	},

run : function ()
	{

r3d.a += (r3d.xm - r3d.nw) * .0001;
		r3d.y += ((r3d.ym - r3d.nh) - r3d.y) / 40;
		var ca = Math.cos(r3d.a);
		var sa = Math.sin(r3d.a);

for (var i = 0, o; o = r3d.O[i]; i++)
		{
			var x = o.x3d * (r3d.nw / 8);
			var z = o.z3d * (r3d.nw / 8);
			var X = sa * x + ca * z;
			var Y = sa * z - ca * x;
			var W = r3d.FL / (r3d.FL + Y);
			var w = Math.round(W * r3d.nw / 10);

o.style.left   = Math.round(X * W + r3d.nw - w * .5) + 'px';
			o.style.top    = Math.round(r3d.y * W + r3d.nh - w * .5) + 'px';
			o.style.width  = Math.max(2, w) + 'px';
			o.style.height = Math.max(6, w * r3d.rY) + 'px';
			o.style.zIndex = w;

}
		setTimeout(r3d.run, 32);
	}

}

onload = function()
{
	onresize = r3d.resize;
	r3d.init();
}

</script>
</head>

<body>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

只看网页图片的JS,在地址栏输入哦!

191997910@qq.com(天魅) — Wed,20 Aug 2008 14:42:42 +0800

试试这个功能,可以只查看网页内的图片,打开网页后,在地址栏输入下面这些代码,你就可以看到这个网页所用的图片了.

程序代码

javascript:Ai7Mg6P='';for%20(i7M1bQz=0;i7M1bQz'};if(Ai7Mg6P!=''){document.write(''+Ai7Mg6P+'');void(document.close())}else{alert('No%20images!')}

JS实现多张图片纵向横向无缝滚动

191997910@qq.com(天魅) — Fri,18 Jul 2008 15:58:44 +0800

利用JS使用图片或文本横向或纵向无缝滚动,这个效果以前风云一时啊,现在还好,用的人不是很多,估计是因为用户体验不是很好的原因.但是企业站还是用得很多哦,有的老板经常会问:可不可以让我的产品大这个位置滚动呢?我回答时总是:嗯.可以,但是多一段JS,如下:

横向滚动:

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

纵向滚动:

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

如何点击显示隐藏层?

191997910@qq.com(天魅) — Thu,17 Jul 2008 22:37:55 +0800

现在网页功能越来越多，隐藏层对于用户体验来说是很有好处的！方法也有很多，当然隐藏层不只是这种表现形式，也有是选项卡形式的，最典形的可能就是YAHOO了！

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

天魅设计 - JS 脚 本

鼠标经过图片半透明效果，支持Firefox/IE

filter滤镜相关问题

JS - document.domain获取网站域名

如何应用JS+CSS实现网站换肤呢?

如何用JS+CSS实现改变文章字体大小?(onclick事件)

JS控制页面按钮到当前壮态

JS效果比阅兵还整齐,呵呵开玩笑

只看网页图片的JS,在地址栏输入哦!

JS实现多张图片纵向横向无缝滚动

如何点击显示隐藏层?

天魅设计 - JS 脚本