浮动图片(JS)

news/2024/7/6 6:32:17


代码作用:鼠标上移到图片上时,图片浮动显现,就像是Apple的浮动菜单一样的效果。
pic.JPG
pic1.JPG
<!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 profile="http://gmpg.org/xfn/11">
 <link rel="stylesheet" href="http://ilyagram.org/wp/wp-content/themes/ilya/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="rap">
<div id="header">
  <div id="randomphotos">
  
  <div id="photodock" style="valign:bottom;padding:5px;height:80px;" οnmοuseοver="imgEnlarge(event)" οnmοuseοut="imgNormal(event)">
  <script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=90458343@N00&amp;count=8&amp;display=random&amp;name=0&amp;size=square&amp;raw=1">
 </script>
  </div>
  <script>
 var org = 40;
 var aft = 80;
 var dockdiff = aft -org;
 dock = document.getElementById("photodock");
 dockimgs = dock.getElementsByTagName("img");
 resettonormal();
 function getMyTarget(evt){
   if(!evt)  var evt = window.event;
   if (evt.target) obj = evt.target;
   else if (evt.srcElement) obj = evt.srcElement;
  
   if (obj.nodeType == 3) // defeat Safari bug
   obj = obj.parentNode;
   return obj;
 }

 function imgEnlarge(evt){
   obj = getMyTarget(evt);

   name = obj.nodeName;
   if(name!="IMG" && name !="img"){
  return true;
   }
   currentIndex = -1;
   resettonormal();
   for(i=0;i<dockimgs.length;i++){
  if(dockimgs[i] == obj){
    currentIndex = i;
    break;
  }
   }
   resize(currentIndex, aft, aft);
   resize(currentIndex+1, org + dockdiff/2, org + dockdiff/2);
   resize(currentIndex+2, org + dockdiff/10, org + dockdiff/10);

   resize(currentIndex-1, org + dockdiff/2, org + dockdiff/2);
   resize(currentIndex-2, org + dockdiff/10, org + dockdiff/10);
}

function imgNormal(evt){
  obj = getMyTarget(evt);
  if(obj.getAttribute("id") == "photodock"){
    resettonormal();
  }
}

function resize(idx, w, h){
  if(idx < 0 || idx >= dockimgs.length) return;
  var obj = dockimgs[idx];
  if(obj==null) return false;
 
// for IE
  obj.style.marginTop = "0px";
  obj.style.width = w+"px";
  obj.style.height = h+"px";
// end for ie;
 
  obj.setAttribute("style", "margin-top:0px;width:"+w+"px;"+"height:"+h+"px;");
}

function resettonormal(){
  for(i=0;i<dockimgs.length;i++){
  // for IE
    dockimgs[i].style.marginTop = "0px";
    dockimgs[i].style.width = org+"px";
    dockimgs[i].style.height = org+"px";
  // end for ie;
    dockimgs[i].setAttribute("style", "margin-top:"+dockdiff+"px;"+"width:"+org+"px;"+"height:"+org+"px;");
  }
}

</script>
  </div>
</div>
  
</body>
</html>

转载于:https://www.cnblogs.com/RuiLei/archive/2006/02/21/334892.html


http://www.niftyadmin.cn/n/4204504.html

相关文章

vue组件和js实现鼠标悬停显示title效果

需求&#xff1a; 显示文本内容过长&#xff0c;显示…鼠标悬浮时&#xff0c;全部显示 使用element组件<el-tooltip offset"-2" class"item" effect"dark" placement"top"> <span class"dispatchSystemAddressBookIt…

java 判断以中文开始_java判断是否是中文字符

public class StringUtil {/*** 判断是否为中文字符* param c* return*/private static boolean isChinese(char c) {// GENERAL_PUNCTUATION 判断中文的“号// CJK_SYMBOLS_AND_PUNCTUATION 判断中文的。号// HALFWIDTH_AND_FULLWIDTH_FORMS 判断中文的&#xff0c;号Characte…

百度-相信中国-电子书-下载

/Files/dayouluo/相信中国.rar

JS之给元素添加类的方法

原生js中添加类的方法 //1.为 <div> 元素添加一个类: document.getElementById("div").classList.add("类名");//2.为 <div> 元素添加多个类: document.getElementById("div").classList.add("类名1","类名2",…

java中io操作详解_Java语言中的IO系统详解

Java语言中的IO系统Java的核心库java.io提供了全面的IO接口&#xff0c;包括&#xff1a;文件读写&#xff0c;标准设备输出等等。Java中IO是以流为基础进行输入输出的&#xff0c;所有数据被串行化写入输出流&#xff0c;或者从输入流读入。在具体使用中很多初学者对Java.io包…

工程师侵入北京移动数据库 获利370余万元

程稚瀚称&#xff0c;侵入北京移动数据库是因为他对移动的“霸王条款”不满。  在5个月的时间里&#xff0c;软件研发工程师程稚瀚利用互联网4次侵入北京移动充值中心数据库&#xff0c;盗取充值卡密码并通过淘宝网出售&#xff0c;共获利370余万元。昨天&#xff0c;这起全国…

mysql-8.0.12版本忘记root密码解决方法(重置root密码)

解决方法&#xff1a; 1.以管理员身份运行命令行&#xff0c;输入命令&#xff1a;net stop mysql&#xff0c;以停止MySQL服务 2.设置跳过验证&#xff0c;进入到mysql安装目录下的bin路径&#xff0c;在mysql/bin/目录下输入命令&#xff1a;“mysqld --shared-memory --sk…

java界面控件_java-图形界面(控件)

java-图形界面(控件)java-图形界面(控件)记录学习过程import javax.swing.*;import java.awt.*;public class LoginPanel extends JPanel {public static final int LEFT_PADDING50;public static final int RIGHT_PADDING50;public static final int TOP_PADDING20;public sta…