<!DOCTYPE html>

<html lang="en">

<style>

ul{list-style: none;}

li{float: left;margin-left: 20px;

}

li a{display: block;border:2px solid #ccc;}

#tooltip2{

        position: absolute;

}

#tooltip{

    position: absolute;

    border:2px solid #ccc;

    width: 300px;height: 300px;

}

</style>

<head>

    <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> 

    <title>Document</title>

    <!-- <script type="text/javascript">

    jQuery(document).ready(function($) {

        var x=10;

        var y=20;

        $('a.tooltip').mouseover(function(event){

            this.myTitle=this.title;

            this.title='';//取消a的title属性，从而不会显示默认的

       var tooltip='<div id="tooltip2">'+this.myTitle+'</div>';//把默认的赋值到鼠标移动上

       $('body').append(tooltip);

       $('#tooltip2').css({'top':(event.pageY+y)+'px',//event.pageY为当前鼠标的纵坐标

                 'left':(event.pageX+x)+'px'

   }).show('fast');

    }).mouseout(function(event){

        this.title=this.myTitle;

$('#tooltip2').remove();

//remove是删除节点，而removeAttr()是删除属性

    }).mousemove(function(event){

        $('#tooltip2').css({'top':(event.pageY+y)+'px',

                 'left':(event.pageX+x)+'px'

   });

    });

});

</script>

<body> -->

<script type="text/javascript">

jQuery(document).ready(function($) {

    var x=10;

    var y=20;

$('li a').mouseover(function(e){

    // this.myTitle=this.title;

    //         this.title='';

var ele=$('<div id="tooltip">'+this.title+'</div>');

$('body').append(ele);

$('#tooltip').css({'top':(e.pageY+y),'left':(e.pageX+x)}).show('fast');

}).mouseout(function(){

     // this.title=this.myTitle;

 $('#tooltip').remove();

}).mousemove(function(e){

$('#tooltip').css({'top':(e.pageY+y),'left':(e.pageX+x)}).show('fast');

});

});

</script>

</head>

<!-- <script type="text/javascript">

    jQuery(document).ready(function($) {

        var x=10;

        var y=20;

        $('a.tooltip').mouseover(function(event){

            this.myTitle=this.title;

            this.title='';//取消a的title属性，从而不会显示默认的

            var imgTitle=this.myTitle?'<br/>'+this.myTitle:'';

       var tooltip="<div id='tooltip2'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>";

       //把默认的赋值到鼠标移动上

       $('body').append(tooltip);

       $('#tooltip2').css({'top':(event.pageY+y)+'px',//event.pageY为当前鼠标的纵坐标

                 'left':(event.pageX+x)+'px'

   }).show('fast');

    }).mouseout(function(event){

        this.title=this.myTitle;

$('#tooltip2').remove();

//remove是删除节点，而removeAttr()是删除属性

    }).mousemove(function(event){

        $('#tooltip2').css({'top':(event.pageY+y)+'px',

                 'left':(event.pageX+x)+'px'

   });

    });

});

</script> -->

<p><a href="#" class='tooltip' title='这是我的超链接提示1.'>提示1.</a></p>

<p><a href="#" class='tooltip' title='这是我的超链接提示2.'>提示2.</a></p>

<ul>

    <li><a href="javascript:void(0);" title='<img src="data:image/1.webp" alt="未显示" id="tooltip">'><img src="data:image/1.webp" alt="未显示"></a></li>

    <li><a href="javascript:void(0);" title='<img src="data:image/2.webp" alt="未显示" id="tooltip">'><img src="data:image/2.webp" alt="未显示"></a></li>

    <li><a href="javascript:void(0);" title='<img src="data:image/3.webp" alt="未显示" id="tooltip">'><img src="data:image/3.webp" alt="未显示"></a></li>

    <li><a href="javascript:void(0);" title='<img src="data:image/4.webp" alt="未显示" id="tooltip">'><img src="data:image/4.webp" alt="未显示"></a></li>

</ul>

</body>

</html>

<!-- 火狐不支持webp格式的图片 -->
在谷歌上可以运行，火狐和ie不支持webp格式，不能运行

火狐不支持webp格式的图片的更多相关文章

  1. Linux下php+imagemagick支持webp格式的图片

    摘要 ImageMagick是一款功能强大的图片处理工具包,很多互联网应用中都会涉及到图片处理工作,比如切割.缩放.水印.格式转换等.ImageMagick就是一个理想的工具包. 安装基础依赖 先检查 ...

  2. SDWebImage支持WebP格式图片

    SDWebImage本身就已经支持了webp格式的图片 1.下载libwebp https://github.com/webmproject/libwebp 然后你需要先安装好有homebrew或者m ...

  3. 将jpg压缩成webp格式的图片

    cwebp名称 cwebp -压缩图像文件为的WebP文件概要 cwebp [选项] INPUT_FILE -o output_file.webp描述 cwebp压缩使用的WebP格式的图像.输入格式 ...

  4. 在html中如何兼容使用WebP格式的图片【图片升级到WebP】

    把已有的图片转换为WebP格式 要使用WebP格式,需要将你网站用到的图片都制作一份WebP格式的版本,如果你使用CDN服务商,它们一般都会提供转码到WebP格式的选项.如又拍云: 增加这样的配置后, ...

  5. 一般源码安装添加的GD库 是不支持 jpeg 格式的图片的

    一般源码安装添加的GD库 是不支持 jpeg 格式的图片的,只支持如下格式 GD Support enabled GD Version bundled (2.0.34 compatible) GIF ...

  6. 让photoshop cc 支持 webp格式

    下载WebP.8bi文件,看PS cc 是32位还是64位,找到对应的文件. brushes8.com-2017-11-03_08-29-21_654098.7z 把  WebP.8bi 复制到pho ...

  7. Call to undefined function imagecreatefromjpeg() 让GD支持JPEG格式的图片扩展

    安装扩展支持jpeg格式: 第一步:首先下载文件: 版本v8: wget http://www.ijg.org/files/jpegsrc.v8b.tar.gz 版本v9: wget http://w ...

  8. 浏览器支持webp格式

    使用插件http://www.etherdream.com/WebP/WebP.js

  9. 批量将webp格式的图片转成png的图片 https://cn.office-converter.com/WEBP-to-PNG

    https://cn.office-converter.com/WEBP-to-PNG

随机推荐

  1. chromedriver安装（谷歌浏览器驱动安装）

    如果程序执行错误,浏览器没有打开,那么应该是没有装 Chrome 浏览器或者 Chrome 驱动没有配置在环境变量里.下载驱动,然后将驱动文件路径配置在环境变量即可. chromedriver下载地址 ...

  2. java实现邮件定时发送

    最近做项目时客户提出了一个需求:系统定时发送E-mail到其客户,达到通知的效果.先将实例分享给大家,如果确实有一些帮助的话,请大家来点掌声! 首先介绍java定时器(java.util.Timer) ...

  3. 第一周 Largest Rectangle in a Histogram

    Language: 题目: Largest Rectangle in a Histogram Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  4. python xlwt设置单元格的自定义背景颜色

    我使用python 2.7和xlwt模块进行excel导出 我想设置我知道可以使用的单元格的背景颜色 style1 = xlwt.easyxf('pattern: pattern solid, for ...

  5. display default HeapSize of Java VM

    window OS: java -XX:+PrintFlagsFinal -version | findstr HeapSize Linux OS java -XX:PrintFlagsFinal - ...

  6. Android基础——框架模式MVC在安卓中的实践

    本篇文章包含以下内容: MVC的介绍 MVC的实践 MVC的介绍 MVC (Model View Controller),是模型(model)视图(view)控制器(controller)的缩写,一种 ...

  7. 笔记：Python列表和元组

    列表 列表和字符串之间的转换 >>> li = list('hello') >>> li ['h', 'e', 'l', 'l', 'o'] >>> ...

  8. 处理 vagrant Homestead 响应慢小记

    环境 Homestead box: Homestead: v8.2.0 vagrant: 2.2.4 在Homestead中 安装nfs-kernel-server sudo apt-get inst ...

  9. ReadWriteLock 如何使用？

    QReadWriteLock从名字看就知道是读写锁的意思.和QMutex一样,QReadWriteLock也是线程同步的一种工具.那么它有什么用呢?和QMutex又有什么区别呢?写个例子瞧一瞧. 特点 ...

  10. leetcode-回溯

    题17: 方法一:回溯 class Solution: def letterCombinations(self, digits: str) -> List[str]: res = [] dic ...