Home>

This is a special effect that portals have recently used.On the left is a large picture.The corresponding text is on the right,When the mouse moves,The text of the corresponding line changes.Pictures are switched accordingly,If there is no mouse movement,It will play on its own,Play time can be adjusted,Personally feel pretty good navigation effect.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>Text&Picture Switching</title>
<style>
* {margin:0;padding:0;border:0;list-style:none}
.focuspic {width:500px;margin:0 auto;clear:both;text-align:center;border:1px solid #ccc;}
.focuspic .focustitle {width:240px;float:right;font-size:14px;text-align:left;}
.focuspic .focustitle li {height:28px;line-height:28px;cursor:pointer;font-size:12px;padding-left:10px;}
.focuspic .focustitle li a, .focuspic .focustitle li a:visited {color:#000;}
.focuspic .focustitle li a:hover {color:#bc2931;}
.focuspic .focustitle .current a, .focuspic .focustitle .current a:visited {color:#bc2931;}
.focuspic .focustitle .current a:hover {color:#bc2931;}
.focuspic#focusmenu li.current {background:#efefef;font-weight:bold;color:#bc2931;}
.focuspic#focusleft {width:250px;overflow:hidden;float:left;background:#efefef;font-size:14px;line-height:100px;font-weight:bold;height:168px;}
.focuspic#focusleft li {display:none;}
.focuspic#focusleft li.current {display:block;}
</style>
</head>
<body>
<div>
<ul>
<li>vb Online Exam Test System</li>
<li>jquery igoogle homepage module drag</li>
<li>jquery ui official instance set</li>
<li>vb Online Exam Test System</li>
<li>Little monster asp poll survey system v4.0</li>
<li>jquery animated date selection plugin</li>
</ul>
<div>
<ul>
<li><a href="#">vb online question-taking test system</a></li>
<li><a href="#" target="_ blank">jquery igoogle homepage module drag</a></li>
<li><a href="#" target="_ blank">jquery ui official instance set</a></li>
<li><a href="#" target="_ blank">vb online question-taking test system (mssql)</a></li>
<li><a href="#" target="_ blank">Little monster asp poll survey system v4.0</a></li>
<li><a href="#" target="_ blank">jquery date selection plugin with animation</a></li>
</ul>
</div>
<div></div>
</div>
<script language="javascript" type="text/javascript">
//<! [Cdata [
var $= function (id) {
 return document.getelementbyid (id);
};
function.prototype.bind=function () {
 if (arguments.length<2&&arguments [0] == null) {
  return this;
 }
 var __method=this, args=$a (arguments), object=args.shift ();
 return function () {
  return __method.apply (object, args.concat ($a (arguments)));
 };
};
var isarray=function (testvar) {
 return array == testvar.constructor?1:string!=testvar.constructor&null!=testvar.length&&! testvar.alert&&! testvar.nodetype?2:0;
};
var $a=function (variable) {
 switch (isarray (variable)) {
  case 1:
   return variable;
  case 2:
   var arr=[], i=-1, len=variable.length;
   while (++ i&len) {
    arr [i]=variable [i];
   }
   return arr;
  default:
   return [variable];
 }
};
var addclass=function (elem, classname) {
 if (("" + elem.classname + "") .indexof ("" + classname + "") == -1) {
  if (elem.classname == "") {
   elem.classname=classname;
  } else {
   elem.classname +=("" + classname);
  }
 }
};
var removeclass=function (elem, classname) {
 var newclass=("" + elem.classname + "") .replace ("" + classname + "", "");
 elem.classname=newclass.substr (1, newclass.length-2);
};
var addevent=function (elem, eventname, handler) {
 if (elem.addeventlistener) {
  elem.addeventlistener (eventname, handler, false);
 } else if (elem.attachevent) {
  elem.attachevent ("on" + eventname, handler);
 }
};
function slide (menus, contents, css, eventname, interval) {
 var curseq=0, length=contents.length, timerids=[], isstopped;
 if (menus &&length!=menus.length) {
  throw new error ("the amount of menus and contents is not equal");
 }
 var hide=function (seq) {
  removeclass (contents [seq], css);
  if (menus) {
   removeclass (menus [seq], css);
  }
 };
 var show=function (seq) {
  addclass (contents [seq], css);
  if (menus) {
   addclass (menus [seq], css);
  }
  curseq=seq;
 };
 this.shownext=function () {
  var next=curseq + 1;
  if (next>= length) {
   next=0;
  }
  var i=length;
  while (--i>= 0) {
   if (i!=next) {
    hide (i);
   } else {
    show (i);
   }
  }
 };
 this.change=function (event) {
  if (this!=menus [curseq]) {
   var i=length;
   while (--i>= 0) {
    if (menus [i]!=this) {
     hide (i);
    } else {
     show (i);
    }
   }
  }
  e=window.event || event;
  e.cancelbubble=true;
 };
 this.play=function (speed) {
  isstopped=false;
  timerids.push (setinterval (this.shownext.bind (this), speed));
 };
 this.pause=function () {
  isstopped=true;
  var i=length;
  while (--i>= 0) {
   clearinterval (timerids [i]);
   timerids.splice (i, 1);
  }
 };
 var i=length;
 while (--i>= 0) {
  addevent (menus [i], eventname, this.change.bind (menus [i]));
  if (interval>0) {
   addevent (menus [i], "mouseover", this.pause);
   addevent (menus [i], "mouseout", this.play.bind (this, interval));
  }
 }
 if (interval>0) {
  this.play (interval);
 }
}
var focusimg=new slide ($("focusmenu"). getelementsbytagname ("li"), $("focusleft"). getelementsbytagname ("li"), "current", "mouseover", 3000);
//]]>
</script>
</body>
  • Previous JS achieve light blue simple vertical Tab click switching effect
  • Next Talking about the Destructor of C ++ Base Class as Virtual Function