`
海上明月共潮生--风铃
  • 浏览: 60809 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

js 操作图片的各种效果 第三篇

js网页图片导出到exceljs网页数据流程图vml做的随鼠标大小改变的圆 
阅读更多


 21 ，js导出图片到excel

<HTML>
<HEAD>
<TITLE>将页面中指定表格的数据导入到Excel中</TITLE>
<SCRIPT LANGUAGE="javascript"> 
function AutomateExcel() 
{ 

var oExcel = new ActiveXObject("Excel.Application");   //创建Excel对象 
var oWork = oExcel.Workbooks.Add();                      //新建一个Excel工作簿
var oSheet = oWork.ActiveSheet;                       //指定要写入内容的工作表为活动工作表
var table = document.all.myTbl;              //指定要写入的数据源的id
var myRow = table.rows.length;               //取数据源行数
var myCell = table.rows(0).cells.length;           //取数据源列数

for (i=0;i<myRow;i++){//在Excel中写行
  for (j=0;j<myCell;j++){//在Excel中写列
    //定义格式
    oSheet.Cells(i+1,j+1).Font.Bold = true;//加粗
    oSheet.Cells(i+1,j+1).Font.Size = 10;//字体大小
if(table.rows(i).cells(j).innerHTML.toLowerCase().indexOf('<img')!=-1){//如果其HTML代码包括<img
  oSheet.Cells(i+1,j+1).Select();//选中Excel中的单元格
      oSheet.Pictures.Insert(table.rows(i).cells(j).getElementsByTagName('img')[0].src);//插入图片
}
    else{
  oSheet.Cells(i+1,j+1).value = table.rows(i).cells(j).innerText;//向单元格写入值
}
  } 
} 
oExcel.Visible = true; 
oExcel.UserControl = true; 
} 
</SCRIPT>
</HEAD>

<BODY>
<table border="1" width="500" id="myTbl" bgcolor="blue">
 <tr bgcolor="white">
  <td>&nbsp;姓名</td>
  <td>年龄</td>
  <td>地址</td>
  <td>照片</td>
 </tr>
 <tr bgcolor="white">
  <td>张三</td>
  <td>22</td>
  <td>北京海淀</td>
  <td><img src="logo1.gif" border="0"></td>
 </tr>
 <tr bgcolor="white">
  <td>李四</td>
  <td>23</td>
  <td>上海浦东</td>
  <td><Img src="logo2.gif" border="0"></td>
 </tr>
</table>
<input type="button" name="export" onclick="AutomateExcel();" value="导出到Excel">
</BODY>
</HTML>

 

22，vml 制作随鼠标变大小的圆

<html Xmlns:v="urn:schemas-microsoft-com:vml"> 
<style> 
<!-- 
v\:* {behavior:url(#default#VML);} 
--> 
</style> 
<body onmousemove='with(document.all.test.style){width=event.x;height=event.y;}'> 
<v:oval id=test style="width: 100; height: 100"> 
<v:stroke weight="1px" color="navy"/> 
</v:oval>
</body>
</html>

 

23，js做的结构流程图

<html>
<head>
<title>组织结构图</title>
<style>
 .ItemCss
 {
   position:absolute;
   width:24px;
   border:1px solid #999999;
   font-size:12px;
   padding:5px;
   height:70px;
   z-index:9;
   background-color:#FFFFFF;
   line-height:16px;
 }
 a
 {
 text-decoration:none;
 color:#333333;
 }
 .divhline
 {
  position:absolute;
  z-index:17;
  padding:0px;
  margin:0px;
  border-top:1px solid #999999;
 }
 .divvline
 {
 color:blue;
 position:absolute;
 background-color:#999999;
 width:1px;
 z-index:17;
 }
</style>
<script language="javascript">
 var dItem = new Array();
 var w = 600;
 var h = 40;
 var iw = 60;
 var ih = 70;
 var boxh = 70;
 var startleft = 350;
 var starttop = 30;
 var hr = "<hr size=\"1\" noshade>"
 var labledv = "<div class=\"ItemCss\" style=\""
 var hdv = "<div class=\"divhline\" style=\"width:";
 var vdv = "<div class=\"divvline\" style=\"height:" + h + "px;\"";
 var endsdv = "\">";
 var enddv = "</div>";
 var htm = "";
 var len;
 var maxn=0;                            //深度初始变量
 function createStruct()
 {
     dItem[0] = "1|教育部|0|";           //设置要显示的结构内容-以“|”间隔
     dItem[1] = "2|东部教育局|1|";       //注意第三项为父级节点
     dItem[2] = "3|西部教育局|1|";
     dItem[3] = "4|东部高校|2|";
     dItem[4] = "5|东部高中|2|";
     dItem[5] = "6|商务代表|5|";
     dItem[6] = "7|东部初中|2|";
     dItem[7] = "8|西部高校|3|";
     dItem[8] = "9|西部高中|3|";
     len = dItem.length;                //获取结构数组的长度
     Set_Item(0,0);             //设置开始的节点
     Set_Max();
     Write_Item(0,0,0,1);
     var htm1 = "";
     for(var i=0;i<len;i++)
     {
       htm1 = htm1 +dItem[i]+"<br>";
     }
     document.getElementById("divStruct").innerHTML = htm;
 }

 function Set_Item(pid,ni)   //设置节点层次
 {
  var n = ni + 1;                   //子节点的序号
 var iAry = new Array();
  for(var i=0;i<len;i++)
 {
     iAry = dItem[i].split("|");      //分解数组中的当前节点
  if(iAry[2] == pid)                  //是当前节点的子节点
  {
   dItem[i] = dItem[i] + ni;          //当前节点中添加一项
   if(maxn < ni)              //改变结构的深度
   {
    maxn = ni;
   }
   Set_Item(iAry[0],n);        //循环设置层次
  }
 }
 }

 function Set_Max()   //设置节点子节点中最大数
 {
 var iAry = new Array();
 var childnum;
  for(var i=0;i<len;i++)
 {
     iAry = dItem[i].split("|");//分解数组中的当前节点
  childnum = Get_Child_Num(iAry[0]);//获取当前节点的子节点
  if(childnum <= 1)          //如果子节点数为0或1
  {
   dItem[i] = dItem[i] + "|0";         //当前节点中添加一项
  }
  else
  {
   dItem[i] = dItem[i] + "|" + Get_Max(iAry[0],iAry[3]);//获取最大节点
  }
 }
 }
 function Get_Max(pid,start)//获取指定节点的最大节点
 {
  var iAry = new Array();
 var m = 0;
 var n = 0;
  for(var j=start;j<=maxn;j++)
 {
  for(var i=0;i<len;i++)
  {
   iAry = dItem[i].split("|");
   if(iAry[3] == j)
   {
    if(Get_RootID(pid,iAry[0]))  //获取当前节点的根节点
    {
     m = m + 1;
    }
   }
   if(n < m)
   {
    n = m;
   }
  }
  m = 0;
 }
 return n;
 }
 function Get_RootID(pid,id) //获取当前节点的根节点
 {
 var iAry = new Array();
  for(var i=0;i<len;i++)
 {
  iAry = dItem[i].split("|");//分解当前节点
  if(iAry[0] == id)
  {
   if(iAry[2] == pid)
   {
    return true;
    break;
   }
   else
   {
    return Get_RootID(pid,iAry[2]);//返回根节点
   }
  }
 }
 return false;
 }

 function Get_Item(id) //取得指定节点号所在的数组
 {
     var i;
  var items;
  var iAry = new Array();
  for(i=0;i<len;i++)  //边界节点组
  {
   iAry = dItem[i].split("|");//分解当前节点
  if(iAry[0] == id)
  {
   items = dItem[i];  //获取节点
   break;
  }
  }
  return items;
 }

 function Get_Child_Num(pid) //根据父节点取得子节点个数
 {
     var i;
  var rnum = 0;
  var iAry = new Array();
  for(i=0;i<len;i++)         //遍历组织结构数组
  {
   iAry = dItem[i].split("|"); //将每一项再分离出数据
  if(iAry[2] == pid)          //第三项便是父节点
  {
   rnum = rnum + 1;           //是当前节点的子节点
  }
  }
  return rnum;
 }

 function Write_Item(ipid,ltmp,wtmp,cnt)
 {
   var iAry = new Array();
 var id;
 var txt;
 var pid;
 var lens;
 var maxnum;
 var t;
 var l;
 var hline_width;
 var dvline = "";
 var childnum = 0;
 var itxt;
 var tmpcnt = 0;
 for(var i=0;i<len;i++)
 {
  itxt = dItem[i];
  iAry = itxt.split("|");  //分解节点项
 if(iAry[2] == ipid)
 {
 id = iAry[0];
 txt = "<a href=\"?id=" + id + "\">" + iAry[1] + "</a>";//动态创建链接，链接内容来自节点数据
 pid = iAry[2];
 lens = iAry[3];
 maxnum = iAry[4];
 childnum = Get_Child_Num(id);
 hline_width = maxnum * iw;
 if(pid == 0)
 {
   t =  starttop;
   l =  startleft;
 }
 else
 {
  t = starttop + 2 * lens * h + lens * ih;
  l = ltmp - wtmp/2 + (wtmp / 2) * tmpcnt;
 }
 dvline = "";
 if(childnum > 1)
 {
   var t1;
   var l1;
   var t2;
   var l2;
   var w2;
   t1 = t + ih;
   l1 = l + 12;
   w2 = hline_width/2;
   t2 = t1 + h;
   l2 = l - w2 + 10;   //使用div实现边框效果
   dvline = "<div class=\"divvline\" style=\"height:" + h + "px;left:" + l1 +"px;top:" + t1 + "\"></div>";
   dvline = dvline + "<div class=\"divhline\" style=\"width:" + hline_width + "px;left:" + l2 +"px;top:" + t2 + "\"></div>";
   for(var j=0;j<childnum;j++)
   {
     var t3;
  var l3;
  t3 = t1 + h;
  l3 = l2 + (hline_width/(childnum-1)) * j;
    var tmpline =  "<div class=\"divvline\" style=\"height:" + h + "px;left:" + l3 +"px;top:" + t3 + "\"></div>";
  dvline = dvline + tmpline;
   }
   dvline = dvline
   
 }
 else if(childnum == 1)
 {
  var t4;
  var l4;
  l4 = l + 12;//使用div实现边框效果
  dvline = "<div class=\"divvline\" style=\"height:" + h + "px;left:" + l4 +"px;top:" + (t + ih) + "\"></div>";
  dvline = dvline + "<div class=\"divvline\" style=\"height:" + h + "px;left:" + l4 +"px;top:" + (t + ih + h) + "\"></div>";
  
 }
 htm = htm + labledv + "left:" + l + "px;top:" + t + "px" + endsdv + txt + enddv + dvline;
 if(cnt % 2 == 0)
 {
  tmpcnt = tmpcnt + 2;
 }
 else
 {
  tmpcnt = tmpcnt + 1;
 }
 Write_Item(id,l,hline_width,childnum);//循环输出
 
  }
 }
 }
</script>
</head>
<body onLoad="createStruct()">
<div id="divStruct"></div>
</body>
</html>

  

 

 

  • 大小: 19.1 KB
分享到：
| js 操作图片的各种效果 第二篇
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    多种js图片切换效果

    在JavaScript（简称JS）编程中，图片切换效果是一种常见的网页动态设计技术，它极大地提升了用户体验，使得静态的图片展示变得更加生动有趣。本篇文章将深入探讨几种常用的JS图片切换效果及其实现方法。 首先，我们...

    图片的各种效果的处理

    9. **模糊图片效果**：Android提供了`RenderScript` API，可以使用`ScriptIntrinsicBlur`进行快速模糊处理，也可以使用第三方库如`FastBlur`。 10. **浮雕效果**：通过改变像素的灰度值和对比度来模拟浮雕感，可以...

    jquery抽屉式图片展示效果.rar

    对于触摸设备，我们可能需要结合第三方库如Hammer.js来处理滑动手势。当事件触发时，执行相应的动画函数，完成抽屉的开合动作。 在实现过程中，还需要考虑到用户体验和性能优化。为了避免过度渲染和提高性能，我们...

    JS_模仿Flash交替图片显示

    【标题】"JS_模仿Flash交替图片显示"指的是使用JavaScript技术来实现类似Flash动画中图片轮播的效果。在Web开发中，这样的功能常用于创建滑动展示、广告轮播或图片画廊等交互式组件。JavaScript是一种轻量级的解释型...

    Js图片旋转

    总结，JavaScript实现图片旋转主要有HTML5 Canvas、CSS3 Transform以及使用第三方库三种方式。选择哪种方法取决于应用场景、兼容性需求和性能要求。在实际项目中，可以根据具体需求灵活选择合适的方法。

    wap原生js图片滚动切换效果

    这些图片应当被设置为绝对定位，以便于后续的JavaScript操作。 ```html &lt;!-- 更多图片... --&gt; ``` 2. **CSS样式**：设定容器和图片的样式，确保图片可以在容器内正确堆叠，并且初始时只显示第一张图片。...

    JavaScript切割图片

    在提供的压缩包中，"JavaScript 图片切割效果 - cloudgamer - 博客园.mht"可能是一个包含有关JavaScript图片切割实例的网页文件，而"ImgCropper_sys.rar"很可能是`ImgCropper`库的源码或示例。通过研究这些资源，你...

    js无停顿横向滚动图片特效之带标题

    本篇文章将深入探讨一种基于JavaScript（简称JS）实现的无停顿横向滚动图片特效，此特效不仅包含图片滚动功能，还额外集成了标题展示，为用户提供更丰富、更具体的信息展示方式。 #### 技术背景 在网页开发中，...

    jQuery实现图片滚动效果

    需要注意的是，这需要自定义插件或者使用第三方库如`jquery.transform.js`来支持。 - 停止旋转：可以通过`.stop()`方法停止当前的动画，防止过度堆叠动画效果。 在实际应用中，为了提高用户体验，我们还可以添加...

    完美实现js焦点轮播效果(二)（图片可滚动）

    这个方法的核心在于巧妙地利用辅助图片和JavaScript的动态调整，使得轮播效果看起来像是无限循环，而实际上只是在有限的图片集合内进行操作。这种方法对于提升网站或应用的交互体验非常有用，尤其是在展示产品图片、...

    很炫的图片循环效果

    而“工具”可能是指一些辅助开发的库或者框架，例如jQuery、React、Vue等，或者是专门处理图片轮播的第三方组件，如Swiper或Slick。 在压缩包子文件的文件名称列表中，我们看到“hotel”这个名字。这可能是示例项目...

    图片不间断滚动

    而“工具”可能指的是开发者可以使用的第三方库，如Bootstrap的Carousel组件，或者一些在线生成器，这些工具可以帮助非专业程序员快速创建出图片滚动效果。 【压缩包子文件的文件名称列表】： 1. a.html：这通常是...

    原生js图片滚动插件仿新浪电影网站首页焦点图片滚动.rar

    此外，原生JavaScript图片滚动插件在性能上往往优于引入第三方库的插件，因为没有额外的资源加载和依赖。对于追求页面加载速度和轻量级设计的网站而言，这是一个不错的选择。 原生JavaScript图片滚动插件的创建涉及...

    js控制图片（轮播）切换

    本篇将围绕“js控制图片（轮播）切换”这一主题，结合提供的两个HTML文件——“轮播1.html”和“手写 js控制图片切换.html”，探讨其背后的JavaScript知识点。 首先，我们来看“轮播1.html”。这个实例可能是基于...

    图片轮显效果

    本篇文章将深入探讨如何实现图片轮显效果，并以 jQuery 为例进行详细讲解。 首先，我们需要理解图片轮显的基本原理。它主要依赖于JavaScript编程语言，通过定时器（如`setInterval`）来控制图片的切换，同时结合CSS...

    原生js实现贴片效果插件.zip

    随着技术的发展，现在可以通过原生JavaScript（js）技术来实现这一效果，而不需要依赖任何第三方插件。本篇内容将从多个角度详细探讨如何使用原生js实现贴片效果插件。 首先，贴片效果的基础实现依赖于HTML、CSS和...

    原生js实现简单的焦点图效果实例

    本实例采用纯JavaScript，结合HTML和CSS，演示如何不依赖于任何第三方库或框架，仅使用原生js来实现一个简单的焦点图效果。 首先，文档中通过描述一个具体的实例来展示如何用原生js编写焦点图。在描述中提到使用了...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）

    这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...

    简单的jquery四张图片轮播滚动切换效果代码

    jQuery作为一个轻量级、功能丰富的JavaScript库，提供了强大的DOM操作和事件处理能力，使得实现图片轮播效果变得简单易行。本篇文章将深入探讨如何使用jQuery创建一个简单的四张图片轮播滚动切换效果。 首先，我们...

    JS图片旋转

    总结来说，使用JQuery实现图片旋转主要依靠第三方插件如`jqueryrotate.js`或者利用CSS3的`transform`属性。通过灵活运用这些工具和方法，可以创建出丰富的交互式图片旋转效果。同时，为了保证跨浏览器兼容性，我们还...

Magicbox
Global site tag (gtag.js) - Google Analytics