精华内容
下载资源
问答
  • 切换为浮动图片
    千次阅读
    2021-06-12 10:01:52

    HTML写法:

    JS写法:var img = document.createElement("img");

    img.setAttribute("src","img_1.png");

    img.setAttribute("onclick","removeOneWorkitemLine(this);");

    img.setAttribute("onmouseover","this.src=\"img_2.png\";");

    img.setAttribute("onmouseout","this.src=\"img_3.png\";");

    CSS写法:/*用于div的背景图片切换 代码如下*/

    .div{background-image:url('img_1.png');}

    .div:hover{background-image:url('img_2.png');}

    /*鼠标划过时,切换指定div的背景图片*/

    定义和用法::hover 选择器用于选择鼠标指针浮动在上面的元素:hover 选择器可用于所有元素,不只是链接:link 选择器设置指向未被访问页面的链接的样式:visited 选择器用于设置指向已被访问的页面的链接:active 选择器用于活动链接

    注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

    本文地址:鼠标移动到图片上切换到另一张图片,移出时又切默认图片 https://www.shenqiu123.com/a/jianzhan/zhishi/4096.html

    更多相关内容
  • 在使用poi操作docx模板文件时,总会出现需要插入类似印章签名的图片。poi直接插入图片是插入内嵌图片 这个图片是占位置的。 会撑高当前的那一行类似效果 行使得制作出来的word样式辣眼睛。  一般印章签名效果...

    在使用poi操作docx模板文件时,总会出现需要插入类似印章签名的图片。poi直接插入图片是插入内嵌图片 这个图片是占位置的。

    会撑高当前的那一行类似效果

    行使得制作出来的word样式辣眼睛。

            一般印章签名效果要求的是 1.在指定位置插入 2.不影响原有模板内容

    解决方案:

     1.图片替换 

    实现思路:在原有模板上要插入图片的位置插入一张图片这个图片可以设置文字环绕

    然后docx重命名zip 查看document.xml 找到图片的rId 可以通过替换图片数据的方式实现使图片出现在你想要的位置

    实现代码:

            WordUtil.replaceImg(doc, signet.getBase64(), "rId8");//替换印章
    
            public static void replaceImg(XWPFDocument document, String base64, String rid) {
            ByteArrayInputStream byteArrayInputStream = getBase64Input(base64);
            String ind = "";
            //已经改好了不用动了。
            try {
                document.getPackagePart().removeRelationship(rid);//删除原有印章
                ind = document.addPictureData(byteArrayInputStream,                     
                XWPFDocument.PICTURE_TYPE_PNG);//在word插入一张没有关系的图片数据
                //将新插入的图片关系替换到模板图片上,替换的只是图片数据,大小位置还是原来模板的
                document.getPackagePart().addRelationship(document.getPackagePart().
                        getRelationship(ind).getTargetURI(), TargetMode.INTERNAL,
                        XWPFRelation.IMAGES.getRelation(), rid);
            } catch (InvalidFormatException e) {
                e.printStackTrace();
                throw new BizException("替换图片失败");
            }
        }

    缺陷:替换后的图片大小是你模板的图片大小一致,也就是说当你模板的图片和你替换的图片不一大小时,你替换后的结果图片大小是模板图片大小。会出现签名图片不一样大的情况。

    2.操作xml实现图片定位

    实现思路:在指定位置插入一张行内图片,拿到这种图片对象,给图片设置anchor 锚的属性。

    可以看到图片的定位属性就两种 行内和锚 

    添加后删除原来的行内关系inline

    实现代码:

    import org.apache.poi.util.Units;
    import org.apache.poi.xwpf.usermodel.Document;
    import org.apache.poi.xwpf.usermodel.XWPFDocument;
    import org.apache.poi.xwpf.usermodel.XWPFParagraph;
    import org.apache.poi.xwpf.usermodel.XWPFRun;
    import org.apache.xmlbeans.XmlException;
    import org.openxmlformats.schemas.drawingml.x2006.main.CTGraphicalObject;
    import org.openxmlformats.schemas.drawingml.x2006.wordprocessingDrawing.CTAnchor;
    import org.openxmlformats.schemas.wordprocessingml.x2006.main.CTDrawing;
    
    
    import java.io.*;
    
    /**
     * created by ldl 2018/12/12
     */
    public class Test3 {
        public static void main(String[] args) throws Exception {
            XWPFDocument document = new XWPFDocument();
            document.createParagraph().createRun().setText("测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试");
            XWPFParagraph paragraph = document.createParagraph();
            XWPFRun run = paragraph.createRun();
            // 设置图片
            run.setText("测试图片: ");
            // 添加浮动图片
            run = paragraph.createRun();
            InputStream in = new FileInputStream("C:\\Users\\hasee\\Desktop\\word\\下载.png");
            run.addPicture(in, Document.PICTURE_TYPE_PNG, "TEST", Units.toEMU(100), Units.toEMU(30));
            in.close();
            // 2. 获取到图片数据
            CTDrawing drawing = run.getCTR().getDrawingArray(0);
            CTGraphicalObject graphicalobject = drawing.getInlineArray(0).getGraphic();
    
            //拿到新插入的图片替换添加CTAnchor 设置浮动属性 删除inline属性
            CTAnchor anchor = getAnchorWithGraphic(graphicalobject, "TEST1",
                    Units.toEMU(100), Units.toEMU(30),//图片大小
                    Units.toEMU(50), Units.toEMU(0), false);//相对当前段落位置 需要计算段落已有内容的左偏移
            drawing.setAnchorArray(new CTAnchor[]{anchor});//添加浮动属性
            drawing.removeInline(0);//删除行内属性
            run.setText("测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试");
            document.write(new FileOutputStream("C:\\Users\\hasee\\Desktop\\word\\WordInsertPictures1.docx"));
            document.close();
        }
    
        /**
         * @param ctGraphicalObject 图片数据
         * @param deskFileName      图片描述
         * @param width             宽
         * @param height            高
         * @param leftOffset        水平偏移 left
         * @param topOffset         垂直偏移 top
         * @param behind            文字上方,文字下方
         * @return
         * @throws Exception
         */
        public static CTAnchor getAnchorWithGraphic(CTGraphicalObject ctGraphicalObject,
                                                    String deskFileName, int width, int height,
                                                    int leftOffset, int topOffset, boolean behind) {
            String anchorXML =
                    "<wp:anchor xmlns:wp=\"http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing\" "
                            + "simplePos=\"0\" relativeHeight=\"0\" behindDoc=\"" + ((behind) ? 1 : 0) + "\" locked=\"0\" layoutInCell=\"1\" allowOverlap=\"1\">"
                            + "<wp:simplePos x=\"0\" y=\"0\"/>"
                            + "<wp:positionH relativeFrom=\"column\">"
                            + "<wp:posOffset>" + leftOffset + "</wp:posOffset>"
                            + "</wp:positionH>"
                            + "<wp:positionV relativeFrom=\"paragraph\">"
                            + "<wp:posOffset>" + topOffset + "</wp:posOffset>" +
                            "</wp:positionV>"
                            + "<wp:extent cx=\"" + width + "\" cy=\"" + height + "\"/>"
                            + "<wp:effectExtent l=\"0\" t=\"0\" r=\"0\" b=\"0\"/>"
                            + "<wp:wrapNone/>"
                            + "<wp:docPr id=\"1\" name=\"Drawing 0\" descr=\"" + deskFileName + "\"/><wp:cNvGraphicFramePr/>"
                            + "</wp:anchor>";
    
            CTDrawing drawing = null;
            try {
                drawing = CTDrawing.Factory.parse(anchorXML);
            } catch (XmlException e) {
                e.printStackTrace();
            }
            CTAnchor anchor = drawing.getAnchorArray(0);
            anchor.setGraphic(ctGraphicalObject);
            return anchor;
        }
    }
    

    实现效果 可以通过微调位置来达到你最终想要的结果

    缺陷:当有多张签名的时候需要计算位置,插入位置是从插入位置段落开始算起

    欢迎交流在指定位置插入多张张图片的方案

     

    展开全文
  • 本文实例讲述了js实现的简单图片浮动效果。分享给大家供大家参考,具体如下: 利用window对象,实现一个图片浮动效果 1、现有一个广告div,就是我们要控制的,它的起始点(0,0) 2、设定横向和纵向的速度 3、控制...
  • 图片们用ul之类的包起来,并设置float。然后设置这个ul本身absolute定位,其父标签用relative定位。通过设置ul的left或top值,实现图片队列的滚动效果
  • 图片切换效果有层浮动在动画上图片切换效果有层浮动在动画上图片切换效果有层浮动在动画上图片切换效果有层浮动在动画上,简单易懂
  • 解压密码:RJ4587 今天我们要给大家分享一款非常特别的HTML5/CSS3焦点图插件,这款焦点图插件可以实现XY两个维度的图片切换动画,并且图片在排列时有一种3D立体的视觉效果,这样的效果正是使用了CSS3特殊属性改变了...
  •  在浏览各大商城网站的时候,或者某些网站的首页,都会展示与本网站相关的一些实时切换图片, 本文就给大家分享一个用jQuery实现图片自动切换的例子。  主页核心代码(Default.aspx): <!DOCTYPE html> ...
  • 首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左...
  • css3图片上下浮动动画

    千次阅读 2021-06-11 08:44:00
    一、float定义float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动浮动元素会生成一个块级框,而不论它本身是何种元素。按照张鑫旭...css动画(平...

    一、float定义float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。按照张鑫旭...

    css动画(平移) (作者:张米,撰写时间:2019年2月24日) 定义:元素在原来的位置上直线移动。 有三种情况: 1. translate(x,y)在x轴和y轴方向同时移动 2. translat论坛

    参考(含动画效果)漂浮的白云【效果演示】 【简要介绍】漂浮的白云主要通过远景白云和近景白云来实现...博文来自:的博客

    Css3中关键帧keyframes的用法 *(作者:李梅思,撰写时间:2019年1月16日)* 在css3中可以使用关键帧keyframes来设置动画,这个动画你可以根据自己的需要来设置,例如颜色...博文来自:weixin_44484756的博客

    keyframes有兼容性-webkit--moz--0--ms-要定义属性名称名称结合过渡一起使用过渡完成时间(S)缓冲描述(linear匀速ease非匀速)延迟时间;(如果是0秒也必须设置单位)动...博文来自:前端小99的博客

    这是一款很有特点的HTML5图片切换动画,点击左右按钮即可将图片进行弹性切换,图片在被切换时,都会产生一定的弹性缓冲动画效果。这款HTML5图片应用非常适合在产品宣传页面上使用,看上起十分大气.   ...博文来自:跟踪世界脚步

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦。需要做的是旋转front和back元素,而不是旋转整个容器元素。如果你使用的是最新版的IE,可以忽略这一节。IE10+是支持的,I...博文来自:weixin_30491641的博客

    CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和规则  @keyframes规则是创建动画。@keyframes规则内指定...博文来自:冷月醉雪的博客

    动画(CSS3)animation动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。语法格式:animation:动画名称动画时间运动曲线何时...博文来自:jhkkk的博客

    写在前面之前都是在学习CSS2的一些特性,今天硬着头皮尝试了一下CSS3的东西。没想到也有意外收获。就是transition这个属性,实现的效果令人赏心悦目,甚至比flash动画看着还舒服,也非常简单...博文来自:weixin_34363171的博客

    在很多前端的网页动态效果中,我们需要实现一个动态上下回动的效果,下去之后渐渐变慢,回去之后也是先快后缓。    当然,这样的动画使用JS源代码或者其他方法都可以实现,但是有的活血会很复杂,这里提供一种...博文来自:weixin_41262388的博客

    说到元素的浮动,首先要明确一个概念就是包含块(containingblock)。所谓浮动元素的包含块,就是其最近的块级祖先元素。我们后面会举例来说明。这里关于浮动的问题,主要有以下几点:1、浮动元素的...博文来自:王浴昊

    使用方法利用hover伪类操作流程首先确定要实现的效果设置初始表示状态动画用到的css属性transition属性transition-property规定设置过渡效果的CSS属性的名称。(none没...博文来自:dsh的博客

    课程关键词:浮动页面布局有两种方式引用:1)浮动Float2)定位Position今天就来一个小小的练习,让大家理解Float的含义复制内容到剪贴板代码:【例子】要求:1)两个方块,一个红色#900,...博文来自:thewebcode

    HTML纯CSS3动画轮播图(详解)网页开发初学者学习时,一般都是先编写静态的页面,并没有JS、JQ等,在学习CSS3时可以利用animation属性制作一个简单的纯CSS3轮播图基础知识废话不多说,...博文来自:weixin_42670775的博客

    Animation前言好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。下面是七喜的官方主页,它就是很好的富交互样例。鼠标移动到导...博文来自:CSDN前端知识共享

    展开全文
  • 主要介绍了jQuery实现图片渐入渐出切换展示效果,需要的朋友可以参考下
  • H5手机底部图标菜单切换特效是一款基于HTML5 SVG绘制的自适应手机底部图标菜单导航切换背景颜色代码。
  • 本文实例讲述了js实现鼠标经过时图片滚动停止的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
  • 主要大家详细介绍了javascript实现点击按钮切换轮播图功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue鼠标悬浮切换图片

    千次阅读 2021-05-24 16:36:17
    }) 效果展示 笔记 使用鼠标移动事件@mouseover实现鼠标悬浮切换的效果 区别mouseover和mouseenter 我查了下:转载自简书的一个博主作者:前端王睿----原文 在原生JS中鼠标移入移出事件有四个,分别mouseover ,...

    HTML

    <div id="app">
    			<div class="content">
    			    <ul class="menu">
    			    	<li v-bind:class="{focus:index==0}" @mouseover="choice(0)">不过如此</li>
    					<li :class="{focus:index==1}" @mouseover="choice(1)">不过如此</li>
    					<li :class="{focus:index==2}" @mouseover="choice(2)">不过如此</li>
    					<li :class="{focus:index==3}" @mouseover="choice(3)">不过如此</li>
    			    </ul>
    				<div class="item" v-if="index==0">
    					<img src="img/微信图片_20201213134959.png" />
    				</div>
    				<div class="item" v-else-if="index==1">
    					<img src="img/微信图片_202012131349591.png" />
    				</div>
    				<div class="item" v-else-if="index==2">
    					<img src="img/微信图片_2020121313495910.jpg" />
    				</div>
    				<div class="item" v-else>
    					<img src="img/微信图片_202012131349592.jpg" />
    				</div>
    			</div>
    		</div>  
    

    CSS

    * {
    				margin: 0;
    				padding: 0;
    			}
    			
    			.content {
    				width: 800px;
    				margin: 0 auto;
    			}
    			
    			img {
    				width: 800px;
    			}
    			
    			ul {
    				background-color: #FFE4C4;
    			}
    			
    			li {
    				list-style: none;
    				overflow: hidden;
    				width: 24%;
    				text-align: center;
    				display: inline-block;
    				padding: 10px 0;
    			}
    			.focus {
    				background-color: lightcoral;
    				color: white;
    			}  
    

    JS

    		new Vue({
    				el: "#app",
    				data: {
    				  index:0
    				},
    				methods: {
    					choice:function(i) {
    						this.index=i;		
    					}
    				},
    			})
    

    效果展示

    Vue绑定图片切换

    笔记

    使用鼠标移动事件@mouseover实现鼠标悬浮切换的效果

    区别mouseover和mouseenter

    我查了下:转载自简书的一个博主作者:前端王睿----原文
    在原生JS中鼠标移入移出事件有四个,分别为mouseover ,mouseout ,mouseenter,mouseleave,其中mouseover和mouseenter为移入事件,mouseout和mouseleave为移出事件,那么问题来了,这每组事件之间究竟有什么区别呢?

    可能很多人现在都还不知道它们之间的区别,甚至以为它们其实功能是一样一样的,真是too young too simple!

    一、mouseover和mouseenter
    mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素,都会触发该事件
    mouseenter: 只有鼠标指针移入事件所绑定的元素时,才会触发该事件

    换句话说就是,如果一个元素没有子元素,那么该元素绑定mouseover或者mouseenter两种事件效果没有区别,鼠标每次移入元素时都只会触发一次事件;如果绑定了mouseover事件的元素存在子元素,那么,每次移入该元素时都会触发一次事件(包括从外部移入和从子元素移入),移入子元素时也会触发一次事件。

    在这里插入图片描述
    添加变量i
    在这里插入图片描述

    源代码链接

    源代码链接 ‾ \underline{\text{源代码链接}} 源代码链接
    第一次使用Markdown写文章,感觉还不错。

    展开全文
  • JS鼠标悬停图片翻动展示效果是一款根据鼠标进出图片的方向来控制图片进出的方式,效果超炫。
  • JavaScript图片切换

    2021-06-07 21:30:26
    本次使用的是图片切换的效果主要javaScript来实现功能。 一、什么是HTML,HTML怎么作用法,HTML具体能做什么? HTML是超文本标签语言(Hyper Text Markup Labguage),标准用过标记语言下的一个应用。HTML不是编程...
  • js做的飘浮广告,图片会自动切换图片数量不限,可自行设置
  • css3代码部分 *{ padding: 0; margin: 0; } .box{ display: block; width: 300px;...说明:点击1,2,3即可切换相应图片 设计原理通过点击1,2,3来控制 li 的显示与否,从而达到效果
  • 通过js实现图片左右点击图片左右切换效果
  • jQuery浮动广告横幅代码是一款网页底部悬浮的广告横幅,点击关闭按钮图片广告横幅大小图隐藏切换效果代码。
  • 本文实例大家分享了Android实现3D层叠式卡片图片展示的具体代码,供大家参考,具体内容如下 先看效果 好了效果看了,感兴趣的往下看哦! 整体实现思路 1、重写RelativeLayout 实现 锁定宽高比例的 RelativeLayout...
  • HTML中,使用hover属性完成鼠标悬停切换图片效果

    千次阅读 多人点赞 2021-06-02 18:06:18
    HTML中经常需要完成这样的一个效果:鼠标悬停切换图片:效果如下:
  • 淘宝网首页图片浮动代码 图片幻灯片特效 图片切换特效
  • 下面做个毒霸首页中图片切换的效果,如下: 实现代码如下:<!DOCTYPE html> <title></title> .zong { width: 600px; height: 70px;
  • 这次大家分享的是图片的悬浮放大及左右滑动切换两种交互效果 预览及下载地址:https://6rkewz.axshare.com 一、悬浮放大效果 1、制作元件 拖入两个【动态面板】元件,设置两张图片 2、设置交互 点击其中一个...
  • 本文介绍了8款bootstrap3.0中特殊的效果,包括1.关闭按钮 2.Carets 3.快速设置浮动 4.内容区域居中 5.清除浮动 6.显示或隐藏内容 7.针对屏幕阅读器的内容 8.图片替换,非常的实用,是篇非常不错的文章,推荐给大家。
  • 主要大家详细介绍了JS仿京东移动端手指拨动切换轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • jq实现背景图片动态切换

    千次阅读 2020-10-14 23:32:41
    在很多需求中都用到了利用jquery实现背景图片的动画效果,接下来我们将实现点击ul中的li实现背景图片的动态切换。 思路和实现步骤: 1、先建立静态页面。其中box盒子用来动态生成ul,li,a和img;box_bg和box_sta盒子...
  • JQuery实现图片切换(自动切换+手动切换

    万次阅读 热门讨论 2015-01-31 21:26:27
    JQuery实现图片切换(自动切换+手动切换
  • 用纯CSS+HTML实现图片点击切换背景

    千次阅读 多人点赞 2020-09-10 19:21:57
    2.主要技术:css3的背景设置,边框圆角,定位,盒模型,选择器,浮动,锚点,由:target实现切换 一、效果图如下 二、代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,622
精华内容 6,648
关键字:

切换为浮动图片