- 请问为什么js滚动滚动条到顶部之后就不能动了？
-
第二次发生过这种情况，js或者jquery使用animate滚动滚动条到顶部或者任意一个
位置，滚动条就好像被锁定一样，动也动不了，用过stop()，没有效果，求解，下面是代码！<html> <head> <meta charset="utf-8"> <script src="j.js"></script> <style> * { padding:0; margin:0; border:0; } .one,.two,.three { display:block; } .one { width:1px; height:1px; background-color:#f00; } .tow { background-color:#00f; } .three { background-color:#cecece; } </style> </head> <body> <!-- jquery自写滚动屏幕 --> <div class="one">one</div> <div class="two">two</div> <div class="three"></div> <script> $(document).ready(function(){ //获取当前文档的宽 高 nowWidth = $(window).width(); nowHeight = $(window).height(); //获取大的背景div one = $(".one"); two = $(".two"); three = $(".three"); <!-- alert(typeof(nowHeight)); --> //开始设置宽度高度为当前屏幕高度 one.css({"height":nowHeight,"width":nowWidth}); two.css({"height":nowHeight,"width":nowWidth}); three.css({"height":nowHeight,"width":nowWidth}); //开始监听滚动栏 //准备获取文档 var ht = $("document,html,body"); $(document).scroll(function(){ //获取当前滚动条距离文档高度 var top = $(document).scrollTop(); //如果高度 > 1 移动到第二屏 针对第一屏 if(top > 2 && top < nowHeight){ //设置滚动条高度为第一屏高度 ht.animate({"scrollTop":nowHeight},1000,function(){ stop(true,true); }); } if(top > nowHeight + 2 && top < (nowHeight * 2)){ ht.animate({"scrollTop":nowHeight *2},1000); } }) }) </script> </body> </html>
- ht.animate({"scrollTop":nowHeight},1000) 这里的scrollTop 会再次调用scroll 滚动事件 2.逻辑不对 if 判断这里逻辑不对
建议：声明变量时，最好加上var
- 其他相关推荐
- jquery lazyload.js插件调用会使滚动条回到顶部的问题
- 我有一个需求是需要将页面滑到底部的时候会用ajax去服务端请求数据然后动态的加载到页面上，这时候我会去加载一次jquery lazyload.js的lazyload方法，使我动态加载的内容的图片也异步加载进来，图片效果是出来了，但是引发出了一个新的问题，每次动态加载数据后我的页面滚动条又回到了页面的顶端，就好像页面刷新了一样，问题定位下来就是由于加了lazyload方法后就出现的。有没有大神可以帮忙解决这个问题，最终效果是需要有图片异步加载的效果并且页面不会回到顶部会停留再动态加载的数据那。小弟感激不尽，求帮忙啊！！！！！ 急！！！！
- 用js写的固定定位的div，滚动滚动条的时候总是一闪一闪的？
- 问题就是 我写的一个div层固定到浏览器顶部，然后滚动滚动条的时候，这个div总是突然距离浏览器顶部一小距离，然后就又回去了。 div在滚动条上下滚动的时候总是上下偏移一下，在火狐下就没事，在其他浏览器下就有这样的问题。我是用绝对定位position:absolute;直接定位在body下的，滚动条滚动的时候去的是$(window).scrollTop的值，然后在赋给这个div的top的
- vue div滚动条位置设置失败 ， 这个滚动条每次都是上次的位置，我想每次都到最顶部
- 这个滚动条每次都是上次的位置，我想每次都到最顶部  
- 求一段js返回顶部的代码
- 当页面有滚动条并且滚动条不位于顶部时，出现返回顶部的图片或者按钮，返回顶部后自动消失，求大神指点
- 如何让滚动条滚动到距离顶部44px位置？
- 不能盖住头部 ``` <!-- 头部样式 --> <div class="Top"> <a href="wxPictureCutpicAdd.html" class="BtnCancel">取消</a> <a href="javascript:void(0)" class="BtnInsert" ><div class="EditOrd">插入</div></a> <h1>板式模块</h1> </div> ```
- 手机端上用js 实现滚动条滚动到某div时，该div固定的问题
- 各位大侠，小弟遇到一个关于js的问题，不知道哪位大侠有没有遇到过，求助求助? 需求：当滚动值大于等于某个层跟顶部的偏移值时，这个层就固定在页面上（position:fixed）; 小于则恢复原样； 我这代码在pc端向上滚动 取消固定的过程没什么问题，但是到手机上向上滚动取消固定就会有延迟，如下图  要等要完全滚动关闭后，恢复成下图这样： 
- 同一个div的滚动条怎么每次出现的时候都是默认在顶部？
- 同一个div的滚动条怎么每次出现的时候都是默认在顶部？ 用jQuery要怎么写 望大神赐教
- 数据刷新时，滚动条的问题
- 现在有一个每5秒刷新一次的store，但是没刷新一次，相应的panel里的滚动条就会复位到顶部，查看数据很不方便，该怎么办？
- 每次点击回到顶部按钮时,页面会闪一下,看着就是顶部,然后才会慢慢往上滑动,怎样解决闪一下的问题?麻烦看下js有问题吗?
- var backButton=$('.back_to_top'); $(document).ready(function () { function backToTop() { $('html,body').animate({ scrollTop: 0 }, 800); } backButton.on('click', backToTop); $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时，回到顶部按钮就显示 */ if ($(window).scrollTop() > $(window).height()) backButton.fadeIn(); else backButton.fadeOut(); }); $(window).trigger('scroll');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/ })
- 导航条随网页下拉背景逐渐透明并固定在顶部？？？
- js或者jquery 怎么实现h5 网站页面的上面的导航条随着滚动页面 背景色逐渐透明 并且 导航条固定到顶部？？？希望大神们给个答案 谢谢啦！！！
- js内父级函数调用子函数出现函数未定义问题
- 首先定义了一个全局函数Locating，又在Locating内定义了一个局部函数pageScroll，然后我全局函数调用pageScroll时，报错Uncaught ReferenceError: pageScroll is not defined。 ``` function Locating(locate,time){ console.log(locate+' -- '+time); var div_locate=document.getElementById(locate); var window_top_y = document.body.scrollTop;//获取滚动条顶部距离页面顶部的距离 var element_top_y = div_locate.offsetTop;//获取某元素顶部距离页面顶部的距离 var distance = window_top_y-element_top_y;//当前窗口与顶部的距离 var time = time; var move_distance = time>50?Math.ceil((distance/Math.ceil(time/50))):distance;//每次移动的距离 //每次移动的位移应为distance/duration，要移动的位置为element_top_y， function pageScroll() { var top = document.body.scrollTop;//获取滚动条顶部距离页面顶部的距离 var dis_top = top - element_top_y; window.scrollBy(0,-move_distance); scrolldelay=setTimeout('pageScroll()',50); if(dis_top<=0){ clearTimeout(scrolldelay); } // console.log(dis_top); } pageScroll(); } ``` 请问除了将pageScroll定义为全局的函数，各位前辈还有哪些其他解决方法可以借鉴学习一下的
- Vue： 左侧固定，右侧 overflow:auto 的页面，怎么在路由跳转时右侧回到它的顶部？
- Vue 项目，页面采用左右布局，左侧导航栏固定于页面，右侧内容区 overflow:auto 根据被撑开的高度决定是否显示滚动条。 因此造成一个问题，浏览器页面不存在滚动条，滚动条仅存在于右侧，这种情况下，怎么使每次路由跳转时，右侧内容区始终回到其最上方？
- 如何解决页面两个js冲突问题
- 我写了两段js，单独使用能正常显示，到一个页面后有一个就没效果了，希望各位大神可以帮忙解答。。。 这是第一段 <script type="text/javascript"> $(function(){ $('#banner').cycle({ fx:'scrollLeft', pager:'#btn' }); $('#marquee').marquee({ direction: 'left', scrollDelay:20 }); }) $(function(){ //防止跟已有js变量命名冲突 var jsBottom={}; jsBottom.oSlide=$("#slide"); jsBottom.oTop=jsBottom.oSlide.find("#totop"); jsBottom.ieTop=0; jsBottom.toTopTime=300;//回到顶部所用时间默认为0.3s /* @param--jsBottom.setTop为回到顶部主函数 @param--showHeight滚动条滚动多少距离,显示回到顶部按钮默认为500px */ jsBottom.setTop=function(showHeight){ // 解决fixed属性在ie6下不生效 if($.browser.msie&&$.browser.version=="6.0"){ jsBottom.ieTop=document.documentElement.scrollTop+document.documentElement.clientHeight-parseInt(jsBottom.oSlide.css('height'))-10; jsBottom.oSlide.css("top",jsBottom.ieTop); } //IE浏览器下document.body.scrollTop始终为零，由此判断浏览器 if(document.body.scrollTop==0){ if(document.documentElement.scrollTop<=showHeight){ jsBottom.oTop.css('display','none'); }else{ jsBottom.oTop.css('display','block'); } }else{ //谷歌、火狐浏览器 if(document.body.scrollTop<=showHeight){ jsBottom.oTop.css('display','none'); }else{ jsBottom.oTop.css('display','block'); } } } // 鼠标hover事件切换回到顶部按钮背景,不需要可直接删掉代码 jsBottom.oTop.hover(function(){ $(this).attr('class','totop_a'); },function(){ $(this).attr('class','totop_u'); }); //window滚动事件 $(window).scroll(function(){ //此处设置滚动距离出现回到顶部按钮 jsBottom.setTop(500); }); //回到顶部点击事件 jsBottom.oTop.click(function(){ //谷歌、火狐浏览器 $(document.body).animate({ scrollTop:0 },jsBottom.toTopTime); //ie浏览器 $(document.documentElement).animate({ scrollTop:0 },jsBottom.toTopTime); }); }) </script> 第二段 <script language="javascript" type="text/javascript"> $(function() { $("#scroller_roll1").scroller_roll({ title_show: 'enable',//enable disable time_interval: '15', window_background_color: "none", images_width: '158', images_height: '309', show_count: '4', window_padding: '0', border_size: '1', border_color: '#f3f3f3', }); }); </script>
- JS,jQuery代码 封装到一个JS文件的问题
- $(document).ready(function(){ $(".liren_content:odd").css("float",'right'); $('.mall_list').find('ul li:nth-child(3)').css('border','0'); var count=0; $(".jiaru").click(function () { // alert(111) count=parseInt($(".ico_img b").html()); var id = $(this).next().html(); //count++; $.ajax({ url:"__MODULE__/Qiangbao/check", type:"POST", data:"id="+id, dataType:"text", async:true, success:function(res){ //alert(count); if(res=="M"){ //alert(count); var a = count +1; parseInt($(".ico_img b").html(a)); } } }); $(".ico_img b").html(count); var flyElm = $(this).parents(".liren_content").clone(); flyElm.css({ 'opacity':'0.7', 'z-index': 9000, 'display': 'block', 'position': 'absolute', 'top': $(this).parents(".liren_content").offset().top +'px', 'left': $(this).parents(".liren_content").offset().left +'px', 'width': $(this).parents(".liren_content").width() +'px', 'height': $(this).parents(".liren_content").height() +'px' }).addClass("remove"); $('body').append(flyElm); flyElm.animate({ top:$('#cart img').offset().top, left:$('#cart img').offset().left, width:20, height:20, opacity:0 },'slow'); setTimeout(function(){ flyElm.remove(); },1000) // var id = $(this).next().html(); // var aaa = '<{session.shops.id}>'; // if(in(id,aaa)){ // alert(id); // } //alert(id); //加入购物车操作 $.ajax({ url:"__MODULE__/Qiangbao/addlist", type:"POST", data:"id="+id, dataType:"text", async:true, success:function(res){ //alert(res); if(res=="Y"){ } if(res=="N"){ alert('请再点击一次!'); } } }); }) $('.mall_title').click(function(){ window.location.href="__MODULE__/Qiangbao/Index"; }) $('.liren_title').click(function(){ window.location.href="__MODULE__/Liren/Index"; }) //返回顶部 $('.backtop').click(function (e) { $(".gotop").css({"background-image":"url(__PUBLIC__/images/images/iconfont-fanhuidingbu_up.png)"}); e.preventDefault(); $('html,body').animate({ scrollTop:0}); }); }); var page = 2; var num = 6; $(window).scroll(function () { var scrollHeight = $(document).height();// 获取页面的文档高度 var scrollTop = $(window).scrollTop();// 获取滚动条到顶部的垂直高度 var height = scrollHeight/2; scrollTop > 375 ? $(".gotop").fadeIn(200).show() : $(".gotop").fadeOut(200).css({"background-image":"url(__PUBLIC__/images/images/iconfont-fanhuidingbu.png)"}); // $("#lb").text($(window).scrollTop()+' 滚动条的到顶部的距离'); // $("#2b").text($(window).height()+' 文档的高度'); // $("#3b").text($(document).height()+' 整个页面的高度'); if(scrollTop >= height){ chaliren(); page++; } }); function chaliren(){ $.post("__URL__/chaliren",{'page':page,'num':num},function(data){ var list = eval("("+data+")") if(list.length==0){ page = 1; }else{ str = ''; for (var i = 0; i < list.length; i++) { str += '<div class="liren_list"><a href="__MODULE__/Qiangbao/rewarddetail/id/'+list[i].id+'"><div class="liren_content"><img src="'+list[i].zhongpic+'">'; if(list[i].zeroqiang > 0){str +='<img src="__PUBLIC__/images/images/Groupc 2@2x.png" class="lingyuanchou">';}else if(list[i].sala >0){str +='<img src="__PUBLIC__/images/images/Group@2x.png" class="jinritejia">';} str +='<nobr><h2>'+list[i].name+'</h2></nobr><div class="jindu">'; if(list[i].zeroqiang >0){str +='<p style="margin-top:6px;">已参与 <b>'+list[i].click+'</b></p><button class="button">立即参与</button><span style="display:none;">'+list[i].id+'</span>';}else{str +='<p>开奖进度<b>'+list[i].jindu+'%</b></p><a href="javascript:;" class="button jiaru">加入清单</a><span style="display:none;">'+list[i].id+'</span><span><i style="width:'+list[i].jindu+'%"></i></span>';} str += '</div></div> </a></div>'; }; var div = $('.liren'); div.append(str) $(".liren_content:odd").css("float",'right'); } }) } 在H5页面的JS 怎么封装到另一个JS文件中呢
- 在返回有刷新的情况下，怎么实现定位到点击入口位置？例如：商城list效果
- 想问一下，手机wap端如果返回页面有刷新怎么存储数据呢？ps:进入列表页面后，先监听页面的scroll事件，将获取的scrollTop值存入localstroage中，点击进入详情页后返回页面自动刷新，从localstroage中取出之前存储的scrollTop值,用scrollTo到这个值的位置，我这样实现有弊端：1，用的mui框架监听过scroll，再次监听scroll出现2个滚动条，滑动过快返回顶部按钮抽风 2，兼容性问题 3，列表页是加载的，具体位置无法实现 请各位大神推荐下好的方法，或者插件，感谢！（如表达有误请理解 可联系QQ：481378090 希望能膜拜各位大神的d
- 在asp网站上添加了一个右侧悬浮客服代码，添加后网页上下段之间有个间隙，位置异常，请大家指点，谢谢！
-  我在我们网站上添加了悬浮于右侧中部的客服代码，网站是asp代码制作的，该客服代码是由3个文件组成，分别是（1）ggimages文件夹，主要放置客服广告的图片;（2）ggjs文件夹，主要放置js文件,内放置一个top.js文件;（3)网站根目录下放置一个gg.asp的文件，是客服代码的主程序。 存在问题：我在index主页底部引用gg.asp文件，代码如下：<div ><!--#include file="gg.asp"--> </div> 引用后，客服代码能够显示，但是在主页引用的部位出现一个巨大的间隙（客服代码的位置异常请看抓图），如果单独运行gg.asp，则正常显示，位置也在网站右侧中部，请大家帮忙指点一下是那个地方出了问题，谢谢！附代码： （一）主页index的头代码如下(因为页面会自动的编辑，所以在发帖的时候把代码的“<”去掉了，特别说明一下） head> meta http-equiv="Content-Type" content="text/html; charset=gb2312"> meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> link href="css/css.css" rel="stylesheet" type="text/css"> link href="css/css2.css rel="stylesheet" type="text/css"> !--#include file="conn.asp"--> /head> 页面底部引用gg.asp的代码如下：div ><!--#include file="gg.asp"--> </div> <!--#include file="end.asp" --> （二）右侧客服悬浮窗全部代码如下： title>右侧漂浮窗口</title> <!--右侧漂浮窗口头开始--> style type="text/css"> body{margin:0;height:1000px;} dl,dd,dt{margin:0;padding:0;} a{ text-decoration:none;} .floating-ck{position:fixed;right:10px;top:30%;} /相对位置/ .floating-ck dl dd{position:relative;width:130px;height:100px;text-align:center;background-repeat:no-repeat;background-position:center 20%;cursor:pointer;} .floating-ck dl dd:hover{background-color:#FF0000;border-bottom:solid 1px #FF0000;} .floating-ck dl dd:hover .floating-left{display: block;} .consult{background-image:url(ggimages/icon0701/zxicon.png);} .words{background-image:url(ggimages/icon0701/tp.png);} .quote{background-image:url(ggimages/icon0701/kficon.png);} .qrcord{background-image:url(ggimages/icon0701/wb.png);} .floating-ck dd span{color:#000000;display:block;padding-top:70px;} .floating-left{position:absolute;left:-160px;top:0px;width:160px;height:100px;background-color:#FF0000;border-bottom:solid 1px #FF0000;display:none;} .floating-left a{color:#000000;line-height:100px;} .floating-ewm{height:200px;top:-100px;}/调整左侧弹出窗口的高度/ .floating-ewm i{background-image:url(ggimages/wb.png);display:block;width:145px;height:145px;margin:0;margin-top:20px;} .floating-ewm p{color:#000000;margin-top:30px;}/字的移动高度/ .floating-ewm .qrcord-p01{font-size:18px;line-height:20px;} .floating-ewm .qrcord-p02{font-size:18px;} .STYLE1 {color: #000000} /style> script type="text/javascript" src="ggjs/top.js"></script> <!--右侧漂浮窗口头结束--> <body> <!--右侧漂浮窗口主体开始--> div class="floating_ck"> <dl> <dt></dt> dd class="consult"> span class="STYLE1"> <a href="a.asp " target="_blank">在线互动</a> /span> /dd> dd class="words"> span class="STYLE1"> <a href="toupiao.asp " target="_blank">在线投票</a> /span> dd class="quote"> span class="STYLE1"> <a href="tencent://message/?uin=10000&Site=msn&Menu=yes #">官方QQ</a> /span> /dd> dd class="qrcord"> span class="STYLE1">官方微博 /span> div class="floating_left floating_ewm"> /div> /dd> /dl> /div> /body> <!--右侧漂浮窗口主体结束--> （三）top.js全部代码如下： /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration 速度 * @param stime 时间间隔 (毫秒) **/ function gotoTop(acceleration,stime) { acceleration = acceleration || 0.1; stime = stime || 10; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; // 滚动条到页面顶部的水平距离 var x = Math.max(x1, Math.max(x2, x3)); // 滚动条到页面顶部的垂直距离 var y = Math.max(y1, Math.max(y2, y3)); // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 var speeding = 1 + acceleration; window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding)); // 如果距离不为零, 继续调用函数 if(x > 0 || y > 0) { var run = "gotoTop(" + acceleration + ", " + stime + ")"; window.setTimeout(run, stime); } }
- 有关JavaScript的插件的问题
- 对于JS的插件，在网上看过很多，还有jQuery的插件，但始终不太懂原理，希望有大神可以指教一下。 以下是我写的一个针对图片的有关放大，缩小，还原的一个功能，希望大神可以帮忙看看，然后将这个以JS面向对象的思想，改成插件的形式，万分感谢了，如果可能，希望可以加一波好友，我现在可以说是前端的小白一个，求哪位大神可以指点迷津。 ``` var rw = 0; var rh = 0; var proportions01 = 1; var proportions02 = 1; var rects; var ids; var conLeft = -1; var conTop = -1; //后期通过键值对的形式来实现一个页面多张图片的效果， //键：页面的ID 值：rect; //获取$ID function getIds(){ if(typeof ids != "undefined"){ return ids }else{ return $("#content"); } } //更改$ID function setIds(idsFromHttl){ if(typeof idsFromHttl != "undefined"){ ids = idsFromHttl; }else{ return; } } //从页面获取到的$ID function getIdsFromHttl(idsFromHttl){ setIds(idsFromHttl); } function drawPic(color,bigOrSmall,rect){ //bigOrSmall为一个索引值， // 如果为0，则放大，如果为1，则缩小, // 如果为2，则重置 getPicRect(); if(typeof rect == "undefined"){ rect = rects; }else{ rects = rect; } if(bigOrSmall === 0){ bigger(rect); }else if(bigOrSmall === 1){ smaller(rect); }else if(bigOrSmall === 2){ reset(); } //清除之前的样式，并在#content下追加一个span标签 getIds().children("span").remove(); getIds().append("<span></span>"); //滚动条定位到指定的位置 var content = getIds().parent(); if(conLeft == -1){ conLeft = parseInt(getIds().offset().left)-parseInt(content.offset().left); } if(conTop == -1){ conTop = parseInt(getIds().offset().top)-parseInt(content.offset().top); } proportions01 = parseFloat(getIds().children("img").width() /rw); proportions02 = parseFloat(getIds().children("img").height() / rh); //自动定位在所需的位置并给出一个半透明带颜色的框 //if(getIds().offset().left < content.offset().left && (getIds().offset().left + getIds().width()) < (content.offset().left + content.width())){ // conLeft=0; //} getIds().children("span").css({ "width": parseInt(rect.width)*proportions01 + "px", "height": parseInt(rect.height)*proportions02 + "px", "left":parseInt((parseInt(rect.left))*proportions01)+conLeft, "top":parseInt((parseInt(rect.top))*proportions02)+conTop, "background-color": color, "position":"absolute", "opacity":0.6 }); if((parseInt(getIds().children("img").offset().left) - parseInt(getIds().offset().left)) >= 3){ getIds().children("span").css({ "left":parseInt((parseInt(rect.left))*proportions01)+(parseInt(getIds().children("img").offset().left)-parseInt(getIds().offset().left)) }); } content.scrollTop(parseInt((parseInt(rect.top))*proportions02)+conTop-60); content.scrollLeft(parseInt((parseInt(rect.left))*proportions01)+conLeft); getIds().parent().parent().next().children(".mini-fit").scrollTop(0); getIds().parent().parent().next().children(".mini-fit").scrollLeft(0); //给顶部在按钮进行定位，并显示在最外层 $("#imgChange").css({ "position":"fixed", "z-index":10 }); } //获取图片的原始大小 function getPicRect(){ var content = getIds()[0]; var myimage = content.getElementsByTagName("img"); if (typeof myimage[0].naturalWidth == "undefined") { //IE 6/7/8 var i = new Image(); i.src = myimage[0].src; rw = i.width; rh = i.height; } else { // HTML5 browsers rw = myimage[0].naturalWidth; rh = myimage[0].naturalHeight; } } //放大的效果 function bigger(rect){ //需要获取图片原始大小 getPicRect(); var height = getIds().children("img").height(); var width = getIds().children("img").width(); //最大宽度为原始宽度的2.1倍，再点击则无效 if(width * 1.06 <= rw * 2.1){ //每次放大1.06倍(放大的值，后期也可以改，或者干脆带进一个参数也可以) getIds().children("img").height(height * 1.06 ); getIds().children("img").width(width *1.06); } } //缩小的效果 function smaller(rect){ //需要获取图片原始大小 getPicRect(); var height = getIds().children("img").height(); var width = getIds().children("img").width(); //最小只能缩小到原始宽度的0.36倍，再点击则无效 if(width * 0.94 >= rw * 0.36){ //每次缩小0.94倍(缩小的值，后期也可以改，或者干脆带进一个参数也可以) getIds().children("img").height(height * 0.94); getIds().children("img").width(width * 0.94); } } //按照图片的原始尺寸开始还原 function reset(){ getPicRect(); getIds().children("span").removeClass(); getIds().children("img").height(rh); getIds().children("img").width(rw); proportions01 = 1; proportions02 = 1; } ```
- 两个js代码放在一个页面中冲突
- ``` <script> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; //绑定 $("#float").smartFloat(); <%if ShowRs("Item8")=2 then%> $.fn.smartFloat1 = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if ((scrolls > top-50) && ((scrolls < $('#tourtabcont4').offset().top-100))) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 50 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; //绑定 $("#float1").smartFloat1(); <%end if%> $(document).ready(function () { $(window).scroll(function () { var items = $(".tourcontent_20"); var menu = $(".tourcontent_17"); var top = $(document).scrollTop(); var currentId = ""; //滚动条现在所在位置的item id items.each(function () { var m = $(this); //注意：m.offset().top代表每一个item的顶部位置 if (top > m.offset().top - 100) { currentId = "#" + m.attr("id"); } else { return false; } }); var currentLink = menu.find(".tourcontent_18"); if (currentId && currentLink.find("a").attr("href") != currentId) { currentLink.removeClass("tourcontent_18"); menu.find("[href=" + currentId + "]").parent().addClass("tourcontent_18"); } <%if ShowRs("Item8")=2 then%> var itemss = $(".tourcontent_27"); var menus = $(".tourcontent_24"); var tops = $(document).scrollTop(); var currentIds = ""; //滚动条现在所在位置的item id itemss.each(function () { var ms = $(this); //注意：m.offset().top代表每一个item的顶部位置 if (tops > ms.offset().top - 100) { currentIds = "#" + ms.attr("id"); $(".tourcontent_24") } else { return false; } }); var currentLinks = menus.find(".tourcontent_25"); if (currentIds && currentLinks.find("a").attr("href") != currentIds) { currentLinks.removeClass("tourcontent_25"); menus.find("[href=" + currentIds + "]").parent().addClass("tourcontent_25"); } <%end if%> }); }); </script> ``` ``` <script type="text/javascript"> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Calendar = Class.create(); Calendar.prototype = { initialize: function(container, options) { this.Container = $(container);//容器(table结构) this.Days = [];//日期对象列表 this.SetOptions(options); this.Year = this.options.Year || new Date().getFullYear(); this.Month = this.options.Month || new Date().getMonth() + 1; this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; this.onSelectDay = this.options.onSelectDay; this.onToday = this.options.onToday; this.onFinish = this.options.onFinish; this.Draw(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Year: 0,//显示年 Month: 0,//显示月 SelectDay: null,//选择日期 onSelectDay: function(){},//在选择日期触发 onToday: function(){},//在当天日期触发 onFinish: function(){}//日历画完后触发 }; Extend(this.options, options || {}); }, //当前月 NowMonth: function() { this.PreDraw(new Date()); }, //上一月 PreMonth: function() { this.PreDraw(new Date(this.Year, this.Month - 2, 1)); }, //下一月 NextMonth: function() { this.PreDraw(new Date(this.Year, this.Month, 1)); }, //上一年 PreYear: function() { this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1)); }, //下一年 NextYear: function() { this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1)); }, //根据日期画日历 PreDraw: function(date) { //再设置属性 this.Year = date.getFullYear(); this.Month = date.getMonth() + 1; //重新画日历 this.Draw(); }, //画日历 Draw: function() { //用来保存日期列表 var arr = []; //用当月第一天在一周中的日期值作为当月离第一天的天数 for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); } //用当月最后一天在一个月中的日期值作为当月的天数 for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } //清空原来的日期对象列表 this.Days = []; //插入日期 var frag = document.createDocumentFragment(); while(arr.length){ //每个星期插入一个tr var row = document.createElement("tr"); //每个星期有7天 for(var i = 1; i <= 7; i++){ var cell = document.createElement("td"); cell.innerHTML = " "; if(arr.length){ var d = arr.shift(); if(d){ cell.innerHTML = d; this.Days[d] = cell; var on = new Date(this.Year, this.Month - 1, d); //判断是否今日 this.IsSame(on, new Date()) && this.onToday(cell); //判断是否选择日期 this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell); } } row.appendChild(cell); } frag.appendChild(row); } //先清空内容再插入(ie的table不能用innerHTML) while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); } this.Container.appendChild(frag); //附加程序 this.onFinish(); }, //判断是否同一日 IsSame: function(d1, d2) { return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); } } </script> ``` 这两段js代码放在同一个页面中有冲突，我对js不是很熟，大家帮看看是哪里有冲突
- EXT布局问题
- 目前代码 Ext.onReady(function(){ new Ext.Viewport({ //实例化布局对象 layout:"border", //声明为border布局 items:[{ //布局项目 region:"north",//表示为north区域,顶部区 height:50, //区域高度 title:"顶部面板" //区域标题 },{ region:"center", //autoLoad:{url:"hello.jsp",scripts:true},//中间加载的网页,并允许支持JS脚本 //enableTabScroll : true, //titlebar: true, //autoScroll: true,//多出内容出现滚动条 title:"中央面板" },{ region:"west", width:150, collapsible : true,//是否可以收缩,默认不可以收缩，即不显示收缩箭头 split : true,//是否可以改变面板大小 html:"<a href='#'>选项1</a><br/><a href='#'>选项2</a><br/><a href='#'>选项3</a>", title:"左边面板" }] }); }); [img]http://kid12342002.iteye.com/upload/picture/pic/39020/120d9f69-147b-3773-85cc-72141f5e6117.jpg[/img] 我现在要把中央面板换成,Advanced Tabs的先项卡(也就是ext2.2API这种),
- 终于明白阿里百度这样的大公司，为什么面试经常拿ThreadLocal考验求职者了
- 点击上面↑「爱开发」关注我们每晚10点，捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类，各个线程都拥有一份线程私...
- Java学习的正确打开方式
- 在博主认为，对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结，前三者博主将淋漓尽致地挥毫于这篇博客文章中，至于总结在于个人，实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍，博客次之，这又是一个层次了，这里暂时不提后面再谈。博主将为各位入门java保驾护航，各位只管冲鸭！！！上天是公平的，只要不辜负时间，时间自然不会辜负你。 何谓学习？博主所理解的学习，它是一个过程，是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
- 程序员必须掌握的核心算法有哪些？
- 由于我之前一直强调数据结构以及算法学习的重要性，所以就有一些读者经常问我，数据结构与算法应该要学习到哪个程度呢？，说实话，这个问题我不知道要怎么回答你，主要取决于你想学习到哪些程度，不过针对这个问题，我稍微总结一下我学过的算法知识点，以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的，并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构，当然，我也会整理一些看过
- 大学四年自学走来，这些私藏的实用工具/学习网站我贡献出来了
- 大学四年，看课本是不可能一直看课本的了，对于学习，特别是自学，善于搜索网上的一些资源来辅助，还是非常有必要的，下面我就把这几年私藏的各种资源，网站贡献出来给你们。主要有：电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意：文中提到的所有资源，文末我都给你整理好了，你们只管拿去，如果觉得不错，转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
- 《奇巧淫技》系列-python！！每天早上八点自动发送天气预报邮件到QQ邮箱
- 将代码部署服务器，每日早上定时获取到天气数据，并发送到邮箱。 也可以说是一个小人工智障。 思路可以运用在不同地方，主要介绍的是思路。
- Python 植物大战僵尸代码实现(2):植物卡片选择和种植
- 这篇文章要介绍的是： - 上方植物卡片栏的实现。 - 点击植物卡片，鼠标切换为植物图片。 - 鼠标移动时，判断当前在哪个方格中，并显示半透明的植物作为提示。
- 死磕YOLO系列，YOLOv1 的大脑、躯干和手脚
- YOLO 是我非常喜欢的目标检测算法，堪称工业级的目标检测，能够达到实时的要求，它帮我解决了许多实际问题。 这就是 YOLO 的目标检测效果。它定位了图像中物体的位置，当然，也能预测物体的类别。 之前我有写博文介绍过它，但是每次重新读它的论文，我都有新的收获，为此我准备写一个系列的文章来详尽分析它。这是第一篇，从它的起始 YOLOv1 讲起。 YOLOv1 的论文地址：https://www.c
- 知乎高赞：中国有什么拿得出手的开源软件产品？(整理自本人原创回答)
- 知乎高赞：中国有什么拿得出手的开源软件产品？ 在知乎上，有个问题问“中国有什么拿得出手的开源软件产品（在 GitHub 等社区受欢迎度较好的）？” 事实上，还不少呢~ 本人于2019.7.6进行了较为全面的 回答 - Bravo Yeung，获得该问题下回答中得最高赞(236赞和1枚专业勋章)，对这些受欢迎的 Github 开源项目分类整理如下： 分布式计算、云平台相关工具类 1.SkyWalk
- 记一次腾讯面试：进程之间究竟有哪些通信方式？如何通信？ ---- 告别死记硬背
- 有一次面试的时候，被问到进程之间有哪些通信方式，不过由于之前没深入思考且整理过，说的并不好。想必大家也都知道进程有哪些通信方式，可是我猜很多人都是靠着”背“来记忆的，所以今天的这篇文章，讲给大家详细着讲解他们是如何通信的，让大家尽量能够理解他们之间的区别、优缺点等，这样的话，以后面试官让你举例子，你也能够顺手拈来。 1、管道 我们来看一条 Linux 的语句 netstat -tulnp | gr...
- 20行Python代码爬取王者荣耀全英雄皮肤
- 引言 王者荣耀大家都玩过吧，没玩过的也应该听说过，作为时下最火的手机MOBA游戏，咳咳，好像跑题了。我们今天的重点是爬取王者荣耀所有英雄的所有皮肤，而且仅仅使用20行Python代码即可完成。 准备工作 爬取皮肤本身并不难，难点在于分析，我们首先得得到皮肤图片的url地址，话不多说，我们马上来到王者荣耀的官网： 我们点击英雄资料，然后随意地选择一位英雄，接着F12打开调试台，找到英雄原皮肤的图片
- 网络（8）-HTTP、Socket、TCP、UDP的区别和联系
- TCP/IP协议是传输层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。 一、TCP与UDP的不同 1. 是否需要建立连接。 UDP在传送数据之前不需要先建立连接；TCP则提供面向连接的服务； 2. 是否需要给出确认 对方的传输层在收到UDP报文后，不需要给出任何确认，而 TCP需要给出确认报文，要提供可靠的、面向连接的传输服务。 3.虽然UDP不提供可靠交...
- 简明易理解的@SpringBootApplication注解源码解析（包含面试提问）
- 欢迎关注文章系列 ，关注我 《提升能力，涨薪可待》 《面试知识，工作可待》 《实战演练，拒绝996》 欢迎关注我博客，原创技术文章第一时间推出 也欢迎关注公 众 号【Ccww笔记】，同时推出 如果此文对你有帮助、喜欢的话，那就点个赞呗，点个关注呗！ 《提升能力，涨薪可待篇》- @SpringBootApplication注解源码解析 一、@SpringBootApplication 的作用是什
- 防劝退！数据结构和算法难理解？可视化动画带你轻松透彻理解！
- 大家好，我是 Rocky0429，一个连数据结构和算法都不会的蒟蒻… 学过数据结构和算法的都知道这玩意儿不好学，没学过的经常听到这样的说法还没学就觉得难，其实难吗？真难！ 难在哪呢？当年我还是个小蒟蒻，初学数据结构和算法的时候，在忍着枯燥看完定义原理，之后想实现的时候，觉得它们的过程真的是七拐八绕，及其难受。 在简单的链表、栈和队列这些我还能靠着在草稿上写写画画理解过程，但是到了数论、图...
- 西游记团队中如果需要裁掉一个人，会先裁掉谁？
- 2019年互联网寒冬，大批企业开始裁员，下图是网上流传的一张截图： 裁员不可避免，那如何才能做到不管大环境如何变化，自身不受影响呢？ 我们先来看一个有意思的故事，如果西游记取经团队需要裁员一名，会裁掉谁呢，为什么？ 西游记团队组成： 1.唐僧 作为团队teamleader，有很坚韧的品性和极高的原则性，不达目的不罢休，遇到任何问题，都没有退缩过，又很得上司支持和赏识(直接得到唐太宗的任命，既给
- 开挂的人生！那些当选院士，又是ACM/IEEE 双料Fellow的华人学者们
- 昨日，2019年两院院士正式官宣，一时间抢占了各大媒体头条。 朋友圈也是一片沸腾，奔走相告，赶脚比自己中了大奖还嗨皮！ 谁叫咱家导师就是这么厉害呢！！！ 而就在最近，新一年度的IEEE/ACM Fellow也将正式公布。 作为学术届的顶级荣誉，不自然地就会将院士与Fellow作比较，到底哪个含金量更高呢？ 学术君认为，同样是专业机构对学者的认可，考量标准不一，自然不能一概而论。 但...
- 聊聊C语言和指针的本质
- 坐着绿皮车上海到杭州，24块钱，很宽敞，在火车上非正式地聊几句。 很多编程语言都以 “没有指针” 作为自己的优势来宣传，然而，对于C语言，指针却是与生俱来的。 那么，什么是指针，为什么大家都想避开指针。 很简单， 指针就是地址，当一个地址作为一个变量存在时，它就被叫做指针，该变量的类型，自然就是指针类型。 指针的作用就是，给出一个指针，取出该指针指向地址处的值。为了理解本质，我们从计算机模型说起...
- Python语言高频重点汇总
- Python语言高频重点汇总 GitHub面试宝典仓库——点这里跳转 文章目录Python语言高频重点汇总**GitHub面试宝典仓库——点这里跳转**1. 函数-传参2. 元类3. @staticmethod和@classmethod两个装饰器4. 类属性和实例属性5. Python的自省6. 列表、集合、字典推导式7. Python中单下划线和双下划线8. 格式化字符串中的%和format9.
- 究竟你适不适合买Mac？
- 我清晰的记得，刚买的macbook pro回到家，开机后第一件事情，就是上了淘宝网，花了500元钱，找了一个上门维修电脑的师傅，上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷，只是想要个固态硬盘的笔记本，用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后，最终决定，还是买个好（xiong）看（da）的。 已经有好几个朋友问我mba怎么样了，所以今天尽量客观...
- 代码详解：如何用Python快速制作美观、炫酷且有深度的图表
- 全文共12231字，预计学习时长35分钟生活阶梯（幸福指数）与人均GDP（金钱）正相关的正则图本文将探讨三种用Python可视化数据的不同方法。以可视化《2019年世界幸福报告》的数据为例，本文用Gapminder和Wikipedia的信息丰富了《世界幸福报告》数据，以探索新的数据关系和可视化方法。《世界幸福报告》试图回答世界范围内影响幸福的因素。报告根据对“坎特里尔阶梯问题”的回答来确定幸...
- 程序员一般通过什么途径接私活？
- 二哥，你好，我想知道一般程序猿都如何接私活，我也想接，能告诉我一些方法吗？ 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”，还有很多读者问过我类似这样的问题。 我接的私活不算多，挣到的钱也没有多少，加起来不到 20W。说实话，这个数目说出来我是有点心虚的，毕竟太少了，大家轻喷。但我想，恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉，我也算是有经验的人了。 唾弃接私活、做外...
- （经验分享）作为一名普通本科计算机专业学生，我大学四年到底走了多少弯路
- 今年正式步入了大四，离毕业也只剩半年多的时间，回想一下大学四年，感觉自己走了不少弯路，今天就来分享一下自己大学的学习经历，也希望其他人能不要走我走错的路。 （一）初进校园 刚进入大学的时候自己完全就相信了高中老师的话：“进入大学你们就轻松了”。因此在大一的时候自己学习的激情早就被抛地一干二净，每天不是在寝室里玩游戏就是出门游玩，不过好在自己大学时买的第一台笔记本性能并不是很好，也没让我彻底沉...
- 如何写一篇技术博客，谈谈我的看法
- 前言 只有光头才能变强。 文本已收录至我的GitHub精选文章，欢迎Star：https://github.com/ZhongFuCheng3y/3y 我一直推崇学技术可以写技术博客去沉淀自己的知识，因为知识点实在是太多太多了，通过自己的博客可以帮助自己快速回顾自己学过的东西。 我最开始的时候也是只记笔记，认为自己能看得懂就好。但如果想验证自己是不是懂了，可以写成技术博客。在写技术博客的...
- 字节跳动面试官这样问消息队列：分布式事务、重复消费、顺序消费，我整理了一下
- 你知道的越多，你不知道的越多 点赞再看，养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群，欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
- 面试还搞不懂redis，快看看这40道面试题（含答案和思维导图）
- Redis 面试题 1、什么是 Redis?. 2、Redis 的数据类型？ 3、使用 Redis 有哪些好处？ 4、Redis 相比 Memcached 有哪些优势？ 5、Memcache 与 Redis 的区别都有哪些？ 6、Redis 是单进程单线程的？ 7、一个字符串类型的值能存储最大容量是多少？ 8、Redis 的持久化机制是什么？各自的优缺点？ 9、Redis 常见性...
- 大学四年自学走来，这些珍藏的「实用工具/学习网站」我全贡献出来了
- 知乎高赞：文中列举了互联网一线大厂程序员都在用的工具集合，涉及面非常广，小白和老手都可以进来看看，或许有新收获。
- 互联网公司的裁员，能玩出多少种花样？
- 裁员，也是一门学问，可谓博大精深！以下，是互联网公司的裁员的多种方法：-正文开始-135岁+不予续签的理由：千禧一代网感更强。95后不予通过试用期的理由：已婚已育员工更有责任心。2通知接下来要过苦日子，让一部分不肯同甘共苦的员工自己走人，以“兄弟”和“非兄弟”来区别员工。3强制996。员工如果平衡不了工作和家庭，可在离婚或离职里二选一。4不布置任何工作，但下班前必须提交千字工作日报。5不给活干+...
- 【设计模式】单例模式的八种写法分析
- 网上泛滥流传单例模式的写法种类，有说7种的，也有说6种的，当然也不排除说5种的，他们说的有错吗？其实没有对与错，刨根问底，写法终究是写法，其本质精髓大体一致！因此完全没必要去追究写法的多少，有这个时间还不如跟着宜春去网吧偷耳机、去田里抓青蛙得了，一天天的....
- 《面试宝典》：检验是否为合格的初中级程序员的面试知识点，你都知道了吗？查漏补缺
- 欢迎关注文章系列，一起学习 《提升能力，涨薪可待篇》 《面试知识，工作可待篇》 《实战演练，拒绝996篇》 也欢迎关注公 众 号【Ccww笔记】，原创技术文章第一时间推出 如果此文对你有帮助、喜欢的话，那就点个赞呗，点个关注呗！ 《面试知识，工作可待篇》-Java笔试面试基础知识大全 前言 是不是感觉找工作面试是那么难呢？ 在找工作面试应在学习的基础进行总结面试知识点，工作也指日可待，欢...
- 关于研发效能提升的思考
- 研发效能提升是最近比较热门的一个话题，本人根据这几年的工作心得，做了一些思考总结，由于个人深度有限，暂且抛转引入。 三要素 任何生产力的提升都离不开这三个因素：人、流程和工具，少了其中任何一个因素都无法实现。 人，即思想，也就是古人说的“道”，道不同不相为谋，是制高点，也是高层建筑的基石。 流程，即方法，也是古人说的“法”。研发效能的提升，也就是要提高投入产出比，既要增加产出，也要减...
- 微博推荐算法简述
- 在介绍微博推荐算法之前，我们先聊一聊推荐系统和推荐算法。有这样一些问题：推荐系统适用哪些场景？用来解决什么问题、具有怎样的价值？效果如何衡量？ 推荐系统诞生很早，但真正被大家所重视，缘起于以”facebook”为代表的社会化网络的兴起和以“淘宝“为代表的电商的繁荣，”选择“的时代已经来临，信息和物品的极大丰富，让用户如浩瀚宇宙中的小点，无所适从。推荐系统迎来爆发的机会，变得离用户更近： 快...
