2024-06-27
藏龙卧虎
00
请注意,本文编写于 112 天前,最后修改于 9 天前,其中某些信息可能已经过时。

提示:以下代码拷贝到本地,填入新建的 .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>
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!