一个不错的图片效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div id="wrap"><div id="sideright">
<div class="contents_main">
<div class="detail_summary">
<P>
<P></TR><TR><TD style="BORDER-BOTTOM: rgb(238,238,238) 1px solid" align="right"></P></TD> <TD style="PADDING-LEFT: 10px; BORDER-BOTTOM: rgb(238,238,238) 1px solid"><P><SPAN class=dr><IFRAME style="WIDTH: 600px; HEIGHT: 156px" src="
http://cet.hjenglish.com/subject/recommand/index.htm" frameBorder=0 scrolling=no> </IFRAME></SPAN></TD></TR></P>
<span style="display: none">
<script language="javascript" src="click.aspx"></script>
<script language="javascript" type="text/javascript" src="706092.js"></script>
</span></div>
</div>
</div>
</div>
</body>
</html>
一个不错的幻灯片效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 图片播放器 </TITLE>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache,must-revalidate">
<metahttp-equiv="expires"content="wed,26feb199708:21:57gmt">
<style>
body{font-size:12px;margin:0px;height:100%;}
#rotatorPlayer{text-align:center;width:100%}
#seconddiv{position:absolute;z-index:1;top:0;left:702;text-align:left;border:1px #333333 solid;height:100%;padding:6px}
img{border:0px}
#menu{position:absolute;z-index:1;top:40;left:710;width:200px;text-align:left}
#second{width:116px;height:20px;border:1px #000000 solid}
#button{width:60px;height:20px;border:1px #000000 solid;cursor:hand}
</style>
</HEAD>
<BODY scroll=no>
<div id=seconddiv><select name="second" id=second>
<option value=1>1 秒</option>
<option value=2>2 秒</option>
<option value=3>3 秒</option>
<option value=4>4 秒</option>
<option value=5>5 秒</option>
<option value=6>6 秒</option>
<option value=7>7 秒</option>
<option value=8>8 秒</option>
<option value=9>9 秒</option>
<option value=10>10 秒</option>
<option value=15>15 秒</option>
<option value=20>20 秒</option>
<option value=30>30 秒</option>
<option value=40>40 秒</option>
<option value=50>50 秒</option>
<option value=60>60 秒</option>
<option value=100>100 秒</option>
<option value=200>200 秒</option>
<option value=500>500 秒</option>
</select> <button id=button onclick="adRotator.set(getRef('second').value)">播放</button></div>
<div style="width:700;height:100%">
<div id=AdRotator></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function pimsize(imgname,widths,heights){
var w;
var h;
//window.alert(picimg.width);
//window.alert(picimg.height);
w=imgname.width;
h=imgname.height;
if(imgname.width>widths){
do
w=w-1;
while (w>widths) ;
s=w/imgname.width;
//window.alert(s);
imgname.width=w;
imgname.height=h*s;
h=imgname.height
}
//window.alert(imgname.height);
//window.alert(heights);
if(imgname.height>heights){
do
h=h-1;
while (h>heights) ;
s=h/imgname.height;
//window.alert(s);
imgname.width=w*s;
imgname.height=heights;
}
}
function adRotator() {};
adRotator.initialize=function(o)
{
// script by blueDestiny
this._t = new Array();
this._l = new Array();
this._p = new Array();
this._i = new Image();
this._c = 0;
this._f = false;
this._o = o;
this._timeout = null;
this._html = "";
// configration.
// @ image width
// @ image height
// @ rotator speed
// @ filter type
this._w = 450;
this._h = 450;
this._s = 4;
this._x = 23;
return this;
};
adRotator.add=function(p,t,l) { with (this)
{
_p.push(p);
_t.push(t);
_l.push(l);
}};
adRotator.load=function() { with (adRotator)
{
if( _i.readyState=='complete' )
{
if(_p.length-1==_c)
{
_f = true;
_c = 0;
window.clearTimeout(_timeout);
//getRef("AdRotator").innerHTML="complete";
adRotator.play();
}
else
{
_c++;
getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";
_timeout=window.setTimeout(adRotator.load,10)
}
}
else
{
getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";
_timeout=window.setTimeout(adRotator.load,10)
}
}};
adRotator.play=function() { with (adRotator)
{
if( _f )
{
_html = "";
_html += '<table style="border:1px solid #333333;width:100%;height:100%" align=center><tr><td style="font-size:9pt;font-family:tahoma;font-weight:bold;text-align:Center">'
_html += '<div id="rotatorPlayer"'
+ ' style="width:' + _w + ''
+ ';height:"' + _h + '"'
+ '>'
_html += '<a href="' + ( _l[_c] ? _l[_c] : "javascript:void(0);" ) + '">';
_html += '<img name=img id="rotatorPic" src="' + _p[_c] + '"'
//+ ' width="' + _w + '"'
//+ ' height="' + _h + '"'
+ 'onload="pimsize(img,700,550)"'
+ (_t[_c]?' title="' + _t[_c] + '"':'')
+ ' style="border:1px solid blue;FILTER:revealTrans(transition=' + _x + ',duration=1);"'
+ ' >';
_html += (_t[_c]?('<div align="center">' + (_c+1) + '. ' + _t[_c] + '</div>'):'<p></p>');
_html += '</a>';
_html += "</div>";
_html += '<div id=menu>';
for(var i=0; i<_p.length; i++)
_html += '<span'
+ ' style="border:1px solid #333333;padding:1px 5px 1px 5px;height:20px;text-align:center;cursor:'
+ (_c==i ? ('default;background-color:red;"') : 'hand;" onclick="adRotator.select(' + i + ')"')
+ '>'
+ (i>8?(i+1):('0'+(i+1)))+ '</span> ';
_html += "</div></td></tr></table>";
getRef(_o).innerHTML = _html;
getRef("rotatorPic").filters[0].Apply();
getRef("rotatorPic").filters[0].Play();
next();
}
else
{
_i.src = _p[_c];
adRotator.load();
}
}};
adRotator.next=function() { with (this)
{
(_p.length-1==_c) ? _c=0 : _c++;
_timeout=window.setTimeout(adRotator.play,_s*1000);
}};
adRotator.select=function(i) { with (this)
{
window.clearTimeout(_timeout);
_c=i;
adRotator.play();
}};
adRotator.set=function(second) { with (this)
{
window.clearTimeout(_timeout);
if((/\d+/).test(second)==true)
{
_s=second;
adRotator.play();
}
else
{
alert("must be digit!")
adRotator.play();
}
}};
function getRef(id)
{
return (document.all?document.all(id):document.getElementById(id));
}
adRotator.initialize("AdRotator");
adRotator.add("
http://img1.qq.com/ent/20060218/3215110.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215111.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.add("
http://www.mydeskcity.com/theme/WorldMap/400/WorldMap08.jpg","aa","#")
adRotator.add("
http://www.mydeskcity.com/theme/WorldMap/400/WorldMap08.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215110.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215111.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215110.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215111.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215110.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215111.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215110.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215111.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215110.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215111.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215110.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215111.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215110.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215111.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215112.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215113.jpg","aa","#")
adRotator.add("
http://img1.qq.com/ent/20060218/3215114.jpg","aa","#")
adRotator.play();
//-->
</SCRIPT>
</BODY>
</HTML>
北京奥运网站的图片轮转效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0026)http://www.beijing2008.cn/ -->
<HTML lang=zh-CN xml:lang="zh-CN"
xmlns="
http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>第29届奥林匹克运动会网站</TITLE>
<script>
if(typeof sas=="undefined")var sas=new Object();
if(typeof sas.ued=="undefined")sas.ued=new Object();
if(typeof sas.ued.util=="undefined")sas.ued.util=new Object();
if(typeof sas.ued.FlashObjectUtil=="undefined")sas.ued.FlashObjectUtil=new Object();
sas.ued.FlashObject=function(swf,id,w,h,ver,c,useExpressInstall,quality,xiRedirectUrl,redirectUrl,detectKey)
{
if(!document.createElement||!document.getElementById)return;this.DETECT_KEY=detectKey?detectKey:'detectflash';
this.skipDetect=sas.ued.util.getRequestParameter(this.DETECT_KEY);
this.params=new Object();this.variables=new Object();
this.attributes=new Array();this.useExpressInstall=useExpressInstall;
if(swf)this.setAttribute('swf',swf);
if(id)this.setAttribute('id',id);
if(w)this.setAttribute('width',w);
if(h)this.setAttribute('height',h);
if(ver)this.setAttribute('version',new sas.ued.PlayerVersion(ver.toString().split(".")));
this.installedVer=sas.ued.FlashObjectUtil.getPlayerVersion(this.getAttribute('version'),useExpressInstall);
if(c)this.addParam('bgcolor',c);
var q=quality?quality:'high';
this.addParam('quality',q);
var xir=(xiRedirectUrl)?xiRedirectUrl:window.location;this.setAttribute('xiRedirectUrl',xir);
this.setAttribute('redirectUrl','');
if(redirectUrl)this.setAttribute('redirectUrl',redirectUrl)};
sas.ued.FlashObject.prototype={setAttribute:function(name,value){this.attributes[name]=value},getAttribute:function(name){return this.attributes[name]},addParam:function(name,value){this.params[name]=value},getParams:function(){return this.params},addVariable:function(name,value){this.variables[name]=value},getVariable:function(name){return this.variables[name]},getVariables:function(){return this.variables},createParamTag:function(n,v){var p=document.createElement('param');p.setAttribute('name',n);p.setAttribute('value',v);return p},getVariablePairs:function(){var variablePairs=new Array();var key;var variables=this.getVariables();for(key in variables){variablePairs.push(key+"="+variables[key])}return variablePairs},getFlashHTML:function(){var flashNode="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall"))this.addVariable("MMplayerType","PlugIn");flashNode='<embed type="application/x-shockwave-flash" src="'+this.getAttribute('swf')+'" width="'+this.getAttribute('width')+'" height="'+this.getAttribute('height')+'"';flashNode+=' id="'+this.getAttribute('id')+'" name="'+this.getAttribute('id')+'" ';var params=this.getParams();for(var key in params){flashNode+=[key]+'="'+params[key]+'" '}var pairs=this.getVariablePairs().join("&");if(pairs.length>0){flashNode+='flashvars="'+pairs+'"'}flashNode+='/>'}else{if(this.getAttribute("doExpressInstall"))this.addVariable("MMplayerType","ActiveX");flashNode='<object id="'+this.getAttribute('id')+'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+this.getAttribute('width')+'" height="'+this.getAttribute('height')+'">';flashNode+='<param name="movie" value="'+this.getAttribute('swf')+'" />';var params=this.getParams();for(var key in params){flashNode+='<param name="'+key+'" value="'+params[key]+'" />'}var pairs=this.getVariablePairs().join("&");if(pairs.length>0){flashNode+='<param name="flashvars" value="'+pairs+'" />'}flashNode+="</object>"}return flashNode},write:function(elementId){if(this.useExpressInstall){var expressInstallReqVer=new sas.ued.PlayerVersion([6,0,65]);if(this.installedVer.versionIsValid(expressInstallReqVer)&&!this.installedVer.versionIsValid(this.getAttribute('version'))){this.setAttribute('doExpressInstall',true);this.addVariable("MMredirectURL",escape(this.getAttribute('xiRedirectUrl')));document.title=document.title.slice(0,47)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title)}}else{this.setAttribute('doExpressInstall',false)}if(this.skipDetect||this.getAttribute('doExpressInstall')||this.installedVer.versionIsValid(this.getAttribute('version'))){var n=(typeof elementId=='string')?document.getElementById(elementId):elementId;n.innerHTML=this.getFlashHTML()}else{if(this.getAttribute('redirectUrl')!=""){document.location.replace(this.getAttribute('redirectUrl'))}}}};sas.ued.FlashObjectUtil.getPlayerVersion=function(reqVer,xiInstall){var PlayerVersion=new sas.ued.PlayerVersion(0,0,0);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){PlayerVersion=new sas.ued.PlayerVersion(x.description.replace(/([a-z]|[A-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."))}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");for(var i=3;axo!=null;i++){axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+i);PlayerVersion=new sas.ued.PlayerVersion([i,0,0])}}catch(e){}if(reqVer&&PlayerVersion.major>reqVer.major)return PlayerVersion;if(!reqVer||((reqVer.minor!=0||reqVer.rev!=0)&&PlayerVersion.major==reqVer.major)||PlayerVersion.major!=6||xiInstall){try{PlayerVersion=new sas.ued.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","))}catch(e){}}}return PlayerVersion};sas.ued.PlayerVersion=function(arrVersion){this.major=parseInt(arrVersion[0])||0;this.minor=parseInt(arrVersion[1])||0;this.rev=parseInt(arrVersion[2])||0};sas.ued.PlayerVersion.prototype.versionIsValid=function(fv){if(this.major<fv.major)return false;if(this.major>fv.major)return true;if(this.minor<fv.minor)return false;if(this.minor>fv.minor)return true;if(this.rev<fv.rev)return false;return true};sas.ued.util={getRequestParameter:function(param){var q=document.location.search||document.location.href.hash;if(q){var startIndex=q.indexOf(param+"=");var endIndex=(q.indexOf("&",startIndex)>-1)?q.indexOf("&",startIndex):q.length;if(q.length>1&&startIndex>-1){return q.substring(q.indexOf("=",startIndex)+1,endIndex)}}return""}};if(Array.prototype.push==null){Array.prototype.push=function(item){this[this.length]=item;return this.length}}var getQueryParamValue=sas.ued.util.getRequestParameter;var sohuFlash=sas.ued.FlashObject;
function Cookie(document,name,hours,path,domain,secure){this.$document=document;this.$name=name;this.$expiration=hours?new Date((new Date()).getTime()+hours*3600000):null;this.$path=path?path:null;this.$domain=domain?domain:null;this.$secure=secure;};Cookie.prototype.store=function (){var cookieval="";for(var prop in this){if((prop.charAt(0)=='$')||((typeof this[prop])=='function')) continue;if(cookieval!="") cookieval+='&';cookieval+=prop+':'+escape(this[prop]);}var cookie=this.$name+'='+cookieval;if(this.$expiration)cookie+='; expires='+this.$expiration.toGMTString();if(this.$path) cookie+='; path='+this.$path;if(this.$domain) cookie+='; domain='+this.$domain;if(this.$secure) cookie+='; secure';this.$document.cookie=cookie;};Cookie.prototype.load=function(){var allcookies=this.$document.cookie;if(allcookies=="") return false;var start=allcookies.indexOf(this.$name+'=');if(start==-1) return false;start+=this.$name.length+1;var end=allcookies.indexOf(';',start);if(end==-1) end=allcookies.length;var cookieval=allcookies.substring(start,end);var a=cookieval.split('&');for(var i=0; i<a.length; i++) a[i]=a[i].split(':');for(var i=0; i<a.length; i++) this[a[i][0]]=unescape(a[i][1]);return true;};Cookie.prototype.remove = function(){var cookie;cookie = this.$name + '=';if (this.$path) cookie += '; path=' + this.$path;if (this.$domain) cookie += '; domain=' + this.$domain;cookie += '; expires=Fri, 02-Jan-1970 00:00:00 GMT';this.$document.cookie = cookie;};
</script>
<BODY>
<DIV class=focusFlash>
<DIV id=sasFlashFocus27></DIV>
<SCRIPT type=text/javascript>
//<![CDATA[
txt="<a image='http://images.beijing2008.cn/20070801/Img214118175.jpg' info='官网专访维尔布鲁根:我们对北京的高度肯定是有事实依据的' url='http://www.beijing2008.cn/1year/talks/s214117468/s214117473/' /><a image='http://images.beijing2008.cn/20070728/Img214115977.jpg' info='顺义奥林匹克水上公园交付使用 将举办世界赛艇青年锦标赛' url='http://www.beijing2008.cn/cptvenues/venues/src/headlines/shunyi/' /><a image='http://images.beijing2008.cn/20070728/Img214115951.jpg' info='北京射击馆正式验收交付 奥运首金有望在此诞生' url='http://www.beijing2008.cn/cptvenues/venues/bsh/headlines/bsh/' /><a image='http://images.beijing2008.cn/20070801/Img214118234.jpg' info='北京奥运会专用邮编102008启用 奥运邮件更安全快捷顺畅' url='http://www.beijing2008.cn/bocog/bocognews/headlines/n214118181.shtml' />"
var sohuFlash2 = new sohuFlash("
http://images.beijing2008.cn/demo.swf", "27", 520, 205, "7");
sohuFlash2.addParam("quality", "high");
sohuFlash2.addParam("wmode", "opaque");
sohuFlash2.addVariable("txt",txt);
sohuFlash2.write("sasFlashFocus27");
//]]>
</SCRIPT>
</DIV>
</BODY>
</HTML>
一个图大放大效果
<!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="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript" >
function hideLayer()
{
var layer = document.getElementById("popImageLayer");
layer.style.visibility='hidden';
}
function dispear(){
var layer = document.getElementById("popImageLayer");
if ((layer.style.width>0)&& (layer.style.height>0)){
layer.style.width-=1;
layer.style.height-=1;
}
else {
layer.style.visibility='hidden';
if (window.interval)
clearInterval(interval);
}
}
function popImage(obj,img,href)
{
var layer = document.getElementById("popImageLayer");
var t=obj.offsetTop;
var l=obj.offsetLeft;
while(obj=obj.offsetParent){
t+=obj.offsetTop;
l+=obj.offsetLeft;
}
var content = "<table border=0 width=180 height=180><tr><td align='center' valign='middle'>\n"+
"<A href="+href+" target=_blank><IMG src='"+img+"' onload='DrawImage(this,180,180);' onMouseOut='low(this);hideLayer();' onMouseOver=high(this) style='FILTER: alpha(opacity=10)'></A></td></tr></table>"; // onClick='hideLayer();'
layer.innerHTML=content;
layer.style.left =l + 35 -90;
layer.style.top = t+35-90;
layer.style.visibility='visible';
}
function moveToMouseLoc(e)
{
var layer = document.getElementById("popImageLayer");
var offsetX = -5;
var offsetY = -5;
var x = event.x + document.body.scrollLeft;
var y = event.y + document.body.scrollTop;
layer.style.left = x + offsetX;
layer.style.top = y + offsetY;
return true;
}
function DrawImage(img,width,height){
if(DrawImage.arguments.length <= 1)
width=height=70;
var image=new Image();
image.src=img.src;
if(image.width>0 && image.height>0)
{
if(image.width>width)
{
rate=image.height/image.width;
newHeight=rate*width;
img.width=width;
img.height=newHeight;
}
}
if(img.height>height)
{
rate=image.width/image.height;
newWidth=rate*height;
img.height=height;
img.width=newWidth;
}
}
function DrawImage50(img){
DrawImage(img,50,50);
}
function resetForm(){
var f=document.frmsearch;
f.Page.value = 1;
f.ClassCode.value ='' ;
f.SortType.value ='' ;
f.KeyWord.value='';
f.Area.value='';
f.MinPrice.value=f.MaxPrice.value='';
return false;
}
function manualSearch(){
var f=document.frmsearch;
f.Page.value = 1;
// f.ClassCode.value ='' ;
f.SortType.value ='' ;
f.submit();
return false;
}
function checkCondition(obj) {
return true;
}
function selectview(obj)
{
var f=document.frmsearch;
if ((obj.selectedIndex>0) && (obj.selectedIndex <7))
f.SortType.value = obj.options[obj.selectedIndex].value;
else if ((obj.selectedIndex>6) && (obj.selectedIndex <10))
f.View.value = obj.options[obj.selectedIndex].value;
else if ((obj.selectedIndex>9) && (obj.selectedIndex <13))
f.PageSize.value = obj.options[obj.selectedIndex].value;
f.submit();
return false;
}
function changeLocation(obj){
var f=document.frmsearch;
f.Area.value = obj.options[obj.selectedIndex].value;
f.submit();
return false;
}
function changeViewMode(mode){
var f=document.frmsearch;
f.View.value = mode;
f.submit();
return false;
}
function changePage(page){
var f=document.frmsearch;
f.Page.value = page;
f.submit();
return false;
}
function changePageSize(pagesize){
var f=document.frmsearch;
f.Page.value = 1;
f.PageSize.value = pagesize;
f.submit();
return false;
}
function changeSortType(type){
var f=document.frmsearch;
f.Page.value = 1;
f.SortType.value = type;
f.submit();
return false;
}
function changeClassCode(code){
var f=document.frmsearch;
f.ClassCode.value = code;
f.Page.value=1;
f.submit();
return false;
}
function high(which2){
theobject=which2;
highlighting=setInterval("highlightit(theobject)",40);
}
function low(which2){
clearInterval(highlighting);
which2.filters.alpha.opacity=40;
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}
function delightit(cur2){
if (cur2.filters.alpha.opacity>5)
cur2.filters.alpha.opacity-=5;
else if (window.highlighting)
clearInterval(highlighting);
}
</script>
<div id="popImageLayer" align="center" name="popImageLayer" style="position:absolute; visibility: hidden; width: 180; height: 180;cursor: hand;border-style:solid;border-width:1pt; border-color:orange" calss=""></div>
<center>
<br /><br /><br />
<div id="090" ><img src="
http://admin.mall.dangdang.com/GoodsImage/S000000460/Small/200608090909231.png" onMouseOver="popImage(this,'http://admin.mall.dangdang.com/GoodsImage/S000000460/Middle/200608090909231.png','http://wangfenglitai.mall.dangdang.com/products/G00000072867.html');" border=0>hkjhgkhk</div></a>
</center>
</body>
</html>
图片互换效果
<!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>
<style type="text/css">
<!--
#f_div{
width:150px;
height:100px;
overflow:hidden;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 0px;
}
#f_imgDiv{width:100%; height:100px; overflow:hidden;}
#f_img{filter:progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); border:0;}
#f_infoDiv{width:100%;top:-20px !important;top:-22px; position:relative;}
#f_buttonDiv{width:100%; margin-right:1px; height:21px; overflow:hidden; text-align:left;}
#f_line{width:100%;height:1px;background:#fff; overflow:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100)}
#f_buttonDiv div{width:1px;height:21px; background:#fff; float:right;}
#f_buttonDiv .bg{width:21px; height:21px; background:#fff; float:right; filter:Alpha(Opacity=40);}
#f_buttonDiv a{width:21px;height:15px !important;height:17px;float:right;padding-top:5px;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:10px;text-align:center;display:block;overflow:hidden;text-decoration:none;position:absolute;}
#f_buttonDiv a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{color:#000;}
#f_buttonDiv a:hover{background:#FF840C;color:#fff;}
#f_buttonDiv a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{background:#FF840C;color:#fff;}
#f_buttonDiv a.on:hover{background:#FF6600;}
#f_text{height:20px; line-height:20px; overflow:hidden;text-align:center;}
#f_text a:link,#f_text a:visited,#f_text a:active{color:#000;text-decoration: none;}
#f_text a:hover{color:#FF6600;text-decoration: none;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="ad_pic">
<div id="f_div">
<!--图片区域-->
<div id="f_imgDiv"></div>
<div id="f_infoDiv">
<!--数字按钮区域-->
<div id="f_buttonDiv"></div>
</div>
</div>
<table width="150" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td align="center" bgcolor="#EFEFEF">
<!--焦点文字区域-->
<div id="f_text" class="f12b"></div>
<script language="javascript" type="text/javascript">
<!--
//more javascript from
http://www.smallrain.netfunction p$(string){
document.write(string);
}
function $(id){
return document.getElementById(id);
}
function change_menu(id,content_id,num,total_ztc_menu,menu_on,menu_off){
for (var i=1;i<=total_ztc_menu;i++){
$(id+i).className=menu_off;
$(content_id+i).style.display='none';
}
$(id+num).className=menu_on;
$(content_id+num).style.display='block';
}
//可修改区域
var imgWidth=150;
var imgHeight=100;
var _timeOut_=5000;
var show_text = true; //是否显示焦点文字
var timeOut=_timeOut_;
var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间
var now=0; //第一张图
var target="_blank"; //打开方式
var button_on ='on'; //当前焦点对应按钮的样式名
var button_off ='';//非当前焦点对应按钮的样式名
//不可修改区域
var imgUrl = new Array();
var imgText = new Array();
var imgLink = new Array();
var imgAlt= new Array();
var menuList = new Array();//菜单menu
var ver=2; //兼容浏览器版本 默认2 为非ie
var firstTime=true;
var n =-1;
//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://show.skyhits.com/images/pic_1.jpg';
imgText[n]='<a href="#" target="_blank">内容一</a>';
imgLink[n]='http://show.skyhits.com/moive/14/show1.htm';
imgAlt[n]='内容一';
//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://show.skyhits.com/images/pic_2.jpg';
imgText[n]='<a href="#" target="_blank">内容二</a>';
imgLink[n]='http://show.skyhits.com/society/70/show1.htm';
imgAlt[n]='内容二';
//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://show.skyhits.com/images/pic_3.jpg';
imgText[n]='<a href="#" target="_blank">内容三</a>';
imgLink[n]='http://show.skyhits.com/movie/17/show1.htm';
imgAlt[n]='内容三';
//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://show.skyhits.com/images/pic_4.jpg';
imgText[n]='<a href="#" target="_blank">内容四</a>';
imgLink[n]='http://show.skyhits.com/society/52/show1.htm';
imgAlt[n]='内容四';
//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://show.skyhits.com/images/pic_5.jpg';
imgText[n]='<a href="#" target="_blank">内容四</a>';
imgLink[n]='http://show.skyhits.com/society/61/show1.htm';
imgAlt[n]='内容四';
var count=0;
for (var i=0;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) {
count++;
} else {
break;
}
}
//重写css
var each_width=Math.ceil((imgWidth-(count-1))/count);
var last_width=imgWidth-each_width*(count-1)-(count)+1;
function change(){
if (ver==1){
with($('f_img').filters[0]){
Transition=1;
apply();
play();
}
}
if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;}
else{
$('f_img').src=imgUrl[now];
$('f_img').alt=imgAlt[now];
$('f_imgLink').href=imgLink[now];
if (show_text) $('f_text').innerHTML=imgText[now];
for (var i=0;i<count;i++) {
$('b'+i).className="button";
//$('f_menu'+i).className="";
}
$('b'+now).className="on";
//$('f_menu'+now).className="on";
now=(now>=imgUrl.length-1)?0:now+1;
timeOut=_timeOut_;
}
theTimer=setTimeout("change()", timeOut);
}
function b_change(num){
window.clearInterval(theTimer);
now=num;
firstTime=false;
change();
}
//draw 渐变line (即css:f_line)
function draw_line(){
var div = document.createElement("div");
div.id = 'f_line';
$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0));
}
//表现层 start
//图片
var a = document.createElement("a");
a.id="f_imgLink";
a.target=target;
a.href=imgLink[now];
$('f_imgDiv').appendChild(a);
var img = document.createElement("img");
img.id="f_img";
img.width=imgWidth;
img.height=imgHeight;
img.src=imgUrl[now];
img.alt=imgAlt[now];
a.appendChild(img);
//数字按钮
for (var i=count-1;i>=0;i--){
var div_bg = document.createElement("div");
div_bg.id = 'div_bg'+i;
div_bg.className='bg';
$('f_buttonDiv').appendChild(div_bg);
var a = document.createElement("a");
a.id = 'b'+i;
a.className = (i==now+1)?"button_on":"button_off";
a.title=imgAlt[i];
a.innerHTML=i+1;
a.href='javascript:b_change('+i+')';
$('div_bg'+i).appendChild(a);
var div= document.createElement("div");
$('f_buttonDiv').appendChild(div);
}
if (show_text) $('f_text').innerHTML = imgText[now];
//表现层 end
$('f_img').onmouseover=function(){window.clearInterval(theTimer);}
$('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);}
try{ //滤镜版本
new ActiveXObject("DXImageTransform.Microsoft.Fade");
$('f_img').filters[0].play();
ver=1;
draw_line();
}
catch (e){ver=2;}
var theTimer = setTimeout("change()", _timeOut_/1000);
//-->
</script>
</td>
</tr>
</table>
</div>
</body>
</html>
实现放鼠标上去图片慢慢变大
一种鼠标触发的图片效果
<SCRIPT language=JavaScript>
<!--
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
// Flash Image Extension for Dreamwever ,by Yichun Yuan(
dezone@sina.com)
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
function changeto(highlightcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}
function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
//-->
</SCRIPT>
<center>
<table width="300" border="0" cellspacing="1" cellpadding="0" align="center" bgcolor="7285CF">
<tr bgcolor="#FFFFFF" align="center">
<td><a href="/dreamweaver/index.asp"><img src="
http://www.1studio.net/html/example/image/index_dreamweaver.gif" width="60" height="60" border="0" alt="Dreamweaver 资源 "onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)"></a></td>
<td><a href="/fireworks/index.asp"><img src="
http://www.1studio.net/html/example/image/index_fireworks.gif" width="60" height="60" border="0" alt="Fireworks 资源" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)"></a></td>
<td><a href="/flash/index.asp"><img src="
http://www.1studio.net/html/example/image/index_flash.gif" width="60" height="60" border="0" alt="Flash 资源" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)"></a></td>
<td><a href="/photoshop/index.asp"><img src="
http://www.1studio.net/html/example/image/index_photoshop.gif" width="60" height="60" border="0" alt="Photoshop 资源" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)"></a></td>
</tr>
</table>
一个图片占击效果
<style>
#divleft,#divright{border:1px solid gray;height:100%}
#divleft{width:33%;float:left}
#divleft img{cursor:pointer;border:0}
#divright{width:66%;float:right}
#divxxx,#divxxx img{position:absolute}
.active{border:3px solid gold}
</style>
<script>
function showPic(obj){
var img=new Image();
img.src=obj.src;
divxxx.appendChild(img);
var w0=divright.clientWidth,h0=divright.clientHeight;
var w1=obj.width,h1=obj.height;
var l=w0*Math.random();
var t=h0*Math.random();
img.style.left=parseInt(l+w1>w0?w0-w1:Math.floor(l));
img.style.top=parseInt(t+h1>h0?h0-h1:Math.floor(t));
img.onmousedown=function(){
if(event.button!=1)
return;
if(divright.current)
divright.current.className="";
this.className="active";
this.style.zIndex=999;
divright.current=this;
this.moving=true;
this.dx=parseInt(this.style.left)-event.screenX;
this.dy=parseInt(this.style.top)-event.screenY;
this.setCapture();
}
img.onmousemove=function(){
if(!this.moving)
return;
status=[event.screenX+this.dx,event.screenY+this.dy];
this.style.left=event.screenX+this.dx;
this.style.top=event.screenY+this.dy;
}
img.onmouseup=function(){
if(event.button!=1)
return;
if(this.moving){
this.moving=false;
this.style.zIndex=0;
this.releaseCapture();
}
}
img.ondblclick=function(){
divxxx.removeChild(this);
}
}
</script>
<div id=divleft>
<img onclick=showPic(this) src=http://pages.blueidea.com/articleimg/2007/03/1433/preview_s01.jpg>
<img onclick=showPic(this) src=http://pages.blueidea.com/articleimg/2007/03/1431/preview_s01.jpg>
<img onclick=showPic(this) src=http://pages.blueidea.com/articleimg/2006/08/1334/preview_s01.jpg>
</div>
<div id=divright><div id=divxxx></div></div>