弹性伸缩按钮jquery焦点图js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是弹性伸缩按钮jquery焦点图js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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=UTF-8">
<title>弹性伸缩按钮jquery焦点图</title>
<link href="css/tg_style.css" rel="stylesheet" type="text/css">
  <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <style type="text/css">
  .mypng img {
  azimuth: expression( this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "img/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true);
  }/* 兼容ie6png代码 */
  </style>
</head>
<body>
  <div id="focusBar"> 
  <a href="javascript:void(0)" class="arrL" onclick="prePage()" style="left: 0px;">左</a>
  <a href="javascript:void(0)" class="arrR" onclick="nextPage()" style="right: 0px;">右</a>
  <ul class="mypng">
    <li id="focusIndex1" style="background:url(./img/banner_bj_001.gif) repeat-x;">
      <div class="focusL"><a href="#"><img src="img/1.png" width="1000" height="540"></a></div>
      <div class="focusR"><a href="#"><img src="img/2.png" width="1000" height="540"></a></div>
      <div style="width:1000px; height:540px; margin:0 auto; background:url(./img/banner_bj_01.jpg) no-repeat;">
    </li>
    <li id="focusIndex2" style="background:url(./img/banner_bj_002.gif) repeat-x;">
      <div class="focusL"><a href="#"><img src="img/3.png" width="1000" height="540"></a></div>
      <div class="focusR"><a href="#"><img src="img/4.png" width="1000" height="540"></a></div>
      <div style="width:1000px; height:540px; margin:0 auto;"></div>
    </li>
    <li id="focusIndex3" style="background:url(./img/banner_bj_003.gif) repeat-x;">
      <div class="focusL"><a href="#"><img src="img/5.png" width="1000" height="540"></a></div>
      <div class="focusR"><a href="#"><img src="img/6.png" width="1000" height="540"></a></div>
      <div style="width:1000px;height:540px; margin:0 auto; background:url(./img/banner_bj_03.jpg) no-repeat; "></div>
    </li>
    <li id="focusIndex4" style="background:url(./img/banner_bj_004.gif) repeat-x;">
      <div class="focusL"><a href="#"><img src="img/7.png" width="1000" height="540"></a></div>
      <div class="focusR"><a href="#"><img src="img/8.png" width="1000" height="540"></a></div>
      <div style="width:1000px; height:540px; margin:0 auto; background:url(./img/banner_bj_04.jpg) no-repeat;"></div>
    </li>
  </ul>
  </div>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

jQuery.cookie = function(name,value,options){
	if (typeof value != 'undefined'){
	// name and value given,set cookie options = options ||{
}
;
	if (value === null){
	value = '';
	options.expires = -1;
}
var expires = '';
	if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)){
	var date;
	if (typeof options.expires == 'number'){
	date = new Date();
	date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
}
else{
	date = options.expires;
}
expires = ';
	expires=' + date.toUTCString();
	// use expires attribute,max-age is not supported by IE}
var path = options.path ? ';
	path=' + options.path:'';
	var domain = options.domain ? ';
	domain=' + options.domain:'';
	var secure = options.secure ? ';
	secure':'';
	document.cookie = [name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');
}
else{
	// only name given,get cookie var cookieValue = null;
	if (document.cookie && document.cookie != ''){
	var cookies = document.cookie.split(';
	');
	for (var i = 0;
	i < cookies.length;
	i++){
	var cookie = jQuery.trim(cookies[i]);
	// Does this cookie string begin with the name we want? if (cookie.substring(0,name.length + 1) == (name + '=')){
	cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
	break;
}
}
}
return cookieValue;
}
}
;
	$(function(){
	$(window).bind("mousewheel",function(e,delta){
	var mousewheelX = parseInt($(window).height()/3);
	mousewheelX = (mousewheelX<200 || mousewheelX>350)?200:mousewheelX;
	//mousewheelX = 250;
	if(delta > 0){
	mousewheelX = -mousewheelX;
}
$('html,body').stop().animate({
	scrollTop:$(window).scrollTop()+mousewheelX}
,700);
	return false;
}
);
	$("#focusIndex1").show();
	$("#focusBar li").css("width",$(window).width());
	$("a.arrL").mouseover(function(){
	stopFocusAm();
}
).mouseout(function(){
	starFocustAm();
}
);
	$("a.arrR").mouseover(function(){
	stopFocusAm();
}
).mouseout(function(){
	starFocustAm();
}
);
	$("#focusBar li").mouseover(function(){
	stopFocusAm();
}
).mouseout(function(){
	starFocustAm();
}
);
	starFocustAm();
}
);
	/*------focus-------*/
$("#focusBar").hover(function (){
	$("#focusBar .arrL").stop(false,true);
	$("#focusBar .arrR").stop(false,true);
	$("#focusBar .arrL").animate({
	left:0}
,{
	duration:500}
);
	$("#focusBar .arrR").animate({
	right:0}
,{
	duration:500}
);
}
,function (){
	$("#focusBar .arrL").stop(false,true);
	$("#focusBar .arrR").stop(false,true);
	$("#focusBar .arrL").animate({
	left:-52}
,{
	duration:500}
);
	$("#focusBar .arrR").animate({
	right:-52}
,{
	duration:500}
);
}
);
	var timerFID;
	function nextPage(){
	changeFocus(true);
}
function prePage(){
	changeFocus(false);
}
var currentFocusI=1;
	var changeingFocus = false;
	function changeFocus(dir){
	if($("#focusBar li").length <= 1) return;
	if(changeingFocus) return;
	changeingFocus = true;
	$("#focusIndex"+nextI).stop(false,true);
	$("#focusIndex"+nextI+" .focusL").stop(false,true);
	$("#focusIndex"+nextI+" .focusR").stop(false,true);
	var nextI = dir?currentFocusI+1:currentFocusI-1;
	nextI = nextI>$("#focusBar li").length?1:(nextI<1?$("#focusBar li").length:nextI);
	//var focusWidth = $(window).width()>1000?1000:$(window).width();
	$("#focusIndex"+currentFocusI).css("width",$(window).width());
	$("#focusIndex"+nextI).css("width",$(window).width());
	if(dir){
	$("#focusIndex"+nextI).css("left",$(window).width());
	$("#focusIndex"+nextI+" .focusL").css("left",$(window).width()/2);
	$("#focusIndex"+nextI+" .focusR").css("left",$(window).width()/2);
	$("#focusIndex"+currentFocusI).show();
	$("#focusIndex"+nextI).show();
	$("#focusIndex"+currentFocusI+" .focusL").animate({
	left:-($(window).width()/2+1000)}
,300,'easeInExpo');
	$("#focusIndex"+currentFocusI+" .focusR").animate({
	left:-($(window).width()/2+1000)}
,500,'easeInExpo',function(){
	$("#focusIndex"+nextI+" .focusL").animate({
	left:-500}
,1000,'easeInOutCirc');
	$("#focusIndex"+nextI+" .focusR").animate({
	left:-500}
,1200,'easeInOutCirc');
	$("#focusIndex"+currentFocusI).animate({
	left:-$(window).width()}
,1000,'easeOutExpo');
	$("#focusIndex"+nextI).animate({
	left:0}
,1000,'easeOutExpo',function(){
	$("#focusIndex"+currentFocusI).hide();
	currentFocusI = nextI;
	changeingFocus = false;
}
);
}
);
}
else{
	$("#focusIndex"+nextI).css("left",-$(window).width());
	$("#focusIndex"+nextI+" .focusL").css("left",-($(window).width()/2+1000));
	$("#focusIndex"+nextI+" .focusR").css("left",-($(window).width()/2+1000));
	$("#focusIndex"+currentFocusI).show();
	$("#focusIndex"+nextI).show();
	$("#focusIndex"+currentFocusI+" .focusR").animate({
	left:$(window).width()/2}
,300,'easeInExpo');
	$("#focusIndex"+currentFocusI+" .focusL").animate({
	left:$(window).width()/2}
,500,'easeInExpo',function(){
	$("#focusIndex"+nextI+" .focusL").animate({
	left:-500}
,1200,'easeInOutCirc');
	$("#focusIndex"+nextI+" .focusR").animate({
	left:-500}
,1000,'easeInOutCirc');
	$("#focusIndex"+currentFocusI).animate({
	left:$(window).width()}
,1000,'easeOutExpo');
	$("#focusIndex"+nextI).animate({
	left:0}
,1000,'easeOutExpo',function(){
	$("#focusIndex"+currentFocusI).hide();
	currentFocusI = nextI;
	changeingFocus = false;
}
);
}
);
}
}
function starFocustAm(){
	timerFID = setInterval("timer_tickF()",12000);
}
function stopFocusAm(){
	clearInterval(timerFID);
}
function timer_tickF(){
	changeFocus(true);
}

CSS代码(tg_style.css):

@charset "utf-8";/* CSS Document */
body{margin:0;padding:0;font-size:14px;font-family:"Arial","微软雅黑";color:#666666;line-height:24px;background-color:#ffffff;padding-top:64px;overflow-x:hidden;}
a,a:hover{color:#666666;text-decoration:none;border:0px;}
ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0px;padding:0px;}
ul,li,dl,dt,dd{list-style-type:none;}
img{border:0;}
a{outline:none;/*移除虚线框 IE8,FF有用*/
 hide-focus:expression(this.hideFocus=true);/*IE6、IE7*/
}
#focusBar{width:100%;height:540px;clear:both;position:relative;background:#242424;overflow:hidden;}
#focusBar li{width:100%;clear:both;height:644px;display:none;position:absolute;/* position:relative;*/
 overflow:hidden;}
#focusBar .focusL{height:540px;margin-top:-1px;position:absolute;z-index:9;/*left:-1000px;*/
 top:0px;left:-500px;margin-left:50%;}
#focusBar .focusR{height:540px;margin-top:-1px;position:absolute;z-index:19;/* right:1000px;*/
top:0px;left:-500px;margin-left:50%;}
a.arrL,a.arrR{display:block;width:52px;height:120px;color:#fff;font-size:18px;text-align:center;line-height:120px;position:absolute;top:210px;z-index:99;cursor:pointer;background:#be0000;background-repeat:no-repeat;}
a.arrL{left:-52px;}
a.arrR{right:-52px;}

附件:下载该文件资源,减少时间成本(增值服务)