[英]How to implement fade-in-out animation on java-script like ease-in-out on css?
I have a java script that i use on my website to show a preview of an image when hovering over a thumbnail. 我在网站上使用Java脚本,将鼠标悬停在缩略图上时可显示图像预览。 The script works great, but i's like to add a function like ease-in-out in css. 该脚本效果很好,但我想在CSS中添加一个功能,如easy-in-out。 I don't know much about java, but i tried a couple of different things with no luck. 我对Java不太了解,但是我尝试了几次不同的尝试,但是没有运气。 I found some nice tutorials, such as http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation , http://www.scriptiny.com/2011/01/javascript-fade-in-out/ , but with no programming knowledge in java, i don't know how to implement those into this script. 我发现了一些不错的教程,如http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation , http://www.scriptiny.com/2011/01/javascript-fade-in- out / ,但是由于没有Java的编程知识,所以我不知道如何在脚本中实现这些。 II'd appreciated if somebody could help me out on this one. 我很高兴有人可以帮助我解决这个问题。
This is how the function gets called on html: 这是在html上调用函数的方式:
<a href="http://www.a.com/a.html"><img onmouseover="showImage(this.src,this,'a')" src="http://a.net/a.png" /></a>
This is the script 这是脚本
var floatWidth = 150; // set the width of the floating image
var floatHeight = 100; // set its height
var midWindow = 0;
var nContainer = "";
var IE = false;
if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}
function stayHome(m){
if (IE)
{
var currX = event.clientX;
var currY = event.clientY;
}
else {
var currX = m.pageX;
var currY = m.pageY;
}
if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
{
var iL = document.documentElement.scrollLeft;
var iV = document.documentElement.scrollTop;
}
else {
var iL = document.body.scrollLeft;
var iV = document.body.scrollTop;
}
if (currX > midWindow+60)
{
var msgWidth = nContainer.clientWidth;
if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+'px'}
else {nContainer.style.left = (currX-msgWidth-10)+'px'}
}
else {
if (IE){nContainer.style.left = (currX+10+iL)+'px'}
else {nContainer.style.left = (currX+10)+'px'}
}
if (IE){nContainer.style.top = (currY+iV-(floatHeight/2)+70)+'px'}
else {nContainer.style.top = (currY-(floatHeight/2)+70)+'px'}
}
function hideImage(){
while (nContainer.lastChild)
{nContainer.removeChild(nContainer.lastChild)}
document.getElementById('isFloat').style.display = 'none';
}
function showImage(isImg,currItem,currCaption){
document.getElementById('isFloat').style.display = 'inline';
nIMG = document.createElement('img');
nContainer.appendChild(nIMG);
nIMG.setAttribute('src',isImg);
nIMG.setAttribute('width',floatWidth);
nIMG.setAttribute('height',floatHeight);
nCaption = document.createElement('div');
nCaption.style.textAlign = "center";
nCaption.style.backgroundColor = '#EAE3C6';
nCaption.style.padding = '5px';
nCaption.style.color = '#000000';
nCaption.style.fontFamily = 'Sans-serif';
nCaption.style.fontSize = '10pt';
nCaption.style.borderTop = "1px solid black";
nContainer.appendChild(nCaption);
nCaption.innerHTML = currCaption;
currItem.onmouseout=hideImage;
}
function getMidWindow(){
if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
{
midWindow = document.documentElement.clientWidth/2;
}
else {
midWindow = document.body.clientWidth/2;
}
}
function initFloatImg(){
var nBody = document.getElementsByTagName('body')[0];
var nDiv = document.createElement('div');
nDiv.id = "isFloat";
nDiv.style.position = "absolute";
nDiv.style.top = "0px";
nDiv.style.left = "0px";
nDiv.style.border = "1px solid black";
nDiv.style.padding = "5px";
nDiv.style.backgroundColor = "#ffffff"
nBody.appendChild(nDiv);
nContainer = document.getElementById('isFloat');
document.onmousemove = stayHome;
hideImage();
if (!IE){document.captureEvents(Event.mousemove)}
getMidWindow();
}
onload=initFloatImg;
onresize=getMidWindow;
Jquery has a very good and simple way of doing fadeIn and fadeOut, you can check their site to see. jQuery有一个非常好的和简单的淡入和淡出方式,您可以检查他们的站点来查看。
if you use jQuery UI you can use the effects to do what you require. 如果使用jQuery UI,则可以使用效果来完成所需的操作。 See this link: 看到这个链接:
http://jqueryui.com/effect/ http://jqueryui.com/effect/
example: 例:
jQuery('#someDiv').show('blind');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.