打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
JS图片效果
一个不错的图片效果:
<!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.net
function 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>
点击出现图片大图效果
 <style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;}
#enlarge_images{position:absolute;display:none;z-index:2;}
</style>
<div id="demo">
 <img src="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" />
 <img src="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" />
 <img src="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" />
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
 var ts = gg[i];
 ts.onclick = function(event){
  event = event || window.event;
  ei.style.display = "block";
  ei.innerHTML = '<img src="' + this.src + '" />';
  ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
  ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
 }
 ts.onmouseout = function(){
  ei.innerHTML = "";
  ei.style.display = "none";
 }
}
</script>
 
 
实现放鼠标上去图片慢慢变大
 <?xml version="1.0" encoding="gb2312"?>
<!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>Test page</title>
<meta name="Author" content="mozart0" />
<style type="text/css">
/*<![CDATA[*/
body{padding-top:100px;text-align:center;background-color:black}
img{border:1px solid gold;margin:5px 5px 0 0}
/*]]>*/
</style>
<script language="javascript" type="text/javascript" src="http://mozart0.uni.cc/zoom.js"></script>
</head>
<body>
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2007/05/1457/preview_s01.jpg" />
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2007/01/1412/preview_s01.jpg" />
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" />
<br />
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2006/12/1397/preview_s01.jpg" />
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2006/11/1382/preview_s01.jpg" />
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2006/10/1373/preview_s01.jpg" />
<br />
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2006/09/1351/preview_s01.jpg" />
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2006/07/1319/preview_s01.jpg" />
<img rel="zoom#2.5" src="http://pages.blueidea.com/articleimg/2006/07/1308/preview_s01.jpg" />
 </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>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
超酷超绚精美图片展示效果代码(十)——网页特效
【图片特效】JS水纹切片特效的多幅图片切换效果
JS大幅卷屏广告代码
使用javascript和css模拟帧动画的3种方法分析
JavaScript实现竖向滚动条的一种思路
wangwang
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服