常州网络公司首页 >>> WEB编程 >> JAVASCRIPT & AJAX

点击图片放大效果(收藏)

发布时间:2010-3-29 11:40:17   浏览次数:8221

今天在做网站进,要求一个指定的效果。点击了图片后,在原来图片上放大显示一个图片,一看,那效果还不错,所以就收藏了。

下面是JS代码:

var hs = {

// Apply your own settings here, or override them in the html file. 
graphicsDir : 'highslide/graphics/',
restoreCursor : "zoomout.cur", // necessary for preload
expandSteps : 10, // number of steps in zoom. Each step lasts for duration/step milliseconds.
expandDuration : 250, // milliseconds
restoreSteps : 10,
restoreDuration : 250,
allowMultipleInstances: true,
hideThumbOnExpand : true,
captionSlideSpeed : 1, // set to 0 to disable slide in effect
outlineWhileAnimating : false, // not recommended, animation gets jaggy on slow systems.
outlineStartOffset : 3, // ends at 10
marginLeft : 10,
marginRight : 35, // leave room for scrollbars + outline
marginTop : 10,
marginBottom : 35, // leave room for scrollbars + outline
numberOfImagesToPreload : 5,
zIndexCounter : 1001, // adjust to other absolutely positioned elements
fullExpandIcon : 'fullexpand.gif',
fullExpandTitle : 'Expand to actual size',
restoreTitle : '',
focusTitle : 'Click to bring to front',
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
loadingOpacity : 0.75,
showCredits : true, // you can set this to false if you want
creditsText : '',
creditsHref : '',
creditsTitle : '',
enableKeyListener : true,

// These settings can also be overridden inline for each image
anchor : 'auto', // where the image expands from
align : 'auto', // position in the client (overrides anchor)
targetX: null, // the id of a target element
targetY: null,
captionId : null,
captionTemplateId : null,
slideshowGroup : null, // defines groups for next/previous links and keystrokes
spaceForCaption : 30, // leaves space below images with captions
minWidth: 200,
minHeight: 200,
allowSizeReduction: true, // allow the image to reduce to fit client size. If false, this overrides minWidth and minHeight
outlineType : 'drop-shadow', // set null to disable outlines
wrapperClassName : null, // for enhanced css-control

  
// END OF YOUR SETTINGS


// declare internal properties
preloadTheseImages : [],
continuePreloading: true,
expandedImagesCounter : 0,
expanders : [],
overrides : [
 'anchor',
 'align',
 'targetX',
 'targetY',
 'outlineType',
 'outlineWhileAnimating',
 'spaceForCaption',
 'wrapperClassName',
 'minWidth',
 'minHeight',
 'captionId',
 'captionTemplateId',
 'allowSizeReduction',
 'slideshowGroup'
],
overlays : [],
pendingOutlines : {},
clones : {},
faders : [],
ie : (document.all && !window.opera),
safari : navigator.userAgent.indexOf("Safari") != -1,
hasFocused : false,

$ : function (id) {
 return document.getElementById(id);
},

push : function (arr, val) {
 arr[arr.length] = val;
},

createElement : function (tag, attribs, styles, parent, nopad) {
 var el = document.createElement(tag);
 if (attribs) hs.setAttribs(el, attribs);
 if (nopad) hs.setStyles(el, {padding: 0, border: 'none', margin: 0});
 if (styles) hs.setStyles(el, styles);
 if (parent) parent.appendChild(el); 
 return el;
},

setAttribs : function (el, attribs) {
 for (var x in attribs) {
  el[x] = attribs[x];
 }
},

setStyles : function (el, styles) {
 for (var x in styles) {
  try {
   if (hs.ie && x == 'opacity') {
    el.style.filter = styles[x] == 1 ? 'none' : 'alpha(opacity='+ (styles[x] * 100) +')';
    
   }
   else el.style[x] = styles[x];
  }
  catch (e) {}
 }
},

ieVersion : function () {
 arr = navigator.appVersion.split("MSIE");
 return parseFloat(arr[1]);
},

clientInfo : function () {
 var iebod