<!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. jmter 5.1 中文

    一.jmeter5.0下载解压后,默认的界面是英文版的,许多人觉得不方便,想要汉化,jmeter是不需要安装汉化包的,通过修改配置文件即可:1.找到jmeter解压后的文件夹,例如我是安装在D:\De ...

  2. 机器学习技法笔记：Homework #6 AdaBoost&Kernel Ridge Regression相关习题

    原文地址:http://www.jianshu.com/p/9bf9e2add795 AdaBoost 问题描述 程序实现 # coding:utf-8 import math import nump ...

  3. vue富文本vue-quill-editor

    这个富文本需要装一下插件 "quill": "^1.3.6" "quill-image-drop-module": "^1.0.3 ...

  4. 拓展KMP求回文串

    题目:hdu3613: 题意:有26字母对应的价值,然后给出以个串,把它分成两段字串,如果字串是回文串,串的价值就是每个字符和,不是就为0.求最大价值. 博客 分析:拓展KMP的应用求回文字串. #i ...

  5. 不走弯路，微信小程序的快速入门？

    微信小程序下载注册地址:https://mp.weixin.qq.com/cgi-bin/wx 微信小程序登开发者平台地址(可以查看小程序APPID):https://mp.weixin.qq.com ...

  6. css translate/rotate 空间坐标轴

    参考:https://www.cnblogs.com/zhangnan35/p/10709876.html https://www.cnblogs.com/zyrblog/p/11142624.htm ...

  7. Java oop 第13章_多线程

    第13章_多线程 一.   多线程相关的概念:  程序:由某种编程语言开发可执行某些功能的代码组合,它是静态的概念.   进程:当程序被执行时的过程可以理解为讲程序从外存调入内存的过程,会为每一个程序 ...

  8. ros语音交互（五）移植科大讯飞语音识别到ros

    将以前下载的的语音包的 samples/iat_record/的iat_record.c speech_recognizer.c speech_recognizer.c 拷贝到工程src中, linu ...

  9. nginx 自启动

    转载:https://www.cnblogs.com/cxscode/p/8262319.html 安装Nginx 下载windows版nginx (http://nginx.org/download ...

  10. 【颓废篇】Py:从零开始的poj自动提交

    之前学习了一些python的爬虫技术... 已经可以通过python来水blog的阅读量了 你知道的太多了, 然而你看我这个blog惨不忍睹的访问量, 有人吗? 有人吗? 今天突然又双叒叕心血来潮想写 ...