[英]How do I use fade-in/ease-in-out/or any animation to smooth out the revealing of my HTML, CSS and JS navigation menu?
[英]How to implement fade-in-out animation on java-script like ease-in-out on css?
我在网站上使用Java脚本,将鼠标悬停在缩略图上时可显示图像预览。 该脚本效果很好,但我想在CSS中添加一个功能,如easy-in-out。 我对Java不太了解,但是我尝试了几次不同的尝试,但是没有运气。 我发现了一些不错的教程,如http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation , http://www.scriptiny.com/2011/01/javascript-fade-in- out / ,但是由于没有Java的编程知识,所以我不知道如何在脚本中实现这些。 我很高兴有人可以帮助我解决这个问题。
这是在html上调用函数的方式:
<a href="http://www.a.com/a.html"><img onmouseover="showImage(this.src,this,'a')" src="http://a.net/a.png" /></a>
这是脚本
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有一个非常好的和简单的淡入和淡出方式,您可以检查他们的站点来查看。
如果使用jQuery UI,则可以使用效果来完成所需的操作。 看到这个链接:
例:
jQuery('#someDiv').show('blind');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.