#offsetLeft获取div的

最新推荐文章于 2021-11-08 08:02:56 发布

Venciki

最新推荐文章于 2021-11-08 08:02:56 发布

阅读量546

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/90243914

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

javascript练习

offsetLeft 获取 div 的left值

offsetWidth

offsetTop

offsetHeight

逻辑运算符

&&

先看第一个表达式转换成布尔值的结果，如果结果为真，那么它会看第二个表达式转换为布尔值的结果，然后如果只有两个表达式的话，只要看第到二个表达式，就可以返回该表达式的值了（只有两个表达式）。例如：

var a= 1 && 2;
document.write(a);

这个代码的输出的是 2 .先看第一个式子发现第式子返回的布尔值为 true 然后就直接返回第二个表达式的值。

当地一个表达式的值为 false 时直接就不看第二个表达式了，直接返回第一个式子的值。例如：

 var a = 0 && 2 + 2;
 document.write(a);

这串代码的输出为 0 ；

如果是多个式子，就逐个判断到假的就开始停止，返回 false 那个式子的值。

如果现在是像这样：

2 > 1 && document.wrtie('aaaaaa')

先判断第一个式子返回值为 true 直接执行第二个式子；

||

碰到真直接就返回那个值返回跟与运算符相反；

，

var socre =  parseInt(windows.prompt('input'));
if()

对象 object

var deng = {
	lastName : "Deng",
	age : 40,
	handsome : false,
	date : undefined,
	wife : "liu",
	father : "zhang",
	son : "zhang",  
}
console.log(deng.lastName);
deng.lastName = "Old Deng";

js事件小样例

无缝滚动；

最主要的部分就是巧妙运用的定时器：当多个图片往左一的时候，（由于本身只有四个图片），当它移动到第四个图片时，它就会出现空白；对于这个问题，我们可以再 html 中直接再把四个图片再复制一遍，这样就会出现 8 个图片，而当我们的这图片整体移动到第四个图片（也就是整个图片的一半的时候），让他的值为零（也就是让它重头再来开始移动），虽然我们当他移动到一半的时候让它从头开始移动，但是这个动画衔接肉眼是无法观测到的。这样就形成了无缝滚动效果。

代码如下：
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>图片滚屏效果</title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	window.onload=function(){
		var oDiv=document.getElementById('roll');
		var oUl=oDiv.getElementsByTagName('ul')[0];
		var oLi=oUl.getElementsByTagName('li');
		var aBtn=oDiv.getElementsByTagName('a');

		var iSpeed=-5;

		oUl.innerHTML+=oUl.innerHTML;
		oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';

		setInterval(function(){
			oUl.style.left=oUl.offsetLeft+iSpeed+'px';
			if (oUl.offsetLeft<-oUl.offsetWidth/2) {
				oUl.style.left='0px';
			}
			else if(oUl.offsetLeft>0){
				oUl.style.left=-oUl.offsetWidth/2;
			}
		}, 30);
		aBtn[0].onmouseover=function(){
			iSpeed=-5;
		}
		aBtn[1].onmouseover=function(){
			iSpeed=5;
		}
	}
</script>
</head>
<body>
<div class="control">
	<label id="chk_pause"><input type="checkbox" checked="checked">间隔停顿</label>
	<select id="pause_time">
		<option value="100">短</option>
		<option value="1000" selected="selected">中</option>
		<option value="3000">长</option>
	</select>

	滚动速度：
	<select id="sel_speed">
		<option value="2">慢</option>
		<option value="5">中</option>
		<option value="10">快</option>
	</select>
</div>

<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="wrap">
        <ul>
            <li><a href="http://www.miaov.com/"><img src="images/1.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/2.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/3.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/4.jpg" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

css::

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }

.roll { width: 880px; height: 108px; margin: 50px auto 0; position: relative; }
.btn_left { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat -70px -69px; position: absolute; top: 20px; left: 1px; z-index: 1; }
.btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; }
.btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 20px; right: 0; z-index: 1; }
.btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; }
.roll .wrap { width: 728px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }
.roll ul { position: absolute; top: 0; left: 0; }
.roll li { float: left; width: 182px; height: 108px; text-align: center; }
.roll li a:hover { position: relative; top: 2px; }

.control { border-bottom: 1px solid #ccc; background: #eee; text-align: center; padding: 20px 0; }