js实现图层鼠标感应自动滑动伸缩展示效果

2个月前 (02-29 19:24)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值3459
  • 级别管理员
  • 主题691
  • 回复2
楼主

通过js脚本实现鼠标感应图层自动滑动伸缩展示功能,还带几个功能按钮,不错的网页特效,根据自身需求来自己修改。

<!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>js实现图层鼠标感应自动滑动展示效果_武鸣人</title>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<script type="text/javascript">
var $$ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
function Event(e){
 var oEvent = document.all ? window.event : e;
 if (document.all) {
  if(oEvent.type == "mouseout") {
   oEvent.relatedTarget = oEvent.toElement;
  }else if(oEvent.type == "mouseover") {
   oEvent.relatedTarget = oEvent.fromElement;
  }
 }
 return oEvent;
}
function addEventHandler(oTarget, sEventType, fnHandler) {
 if (oTarget.addEventListener) {
  oTarget.addEventListener(sEventType, fnHandler, false);
 } else if (oTarget.attachEvent) {
  oTarget.attachEvent("on" + sEventType, fnHandler);
 } else {
  oTarget["on" + sEventType] = fnHandler;
 }
};
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}
var GlideView = Class.create();
GlideView.prototype = {
  //容器对象 容器宽度 展示标签 展示宽度
  initialize: function(obj, iWidth, sTag, iMaxWidth, options) {
    var oContainer = $$(obj), oThis=this, len = 0;
 
 this.SetOptions(options);
 
 this.Step = Math.abs(this.options.Step);
 this.Time = Math.abs(this.options.Time);
 this.Showtext = false;//是否显示说明文本
 
 this._list = oContainer.getElementsByTagName(sTag);
 len = this._list.length;
 this._count = len;
 this._width = parseInt(iWidth / len);
 this._width_max = parseInt(iMaxWidth);
 this._width_min = parseInt((iWidth - this._width_max) / (len - 1));
 this._timer = null;
 
 //有说明文本
 if(this.options.TextTag && this.options.TextHeight > 0){
  this.Showtext = true;
  this._text = oContainer.getElementsByTagName(this.options.TextTag);
  this._height_text = -parseInt(this.options.TextHeight);
 }
 
 this.Each(function(oList, oText, i){
  oList._target = this._width * i;//自定义一个属性放目标left
  oList.style.left = oList._target + "px";
  oList.style.position = "absolute";
  addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); });
  
  //有说明文本
  if(oText){
   oText._target = this._height_text;//自定义一个属性放目标bottom
   oText.style.bottom = oText._target + "px";
   oText.style.position = "absolute";
  }
 })
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 //容器样式设置
 oContainer.style.width = iWidth + "px";
 oContainer.style.overflow = "hidden";
 oContainer.style.position = "relative";
 //移出容器时返回默认状态
 addEventHandler(oContainer, "mouseout", function(e){
  //变通防止执行oList的mouseout
  var o = Event(e).relatedTarget;
  if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);
 })
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
  Step:   20,//滑动变化率
  Time:   20,//滑动延时
  TextTag:  "",//说明容器tag
  TextHeight:  0//说明容器高度
    };
    Object.extend(this.options, options || {});
  },
  //相关设置
  Set: function(index) {
 if (index < 0) {
  //鼠标移出容器返回默认状态
  this.Each(function(oList, oText, i){ oList._target = this._width * i; if(oText){ oText._target = this._height_text; } })
 } else {
  //鼠标移到某个滑动对象上
  this.Each(function(oList, oText, i){
   oList._target = (i <= index) ? this._width_min * i : this._width_min * (i - 1) + this._width_max;
   if(oText){ oText._target = (i == index) ? 0 : this._height_text; }
  })
 }
 this.Move();
  },
  //移动
  Move: function() {
 clearTimeout(this._timer);
 var bFinish = true;//是否全部到达目标地址
 this.Each(function(oList, oText, i){
  var iNow = parseInt(oList.style.left), iStep = this.GetStep(oList._target, iNow);
  if (iStep != 0) { bFinish = false; oList.style.left = (iNow + iStep) + "px"; }
  //有说明文本
  if (oText) {
   iNow = parseInt(oText.style.bottom), iStep = this.GetStep(oText._target, iNow);
   if (iStep != 0) { bFinish = false; oText.style.bottom = (iNow + iStep) + "px"; }
  }
 })
 //未到达目标继续移动
 if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }
  },
  //获取步长
  GetStep: function(iTarget, iNow) {
 var iStep = (iTarget - iNow) / this.Step;
 if (iStep == 0) return 0;
 if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
 return iStep;
  },
  Each:function(fun) {
 for (var i = 0; i < this._count; i++)
  fun.call(this, this._list[i], (this.Showtext ? this._text[i] : null), i);
  }
};//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</script>
<style type="text/css">
#www_wuming_ren {
 height:100px;
 margin:100px auto;
}
#www_wuming_ren div {
 width:500px;
 height:100px;
}
#www_wuming_ren div a {
 width:500px;
 height:50px;
 filter: alpha(opacity=50);
 opacity: 0.5;
 background:#000;
 color:#fff;
 text-decoration:none;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="www_wuming_ren">
 <div style="background-color:#006699;"> <a href="https://www.wuming.ren">武鸣人一号标题</a> </div>
 <div style="background-color:#FF9933;"> <a href="https://www.wuming.ren">武鸣人二号标题</a> </div>
 <div style="background-color:#9999FF;"> <a href="https://www.wuming.ren">武鸣人三号标题</a> </div>
 <div style="background-color:#006699;"> <a href="https://www.wuming.ren">武鸣人四号描述信息</a> </div>
 <div style="background-color:#FF9933;"> <a href="https://www.wuming.ren">武鸣人五号描述信息</a> </div>
 <div style="background-color:#9999FF;"> <a href="https://www.wuming.ren">武鸣人六号描述信息</a> </div>
</div>
<SELECT id=sel>
 <OPTION value=-1 selected>不展开</OPTION>
</SELECT>
<BR>
<BR>
<INPUT id=up type=button value=" + 加 速 ">
<INPUT id=down type=button value=" - 减 速 ">
<BR>
<BR>
<INPUT id=stop type=button value=" 停 止 ">
<INPUT id=start type=button value=" 开 始 ">
<BR>
<BR>
<INPUT id=close type=button value=" 关闭滚动 ">
<INPUT id=open type=button value=" 恢复滚动 ">
<BR>
<BR>
<INPUT id=auto type=button value=" 自动滑动 ">
<INPUT id=cancel type=button value=" 取消自动 ">
<BR>
<BR>
<INPUT id=hide type=button value=" 隐藏说明 ">
<INPUT id=show type=button value=" 显示说明 ">
<BR>
<BR>
<SCRIPT>
var gv = new GlideView("www_wuming_ren", 1000, "div", 500, { TextTag: "a", TextHeight: 50 });
var oSel = $$("sel");
for (var i = 0; i <= gv._count; i++) {
 var op = document.createElement("OPTION");
 op.value = i; op.innerHTML = "展开第" + (i + 1) + "个";
 oSel.appendChild(op);
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
oSel.onchange = function(){ gv.Set(oSel.value); }
$$("up").onclick = function(){ gv.Step -= 5; if(gv.Step <= 0) gv.Step = 1; };
$$("down").onclick = function(){ gv.Step += 5; if(gv.Step >= 500) gv.Step = 50; };
$$("stop").onclick = function(){ clearTimeout(gv._timer); };
$$("start").onclick = function(){ gv.Move(); };
$$("close").onclick = function(){ gv.Step = 1; };
$$("open").onclick = function(){ gv.Step = gv.options.Step; };
$$("hide").onclick = function(){ gv.Showtext = false; };
$$("show").onclick = function(){ gv.Showtext = true; };
var t = null, i = -1;
$$("auto").onclick = function(){ clearInterval(t);t=setInterval(function(){ if(++i>gv._count) i=0; gv.Set(i); }, 1000); };
$$("cancel").onclick = function(){ clearInterval(t);gv.Set(-1); };
</SCRIPT>
</body>
</html>


0
0
收藏0
回帖

js实现图层鼠标感应自动滑动伸缩展示效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息