0
点赞
收藏
分享

微信扫一扫

JavaScript html js图片滑动展示效果,图片重叠在一起

_刘彦辉 2023-04-27 阅读 60
HTMLJavaScriptprototypeXHTMLViewUI前端开发


<!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>
<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";
		}
	})

	//容器样式设置
	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);
  }
};

window.onload=function(){
	new GlideView("idGlideView", 1000, "div", 500, { TextTag: "a", TextHeight: 50 });
}
</script>
<style type="text/css">
#idGlideView{height:100px;margin:100px auto;}
#idGlideView div{width:500px;height:100px;}
#idGlideView div a{width:500px;height:50px;filter: alpha(opacity=50);opacity: 0.5; background:#000; color:#fff; text-decoration:none;}
</style>
</head>
<body>
<div id="idGlideView">
  <div style="background-color:#006699;"> <a href="/">黑色头发</a> </div>
  <div style="background-color:#FF9933;"> <a href="/">紫色头发</a> </div>
  <div style="background-color:#9999FF;"> <a href="/">黑色头发</a> </div>
  <div style="background-color:#006699;"> <a href="/">紫色头发</a> </div>
  <div style="background-color:#FF9933;"> <a href="/">黑色头发</a> </div>
  <div style="background-color:#9999FF;"> <a href="/">紫色头发</a> </div>
</div>
</body>
</html>




程序原理：



设计之初，先不要考虑文本显示那部分，把重心放到滑动效果的实现上，


减少设计负担，这是小小的技巧吧。



总体的思路是通过移动各个滑动对象到指定的位置来实现不同的效果。


效果有两种，分部是：鼠标移出容器时的默认效果和鼠标移到某个滑动对象时的展示效果。


根据效果可以看出，滑动对象有三种宽度一个是默认宽度，最大宽度和最小宽度。


这些宽度都可以在初始化时设置： 



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));

我给每个滑动对象添加了一个_target属性来放一个目标值，用来告诉它要滑到哪里。



移动之前先执行Set()程序，给每个对象设置目标值，要分两种情况：



1.鼠标移出容器：这时只要设置滑动对象的目标值为默认宽度*索引值就行； 




oList._target = this._width * i;



2.鼠标移到某个滑动对象上：把当前对象和之前的滑动对象的目标值设为最小宽度*索引值，之后的对象设为最小宽度*(索引值-1)加上最大宽度（因为这样会算多一个最小宽度所以要减1个），这样设置就能得到要实现的效果： 




oList._target = (i <= index) ? this._width_min * i : this._width_min * (i - 1) + this._width_max;



接下来就是怎么移动到目标值了，这个在Move()程序中实现。


首先移动效果是通过用计时器逐步设置滑动对象的left来实现，减速部分用一个GetStep()程序来实现(相关说明请看JavaScript 图片切换展示效果)。


不断移动，直到所有滑动对象都到达目标值： 



clearTimeout(this._timer);
var bFinish = true;
this.Each(function(oList, oText, i){
    var nowLeft = parseInt(oList.style.left), iLeftStep = this.GetStep(oList._target, nowLeft);
    if (iLeftStep != 0) { bFinish = false; oList.style.left = (nowLeft + iLeftStep) + "px"; }
})
if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }



这个程序本身的难度不高，就难在程序设计，例如怎么实现变化的效果（由于有实例难度就没那么高了）。


还有一个思想是把“移动到指定目标”这个任务分派到各个滑动对象，


主程序只要知道是否各个滑动对象都到达指定目标就行了，


这在给滑动对象设置_target属性和Each()程序的应用中能体现出来。


如果每次移动都由主程序来计算（试想想没有这个_target属性），难度会大大增加，


而设计之初很容易会陷入这个死胡同。



还有一点是容器的mouseout事件中，要先判断鼠标是否在容器外(相关说明请看JavaScript 自定义多级联动浮动菜单)。



扩展功能：



可以设置的属性：


Step: 滑动变化率；


Time: 滑动延时；


TextTag: 说明容器tag；


TextHeight: 说明容器高度；


Delay: 延迟值(微秒)；


Showtext：是否显示说明文本；



能实现什么功能就看各位的想象力了。



程序测试：



实例化对象： 




new GlideView("idGlideView", 1000, "div", 500, { TextTag: "a", TextHeight: 50 });

其中参数分别是容器对象，容器宽度，展示标签，展示宽度，最后是一些设置。





黑色头发:http://heisetoufa.iteye.com/


举报

相关推荐

为什么绝对定位会重叠在一起

css3htmlcssvue

js javascript 图片切换js,滑动展示,图片滑动新闻展示

JavaScriptCC++C#prototype代码人生

Word中文字重叠在一起怎么办

harmonyos华为android鸿蒙鸿蒙系统ArkTS

JavaScript html js图片截取效果,图片切割,非常不错的js代码

HTMLJavaScriptUPprototypeXHTML前端开发

idea中包太多折叠在一起时解决办法

eclipsespringjavamavenintellij-idea

永远和我们在一起

商业编程语言

JavaScript html js图片切割系统,裁剪,图片处理

HTMLJavaScriptCC++C#HarmonyOS后端开发

httpclient如何一起上传内容和图片

javapostmanandroid开发语言测试工具Java后端开发

jquery 多张图片左右滑动效果

jQueryHTML滑动效果前端开发

JS 随机图片效果

javascriptViewUIImagehtmlMath代码人生
0 条评论