jquey常见特效之自定义滑轮

最新推荐文章于 2018-12-08 10:01:09 发布

原创最新推荐文章于 2018-12-08 10:01:09 发布 · 318 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#自定义滑轮 #jquery

jquery 专栏收录该内容

11 篇文章

订阅专栏

从2011年起，文章主演了《裸婚时代》，该电视剧成为收视冠军，并参演了票房大卖的电影《失恋33天》。之后几年间，他不仅出演了多部热门电影如《西游·降魔篇》、《一步之遥》，还涉足导演工作，推出了《小爸爸》等作品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	html{
		background-color: #ddd;
	}
	#box1{
		width: 80%;
		height: 50px;
		margin: 20px auto;
		background-color: #aaa;
		position: relative;
	}
	#box2{
		height: 50px;
		width: 50px;
		background-color: #111;
		position: absolute;				
	}
	#text1{
		border: 1px solid black;
		width: 15%;
		height: 300px;
		margin: 10px auto;
		overflow: hidden;
		position: relative;

	}
	#text2{
		position: absolute;
	}
</style>
<body>
	<!--自定义滑轮-->
	<div id="box1">
		<div id="box2"></div>
	</div>
	<!--文本-->
	<div id="text1">
		<div id="text2">
			1年6月11日，主演的电视剧《裸婚时代》在各大卫视开播，开播第一周已成为全国同时段收视冠军 [5]  [26]  ；11月6日，参加电影《失恋33天》首映仪式 [27]  ；11月8日，主演的电影《失恋33天》在全国上映；该片上映4天票房突破1亿元，首周票房超过1.5亿元； [28]  11月16日，参加电影《失恋33天》票房过两亿的庆功答谢会 [29]  ；同年凭借电影《海洋天堂》获得第14届中国电影华表奖优秀新人男演员以及第18届北京大学生电影节最受大学生欢迎男演员奖 [6]  [30]  ；12月21日，《失恋33天》在全国各大院线正式下线，这部投资成本不足千万的电影，最终获得了3.5亿的票房。 [31] 
			2012年9月29日，凭借电影《失恋33天》获得第31届大众电影百花奖最佳男主角奖 [8]  ；同年成立自己经营的影视工作室—北京君竹影视文化有限公司，并参与投资制作第一部影视作品《小爸爸》。 [32] 
			2013年2月10日，由文章主演，周星驰执导的电影《西游·降魔篇》在全国上映 [9]  ，该片全球票房破2.15亿美元，打破华语片票房纪录 [33]  ；9月2日文章首部导演作品《小爸爸》完成制作，在东方、浙江、深圳、陕西四大卫视并同步优酷、土豆网双平台首播 [34]  ；9月参演姜文执导的动作喜剧《一步之遥》 [35]  ；11月凭借抗战剧《雪豹》中的演出获得第12届四川电视节金熊猫奖长篇电视剧类最佳男演员奖， [36]  这是他获得的第一个电视剧类专业个人表演奖项。
			2014年3月28日，文章主演的中韩合资文艺爱情片《我在路上最爱你》
			电视剧《裸婚时代》剧照
			电视剧《裸婚时代》剧照(13张)
			 在全国上映 [37]  ；9月1日，文章出席电影《一步之遥》首映礼倒计时100天活动 [38]  ；12月18日，与姜文主演的电影《一步之遥》在全国上映，在片饰演“武七”一角 [39]  。
			2015年7月，文章执导的首部大银幕作品《陆垚知马俐》已经在上海低调开机 [40]  。
			2016年1月11日，文章主演的年代剧《少帅》在北京卫视和东方卫视首播。 [41]  4月，自导自演谍战剧《剃刀边缘》 [12]  。7月15日，文章执导电影《陆垚知马俐》上映 [42]  。7月29日，参演电影《封神传奇》上映 [43]  。10月17日，客串包贝尔执导的微笑喜剧《欢喜密探》上线播出 [44-45]  。
			2017年3月2日，凭借《少帅》获得2017中国电视剧品质盛典年度品质表演剧星 [46]  ；3月20日，文章执导并参演的《剃刀边缘》在东方卫视和北京卫视播出。 [47] 
		</div>
	</div>
	<script type="text/javascript">
		//按下滑轮
		$("#box2").on("mousedown",function(e){			
			//获取滑轮左侧到鼠标点击点距离
			var data_x = e.pageX - $("#box1").offset().left - $("#box2").position().left;
			console.log($("#box2").position().left);
			//鼠标移动
			var ratio;				//获取滑轮位置百分比
			$("body").on("mousemove",function(e){				
				var _x = e.pageX - data_x - $("#box1").offset().left;				//获取滑轮相对父元素的左偏移
				var active = $("#box1").width() - $("#box2").width();				//滑轮可滑动的长度				
				if(_x < 0)	_x = 0;					//避免出界
				if(_x > active)	_x = active;
				ratio = _x / active;
				$("#box2").css('left', _x);				
				var top = ratio * ($("#text2").height()-$("#text1").height());
				$("#text2").css("top",-top);							//文字移动
			}).on("mouseup",function(){				
				$("#box2").off("mousemove");							//卸载事件
				$("body").off("mousemove")
			})
		})
	</script>
</body>
</html>

演示效果: