原生HTML+JS实现横向滚动广告位
提示：以下代码拷贝到本地，填入新建的 `.html` 文件，使用浏览器打开即可预览效果。 ```ht
渲染中...
提示：以下代码拷贝到本地，填入新建的 `.html` 文件，使用浏览器打开即可预览效果。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$().ready(function(){
openMove("moving",10,"http://www.baidu.com");
});
/*$().ready(function(){
alert($("#moving").css("width"));
});*/
/*openMove("moveing",100,"http://www.baidu.com")*/
/*author：huhu；Function：make a div to moving in a row */
/*定义变量：
* n：用于给变div定位值
* bodyWidth：用于动态获取当前浏览器窗口宽度，设置div移动的范围——即响应式布局。
* divWidth：用于动态设置div宽度——因为如果不动态设置，当div左侧在窗口内，右侧在窗口外时，会使可视窗口的宽度被动增加
* */
positioning = -100;
divWidth = 100;
primitiveWidth = 100;
divHeight = 100;
speed = 0;
toUrl = "";
divId = "";
time="";
/*参数初始化方法*/
function openMove(newDivId, newSpeed, url) {
divId=newDivId;
divWidth = parseInt($("#" + divId).css("width"));
positioning= parseInt("-"+ divWidth);
primitiveWidth = divWidth;
divHeight = $("#" + divId).css("height");
speed = newSpeed;
toUrl = url;
};
/*定时器开启函数*/
function beginMove() {
/*给定时器一个变量，用于清除定时
* （"第一个参数为定时器每次循环执行的代码——注意加引号！！！",第二个参数为定时器间隔时间）
* */
time = setInterval("remaveDiv()", speed);
}
/*书写div移动方式代码*/
function remaveDiv() {
// 获取当前浏览器窗口宽度
bodyWidth = document.documentElement.clientWidth;
positioning+=1;
// 获取id为remove的元素
// 设置div的css样式left属性值
$("#" + divId).css("left",positioning+"px");
// 判断定位偏移值与窗口宽度是否相同，相同，则说明div已经完全移动到窗口外，则将偏移值重置
if(positioning == bodyWidth) {
positioning = parseInt("-"+ primitiveWidth);
}
// 判断窗口大小减去偏移值是否小于div宽度，如果小于，说明div右侧已经移动到窗口外，所以减小div宽度
if(bodyWidth - positioning < primitiveWidth) {
divWidth--;
} else { // 如果不小于div宽度，说明div还未移出窗口，所以div宽度仍为初始值（用于div宽度缩小到0后，下一次移动恢复宽度）
divWidth = primitiveWidth;
}
// 动态设置div宽度
$("#" + divId).css("width", divWidth+"px");
}
/*点击事件：跳转到新页面*/
function toDress() {
window.open(toUrl);
}
</script>
<style type="text/css">
#father {
height: 100px;
width: 100%
position: relative;
}
#moving {
/*设置定位原则：绝对定位，若没有父级的相对定位，则会默认为html元素*/
position: absolute;
/*设置div背景图片*/
/*background-image: url(img/logo.png);*/
/*设置鼠标在此div上时，显示为小手*/
cursor: pointer;
}
</style>
</head>
<body style="width: 100%;">
<div>
<div id="father">
<!--onmouseover：鼠标移入事件；onmouseout：鼠标移出事件；onclick点击事件-->
<div style="width: 300px; height: 100px; background-color: skyblue;" id="moving"
onmouseover="clearInterval(time)" onmouseout="beginMove()" onclick="toDress()">
你好，我是滚动广告
<!--<input type="text" id="number" />-->
</div>
</div>
<div>
<input type="button" onclick="beginMove()" value="begin" />
<input type="button" onclick="clearInterval(time)" value="stop" />
</div>
</div>
</body>
</html>
```
<!-- more -->
END
评论
登录后查看和发表评论
前往登录