web前端|js教程

js,鼠标滚动,切换页面

web前端-js教程

开放源码平台,vscode添加css,ubuntu 裸机,tomcat经典代码,sqlite支持多少人,搜狗浏览器html5视频播放器插件,当前热门的前端3个框架,爬虫合法协议文件名为,阿里云 oss php,亳州seo推广商家,织梦网站0day漏洞,易语言图片显示网页图片,怎么删除asp网站模板lzw

运行效果截图如下：

万年历源码懒人之家,ubuntu 装搜狗拼音,安装版tomcat怎么用,爬虫文献抓取,php实时交流系统学习,光明seo优化lzw

具体代码如下：

80影院源码,Ubuntu集成网卡连不上,tomcat配置管理账户,阳台小爬虫,php-9,福清一般seo费用是多少lzw

var currentShowPageIndex = 0; var animateTimeout = null; var isWheelAnimating = false; var isWheelUp = function(event) { event = event || window.event; var up = true; if(event.wheelDelta){//IE/Opera/Chromeup = event.wheelDelta / 120 == 1 ? true : false; }else{//Firefoxup = event.detail / 3 == 1 ? true : false; } return up; } var changeBar = function(prevIndex, index) { var barUl = document.getElementById(arUl); var barLiList = barUl.getElementsByTagName(li); barLiList[prevIndex].className = ""; barLiList[index].className = "active"; } var changePage = function(pageIndex) { var showPageUl = document.getElementById(wheelUl); changeBar(currentShowPageIndex, pageIndex); currentShowPageIndex = pageIndex; var left = -(currentShowPageIndex) * 1000; showPageUl.style.marginLeft = left + "px"; return; } var animate = function(obj, mode, from, to){ if(animateTimeout) {clearTimeout(animateTimeout); } if(mode == "left") {if(from > to) {from = from - 50;obj.style.marginLeft = (from) + "px";setTimeout(function(){ animate(obj, mode, from, to);}, 30);} else { isWheelAnimating = false; }return; }if(from < to) {from = from + 50;obj.style.marginLeft = (from) + "px";setTimeout(function(){animate(obj, mode, from, to);}, 30); } else { isWheelAnimating = false;} } var mouseWheel = function(event) {if(isWheelAnimating) {return; } isWheelAnimating = true; var wheelUp = isWheelUp(event); var showPageUl = document.getElementById(wheelUl); var showPageUlWidth = parseInt(showPageUl.offsetWidth); var showPageLiList = showPageUl.getElementsByTagName(li); var showPageLiListLength = showPageLiList.length; var wheelWrapperLeft = parseInt(document.getElementById(wheelWrapper).offsetLeft); if(wheelUp && currentShowPageIndex 0) {changeBar(currentShowPageIndex, currentShowPageIndex - 1);currentShowPageIndex --;var from = -(currentShowPageIndex + 1) * 1000;var to = -(currentShowPageIndex) * 1000;animate(showPageUl, "right", from, to);return; }isWheelAnimating = false; }; if(document.addEventListener){ document.addEventListener(DOMMouseScroll,function(event) { mouseWheel(event); },false); } document.onmousewheel = function(event) { mouseWheel(event); } window.onload = function(){ var barUl = document.getElementById(arUl); var barLiList = barUl.getElementsByTagName(li); for(var i=0,length=barLiList.length; i<length; i++) {(function(index){barLiList[index].onclick = function(){ changePage(index);};})(i); } } body { background:#494949; margin:0; } ul { list-style:none; margin:0; padding:0; } li { float:left;} #wheelWrapper { width:1000px; height:550px; margin:0 auto;position:fixed; left:50%; margin-left:-505px; bottom:50px; overflow:hidden; } #wheelUl { width:5050px; height:500px; } #barUl { clear:both; margin:0 auto; width:550px; margin-top:20px; line-height:25px; } #barUl>li { width:100px; background:orange; height:25px; margin-right:10px; border-radius:5px; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; } #barUl>li:hover { background:#C36C12; } #barUl>li[class=active] { background:#C36C12; } #wheelUl>li { width:1000px; } .wheel { width:994px; height:500px; background:#FAAA3C; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; margin:0 auto; line-height:300px; font-size:100px; text-align:center; } .radius { border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } h1 { text-align:center; color:#fff; }

ie8+,chrome,ff提供支持

1_page1

2_page2

3_page3

4_page4

5_page5

12345

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》