【杂记】（数字滚动增加动画特效、js消息新闻向左滚动、js原生tab条切换、左右点击选择框移动内容、右键菜单效果、中国省市三级联动插件，右侧滑动导航随滚动条移动）

1. 数字滚动增加动画特效

.counter-value{ font-size: 50px; font-weight: 700; color: rgba(0,0,0,0.7); text-align:center; } <div class="demo"> <span class="counter-value">80913804384023</span> </div> $(document).ready(function(){ $('.counter-value').each(function(){ $(this).prop('Counter',0).animate({ Counter: $(this).text() },{ duration: 1000, easing: 'swing', step: function (now){ $(this).text(Math.ceil(now)); } }); }); });

2. js消息新闻向左滚动

.winBox { width: 300px; height: 40px; overflow: hidden; position: relative; background: #eee; } .scroll { width: 1500px; position: absolute; left: 0px; top: 0px; } .scroll li { width: 150px; float: left; line-height: 40px; text-align: center; } <div class="winBox"> <ul class="scroll"> <li>时尚休闲裤68元</li> <li>羊呢绒套衫</li> <li>新款雪地靴</li> <li>加厚法兰绒</li> <li>连裤袜</li> <!--给所要的内容复制一份--> <li>时尚休闲裤68元</li> <li>羊呢绒套衫</li> <li>新款雪地靴</li> <li>加厚法兰绒</li> <li>连裤袜</li> </ul> </div> $(function() { var num = 0; function goLeft() { //750是根据你给的尺寸，可变的 if (num == -750) { num = 0; } num -= 1; $(".scroll").css({ left: num }) } //设置滚动速度 var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止 $(".box").hover(function() { clearInterval(timer); }, function() { timer = setInterval(goLeft, 20); }) })

3. js原生tab条切换

.tabClick { background: #f3f3f3; overflow: hidden } .tabClick li { height: 40px; line-height: 40px; width: 25%; float: left; text-align: center } .tabClick li.active { color: #099; transition: 0.1s; } .tabCon { overflow: hidden } .tabBox { position: relative } .tabList { word-break: break-all; width: 100%; float: left; line-height: 100px; text-align: center; color: #D3D3D3; font-family: "Arial Black" } .lineBorder { height: 2px; overflow: hidden; border-bottom: 1px solid #099; background: #f3f3f3 } .lineDiv { background: #099; height: 2px; width: 25%; } <div class="wrap" id="wrap"> <ul class="tabClick"><li class="active">Tab1</li><li>Tab2</li><li>Tab3</li><li>Tab4</li></ul> <div class="lineBorder"> <div class="lineDiv"> <!--移动的div--> </div> </div> <div class="tabCon"> <div class="tabBox"> <div class="tabList">1</div> <div class="tabList">2</div> <div class="tabList">3</div> <div class="tabList">4</div> </div> </div> </div> window.onload = function() { var windowWidth = document.body.clientWidth; //window 宽度; var wrap = document.getElementById('wrap'); var tabClick = wrap.querySelectorAll('.tabClick')[0]; var tabLi = tabClick.getElementsByTagName('li'); var tabBox = wrap.querySelectorAll('.tabBox')[0]; var tabList = tabBox.querySelectorAll('.tabList'); var lineBorder = wrap.querySelectorAll('.lineBorder')[0]; var lineDiv = lineBorder.querySelectorAll('.lineDiv')[0]; var tar = 0; var endX = 0; var dist = 0; tabBox.style.overflow = 'hidden'; tabBox.style.position = 'relative'; tabBox.style.width = windowWidth * tabList.length + "px"; for (var i = 0; i < tabLi.length; i++) { tabList[i].style.width = windowWidth + "px"; tabList[i].style.float = 'left'; tabList[i].style.float = 'left'; tabList[i].style.padding = '0'; tabList[i].style.margin = '0'; tabList[i].style.verticalAlign = 'top'; tabList[i].style.display = 'table-cell'; } for (var i = 0; i < tabLi.length; i++) { tabLi[i].start = i; tabLi[i].onclick = function() { var star = this.start; for (var i = 0; i < tabLi.length; i++) { tabLi[i].className = ''; }; tabLi[star].className = 'active'; init.lineAnme(lineDiv, windowWidth / tabLi.length * star) init.translate(tabBox, windowWidth, star); endX = -star * windowWidth; } } function OnTab(star) { if (star < 0) { star = 0; } else if (star >= tabLi.length) { star = tabLi.length - 1 } for (var i = 0; i < tabLi.length; i++) { tabLi[i].className = ''; }; tabLi[star].className = 'active'; init.translate(tabBox, windowWidth, star); endX = -star * windowWidth; }; tabBox.addEventListener('touchstart', chstart, false); tabBox.addEventListener('touchmove', chmove, false); tabBox.addEventListener('touchend', chend, false); //按下 function chstart(ev) { ev.preventDefault; var touch = ev.touches[0]; tar = touch.pageX; tabBox.style.webkitTransition = 'all 0s ease-in-out'; tabBox.style.transition = 'all 0s ease-in-out'; }; //滑动 function chmove(ev) { var stars = wrap.querySelector('.active').start; ev.preventDefault; var touch = ev.touches[0]; var distance = touch.pageX - tar; dist = distance; init.touchs(tabBox, windowWidth, tar, distance, endX); init.lineAnme(lineDiv, -dist / tabLi.length - endX / 4); }; //离开 function chend(ev) { var str = tabBox.style.transform; var strs = JSON.stringify(str.split(",", 1)); endX = Number(strs.substr(14, strs.length - 18)); if (endX > 0) { init.back(tabBox, windowWidth, tar, 0, 0, 0.3); endX = 0 } else if (endX < -windowWidth * tabList.length + windowWidth) { endX = -windowWidth * tabList.length + windowWidth init.back(tabBox, windowWidth, tar, 0, endX, 0.3); } else if (dist < -windowWidth / 3) { OnTab(tabClick.querySelector('.active').start + 1); init.back(tabBox, windowWidth, tar, 0, endX, 0.3); } else if (dist > windowWidth / 3) { OnTab(tabClick.querySelector('.active').start - 1); } else { OnTab(tabClick.querySelector('.active').start); } var stars = wrap.querySelector('.active').start; init.lineAnme(lineDiv, stars * windowWidth / 4); }; }; var init = { translate: function(obj, windowWidth, star) { obj.style.webkitTransform = 'translate3d(' + -star * windowWidth + 'px,0,0)'; obj.style.transform = 'translate3d(' + -star * windowWidth + ',0,0)px'; obj.style.webkitTransition = 'all 0.3s ease-in-out'; obj.style.transition = 'all 0.3s ease-in-out'; }, touchs: function(obj, windowWidth, tar, distance, endX) { obj.style.webkitTransform = 'translate3d(' + (distance + endX) + 'px,0,0)'; obj.style.transform = 'translate3d(' + (distance + endX) + ',0,0)px'; }, lineAnme: function(obj, stance) { obj.style.webkitTransform = 'translate3d(' + stance + 'px,0,0)'; obj.style.transform = 'translate3d(' + stance + 'px,0,0)'; obj.style.webkitTransition = 'all 0.1s ease-in-out'; obj.style.transition = 'all 0.1s ease-in-out'; }, back: function(obj, windowWidth, tar, distance, endX, time) { obj.style.webkitTransform = 'translate3d(' + (distance + endX) + 'px,0,0)'; obj.style.transform = 'translate3d(' + (distance + endX) + ',0,0)px'; obj.style.webkitTransition = 'all ' + time + 's ease-in-out'; obj.style.transition = 'all ' + time + 's ease-in-out'; }, }

4. 左右点击选择框移动内容

.gray { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); top: 0px; left: 0px; display: none; } #selectCon { width: 600px; height: 500px; background: #fff; border: 1px solid #ddd; position: absolute; left: 450px; top: 100px; display: none; } #selectCon h3 { height: 30px; line-height: 30px; color: #fff; font-size: 14px; text-indent: 10px; background: #cccc33; font-weight: 100; } #selectCon h3 span.close { float: right; padding-right: 10px; cursor: pointer; } #sel_Con { width: 560px; height: 430px; margin: 20px auto 0px; } #sel_Con .sel_begin { width: 210px; height: 425px; float: left; } #sel_Con ul { width: 210px; height: 380px; border: 1px solid #ddd; background: #ebebeb; overflow-y: auto; } #sel_Con .sel_but { width: 110px; height: 425px; margin: 0px 10px 0px 15px; float: left; padding-top: 100px; } #sel_Con .sel_end { width: 210px; height: 380px; float: left; } #sel_Con p { line-height: 35px; color: #666; font-size: 14px; text-indent: 10px; } #sel_Con ul li { list-style-type: none; line-height: 30px; font-size: 14px; text-indent: 10px; } .sel_but span { border: 1px solid #ddd; background: #ebebeb; color: #666; text-align: center; line-height: 40px; display: block; border-radius: 2px; margin: 15px 0px; width: 100px; font-size: 14px; cursor: pointer; } .click_but { display: block; width: 100px; line-height: 40px; color: #fff; text-align: center; border-radius: 5px; background: #cc33cc; margin: 10px auto; cursor: pointer; } ul li.bg_gray { background: #616161; color: #fff; } ul li.bg_blue { background: #cccc00; color: #fff; } <span class="click_but">点击弹窗</span> <div class="gray"></div> <div id="selectCon"> <h3>选择群 <span class="close">X</span></h3> <div id="sel_Con"> <!--左选择框开始--> <div class="sel_begin"> <p>请分配管理权限</p> <ul class="sel_beg"> <li>超级管理员</li> <li>普通管理员</li> <li>信息发布员</li> <li>财务管理员</li> <li>产品管理员</li> <li>资源管理员</li> </ul> </div> <!--左选择框结束--> <!--中间按扭开始--> <div class="sel_but"> <span class="add">添加</span> <span class="add_all">全部添加</span> <span class="remove">移除</span> <span class="remove_all">全部移除</span> </div> <!--中间按扭结束--> <!--右选择框开始--> <div class="sel_end"> <p>已分配的管理权限</p> <ul class="selul_end"></ul> </div> <!--右选择框结束--> </div> </div> var _index = 0; var _shiftIndex = -1; //点击弹窗按扭 $("span.click_but").click(function() { $(".gray").show(); $("#selectCon").show(); }); //点击关闭按扭 $("span.close").click(function() { $(".gray").hide(); $("#selectCon").hide(); }); //鼠标滑动到 li上时 $("ul.sel_beg li").hover(function() { $(this).addClass("bg_gray"); }, function() { $(this).removeClass("bg_gray"); }); //鼠标点击li时 $("ul.sel_beg li").click(function() { $(this).toggleClass("bg_blue"); //当他有 class="bg_blue"时，点击删除，当没有时，点击就加上 //向下全选时 if ($(this).index() > _shiftIndex && _shiftIndex > -1) { for (var i = _shiftIndex; i < $(this).index(); i++) { $("ul.sel_beg li").eq(i).addClass("bg_blue"); } } //向上全选时 if ($(this).index() < _shiftIndex && _shiftIndex > -1) { for (var j = $(this).index(); j < _shiftIndex; j++) { $("ul.sel_beg li").eq(j).addClass("bg_blue"); } } if ($(this).hasClass("bg_blue")) { _index = $(this).index(); } }); //点击添中按扭 $("span.add").click(function() { if ($("ul.sel_beg li.bg_blue").length == 0) { alert("请选择所需要的项目！！"); } else { $(".selul_end").append($("ul.sel_beg li.bg_blue").removeClass("bg_blue").hide().fadeIn(500)); } }); //全部添加 $("span.add_all").click(function() { $(".selul_end").append($("ul.sel_beg li").removeClass("bg_blue").hide().fadeIn(500)); }); //点击移除按扭 $("span.remove").click(function() { if ($("ul.selul_end li.bg_blue").length == 0) { alert("请选择所需要的项目！！"); } else { $(".sel_beg").append($("ul.selul_end li.bg_blue").removeClass("bg_blue").hide().fadeIn(500)); } }); //全部移除 $("span.remove_all").click(function() { $(".sel_beg").append($("ul.selul_end li").removeClass("bg_blue").hide().fadeIn(500)); }); //接下来我要按shift键 $(document).keydown(function(e) { if (e.shiftKey) { _shiftIndex = _index; } }); //当键盘松开时 $(document).keyup(function() { _shiftIndex = -1; });

5. 右键菜单效果

.Menu { width: 200px; height: 252px; background: #fff; position: absolute; left: 500px; top: 100px; z-index: 33; display: none; } .Menu ul li { list-style-type: none; height: 35px; font-size: 14px; color: #000; line-height: 35px; text-indent: 25px; font-family: "微软雅黑"; border-bottom: 1px solid #ddd; } .Menu ul li.hover { background: #009999; color: #fff; } <div class="Menu"> <ul> <li>新建文件夹</li> <li class="hover">添加便签</li> <li>清除便签</li> </ul> </div> // 1、禁止浏览器窗口，自带的右键功能 document.oncontextmenu = function() { return false; } // 2、当按下鼠标右键时，把菜单显示出来 $(document).mousedown(function(e) { var key = e.which; //当 1 左键，2 中间滚轮 3 右键 var x = e.clientX; //鼠标按下去，与浏览器窗口左边距离 var y = e.clientY; //鼠标按下去，与浏览器窗口上边距离 if (key == 3) { $(".Menu").css({ left: x, top: y }).show(); } });

6. 中国省市三级联动插件

._citys { width: 450px; display: inline-block; border: 2px solid #eee; padding: 5px; position: relative; } ._citys span { color: #56b4f8; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #56b4f8; cursor: pointer; } ._citys0 { width: 100%; height: 34px; display: inline-block; border-bottom: 2px solid #56b4f8; padding: 0; margin: 0; } ._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; } .citySel { background-color: #56b4f8; color: #fff !important; } ._citys1 { width: 100%; display: inline-block; padding: 10px 0; } ._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 13px; overflow: hidden; } ._citys1 a:hover { color: #fff; background-color: #56b4f8; } .AreaS { background-color: #56b4f8 !important; color: #fff !important; } <div style="width:420px;margin:40px auto;"> <input type="text" id="city" /> </div> $(function() { $("#city").click(function(e) { SelCity(this, e); }); })

相关js文件下载：相关js文件下载 提取码：kejo

7. 右侧滑动导航随滚动条移动

.w960 { width: 920px; height: 500px; margin: 0 auto; background: #e3e3e3; font-size: 25px; padding: 20px; } .float-right { width: 100px; height: 300px; background: #EE4646; position: absolute; left: 50%; top: 220px; margin-left: 500px; z-index: 800; overflow: hidden; } .float-right p { width: 96%; margin: 0 2%; height: 24px; line-height: 24px; text-align: center; display: block; border-bottom: 1px solid #F59D9D; font-size: 12px; color: #fff; text-decoration: none; } .float-right a:hover { background: #be3737; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -mos-transition: all 0.3s linear; -o-transition: all 0.3s linear; } <div class="w960">这<br />里<br />是<br />站<br />位<br />空<br />间，<br />对<br />代<br />码<br />不<br />起<br /> 任<br />何<br />作<br />用这<br />里<br />是<br />站<br />位<br /></div> <div class="float-right"> <p>首页</p><p>菜单导航</p><p>时间日期</p><p>焦点图</p><p>tab标签</p> </div> var defaultTop = (window.screen.height - $('.float-right').height()) / 2 - 100; /*默认顶部保持上下居中，再往上去100像素*/ $(window).scroll(function() { var offsetTop = defaultTop + $(window).scrollTop() + 'px'; $('.float-right').animate({ top: offsetTop }, { duration: 600, //滑动速度 queue: false //此动画将不进入动画队列 }); });