深圳做网站需要多少费用,即,网页设计模拟试题答案,中信建设有限责任公司江苏分公司企查查1#xff0c;要求
通过定时器使其出现滚动的效果
可以通过按键控制图片滚动的方向#xff08;设置两个按钮绑定点击事件#xff09;
当鼠标悬停时图片停止#xff0c;鼠标离开时图片继续向前滚动#xff08;可以设置鼠标的悬停和离开事件#xff09;
参考如下 conten…1要求
通过定时器使其出现滚动的效果
可以通过按键控制图片滚动的方向设置两个按钮绑定点击事件
当鼠标悬停时图片停止鼠标离开时图片继续向前滚动可以设置鼠标的悬停和离开事件
参考如下 content.onmouseenter function(){//设置鼠标悬停事件key stop;}content.onmouseleave function(){//设置鼠标离开事件key run;}
图片可以持续滚动不会出现空白添加滚动图片
2参考代码左右滚动
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#slide{width:800px;height: 100px;margin: 0 auto;margin-top: 100px;border: 1px solid black;overflow: hidden;}#content{width: 999999px;}img{width: 160px;height: 100px;float: left;margin-right: 10px;cursor: pointer;}#button{width: 100px;margin: 20px auto;}/style/headbodydiv idslidediv idcontentimg src../img/1.png/img src../img/2.png/img src../img/3.png/img src../img/4.png/img src../img/5.png/img src../img/6.png/img src../img/7.png/img src../img/8.png/img src../img/9.png//div/divdiv idbuttonbutton typebutton idleft向左/buttonbutton typebutton idright向右/button/divscript typetext/javascriptvar content document.getElementById(content);var left document.getElementById(left);var right document.getElementById(right);content.style.marginLeft 0px;content.innerHTML content.innerHTMLcontent.innerHTMLcontent.innerHTML;var key run;var dkey left;left.onclick function(){dkey left;}right.onclick function(){dkey right;}content.onmouseenter function(){key stop;}content.onmouseleave function(){key run;}dd();function dd(){var num parseFloat(content.style.marginLeft);if(key run){if(dkey left){num-0.5;if(num-170*9){num0;}}else{num0.5;if(num0){num-170*9;}}}content.style.marginLeft numpx;setTimeout(dd(),13);}/script/body
/html3结果参考示例 4参考代码上下滚动
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css/* 设置盒子 */#div{height: 800px;width: 100px;border: 1px solid black;margin: 0px auto;overflow: hidden; }/* 设置内容即图片的容器*/#content{height: 999999px;}/* 设置图片的样式 */img{width: 100px;height: 160px;margin-top: 10px;cursor: pointer;}/* 设置按钮样式*/#button{ width: 100px;margin: 20px auto;}/style/headbodydiv iddivdiv idcontentimg src../img/2ee18-231100-163232346010b0.jpg/img src../img/1.png/img src../img/2.png/img src../img/3.png/img src../img/4.png/img src../img/5.png/img src../img/6.png/img src../img/7.png/img src../img/8.png/img src../img/9.png//div/divdiv idbuttonbutton typebutton idtop向上/buttonbutton typebutton idbuttom向下/button/divscriptvar content document.getElementById(content);//获取内容的idvar topSlide document.getElementById(top);//获取向上按钮的idvar downSlide document.getElementById(buttom);//获取向下按钮的idcontent.innerHTML content.innerHTMLcontent.innerHTMLcontent.innerHTML;//使内容乘于3倍content.style.marginTop 0 px;//设置外边距初始值var key run;//设置初始是运行的var dkey top;//设置初始是向右边的topSlide.onclick function(){dkey top;}downSlide.onclick function(){dkey buttom;}content.onmouseenter function(){//设置鼠标悬停事件key stop;}content.onmouseleave function(){//设置鼠标离开事件key run;}slide();function slide(){var num parseFloat(content.style.marginTop);if(key run){if(dkey top){num-0.5;if(num-170*9){num0;}}else{num0.5;if(num0){num-170*9;}}} content.style.marginTop numpx;setTimeout(slide(),13);//设置定时器使其运行}/script/body
/html
效果同3
