小编Chi*_*ing的帖子

我在使用时遇到问题 transform: scale();

基本上，我在具有 overflow:hidden

检查这个小提琴的实时动作：https : //jsfiddle.net/ns3vm3x6/

HTML

<div id="container1">
  <img src="http://lorempixel.com/400/200">
</div>
<p> i want this image to scale just like #example no. 2. how to achive this one? </p>
<br><br>
<div id="container2">
  <img src="http://lorempixel.com/400/200">
</div>

CSS

#container1 {width:100%; height:200px; border:2px solid red;
 overflow-x:scroll; overflow-y:hidden; white-space:no-wrap; }

#container2 {width:100%; height:200px; border:2px solid red; white- space:no-wrap;  }
img {width:200px; height:200px; transition:transform 1s linear; }
img:hover {transform:scale(2); }

缩放图像时如何防止溢出？

我的代码有什么问题？

提前致谢...

那里!我有一个让#drag元素顺利移动的问题.

我看这篇文章:http://www.html5rocks.com/en/tutorials/speed/animations/#debouncing-mouse-events

它说:" mousemove移动元素时事件的问题是mousemove事件被炒得太多了

所以,我尝试使用他们的方法:使用requestAnimationFrame+ boolean checking.

看看这个实际行动的小提琴:https://jsfiddle.net/5f181w9t/

HTML:

<div id="drag">this is draggable</div>

CSS:

#drag {width:100px; height:50px; background-color:red; transform:translate3d(0, 0, 0); }

JS:

var el               = document.getElementById("drag"),
    startPosition    = 0, // start position mousedown event
    currentPosition  = 0, // count current translateX value
    distancePosition = 0, // count distance between "down" & "move" event
    isMouseDown      = false; // check if mouse is down or not 

function mouseDown(e) …

我喜欢尝试新的东西。所以，我决定在不使用 jquery 的情况下制作自己的函数。我正在尝试构建 find()

所以，这是我的代码：

function $(el) {
  var firstChar = el.charAt(0),
      id = document.getElementById(el.slice(1));

  switch (firstChar) {
    case "#":
      return id;
      break;
  }
}

function find(el, loop) {
  return getElementsByTagName(el)[loop];
}

$("#test").find("h1", 0).innerHTML = "some text";

<div id="test">
  <h1>test one</h1>
  <h2>test two</h2>
</div>

它不起作用，在我的 Dreamweaver 错误日志中，它说getElementsByTagName未定义。

我的代码有什么问题？

嗨我想在页面加载后立即关注div.它在Firefox上运行得很完美,但在Chrome上却没有,它不起作用.这是我的代码:

https://jsfiddle.net/9yb2boxn/

document.getElementById("focusme").focus();

#focusme {width:400px; height:100px; overflow-y:scroll; }

<div id="focusme">
  focus me focus me focus me focus me  focus me focus me focus me focus me  focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me
</div>

在Firefox中,当我运行此代码并按下键盘上的向下箭头时,div向下滚动.但不是铬.为什么会出现这个问题？

我已经试过了

setTimeout(function() {

   document.getElementById("focusme").focus(); …

我使用的时候有一个问题window.requestAnimationFrame上scroll的事件.

我想继续DIV使用CSS transform:translate3D

document.getElementById("content").addEventListener("scroll", function(){

var getScroll = this.scrollTop * 1.2;

function repeatOften() {

    document.getElementById("moveable").style.transform = 
        "translate3D(0," + getScroll + "px, 0)";
    requestAnimationFrame(repeatOften);

}

requestAnimationFrame(repeatOften); 

});

检查这个小提琴:https://jsfiddle.net/tcayv8dp/

为什么这个动画不能顺利运行？

我的代码出了什么问题？

谢谢..... ..

我在使用javascript提交表单时遇到问题 submit()

现场行动:https://jsfiddle.net/98sm3f3t/

HTML:

<form id="myForm" action="">
    First name: <input type="text" name="fname"><br>
    <button id="myButton" type="button">Submit form</button>
</form>

JS :

document.getElementById("myButton").addEventListener("click", function() {

    document.getElementById("myForm").submit();

});

document.getElementById("myForm").addEventListener("submit", function(e) {

    e.preventDefault();

    alert("cancel submitting");

});

它倾向于显示alert()和取消提交.

我的代码出了什么问题？

提前致谢...

我正在尝试使用OOP文字方式构建幻灯片功能.

所以,这是我的代码:

"use strict";

var slideshow = {

    elSet   : $(".slideshow"),
    elCount : indexCount(".dealList"),
    elWidth : width(".dealList"),
    elNo    : 1,
    next    : function() {

                if (this.elNo < this.elCount) {
                    console.log(this.elSet);
                    this.elNo += 1;
                    this.elSet.style.transform = "translateX(-" + this.elWidth * this.elNo + "px)";
                }
                else {
                    console.log(this.elSet);
                    this.elNo = 1;
                    this.elSet.style.transform = "translateX(-" + this.elWidth * this.elNo + "px)";
                }
    },
    initial : function() {

                var loop = setInterval(this.next, 5000);
    }

}

slideshow.initial();

浏览器控制台中出现问题:

1. 内存不足
2. console.log返回undefined

由于这个关键字,可能会出现问题？

我的代码出了什么问题？

那里!我在创建one函数时遇到问题JQUERY.

这是行动:https://jsfiddle.net/77yzLt6v/

一次执行事件

HTML:

<div id="justOnce">click me!</div>

function one(dom, event, callback) {
    dom.addEventListener(event, function(e) { // add event
        this.removeEventListener(event, callback); // remove it
    }); 

}    
one(document.getElementById("justOnce"), "click", function() {

    alert("this alert only show once time");

});

我的代码出了什么问题？

提前致谢...