火狐不支持webp格式的图片


<!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格式的图片的更多相关文章

Linux下php+imagemagick支持webp格式的图片
摘要 ImageMagick是一款功能强大的图片处理工具包,很多互联网应用中都会涉及到图片处理工作,比如切割.缩放.水印.格式转换等.ImageMagick就是一个理想的工具包. 安装基础依赖先检查 ...
SDWebImage支持WebP格式图片
SDWebImage本身就已经支持了webp格式的图片 1.下载libwebp https://github.com/webmproject/libwebp 然后你需要先安装好有homebrew或者m ...
将jpg压缩成webp格式的图片
cwebp名称 cwebp -压缩图像文件为的WebP文件概要 cwebp [选项] INPUT_FILE -o output_file.webp描述 cwebp压缩使用的WebP格式的图像.输入格式 ...
在html中如何兼容使用WebP格式的图片【图片升级到WebP】
把已有的图片转换为WebP格式要使用WebP格式,需要将你网站用到的图片都制作一份WebP格式的版本,如果你使用CDN服务商,它们一般都会提供转码到WebP格式的选项.如又拍云: 增加这样的配置后, ...
一般源码安装添加的GD库是不支持 jpeg 格式的图片的
一般源码安装添加的GD库是不支持 jpeg 格式的图片的,只支持如下格式 GD Support enabled GD Version bundled (2.0.34 compatible) GIF ...
让photoshop cc 支持 webp格式
下载WebP.8bi文件,看PS cc 是32位还是64位,找到对应的文件. brushes8.com-2017-11-03_08-29-21_654098.7z 把 WebP.8bi 复制到pho ...
Call to undefined function imagecreatefromjpeg() 让GD支持JPEG格式的图片扩展
安装扩展支持jpeg格式: 第一步:首先下载文件: 版本v8: wget http://www.ijg.org/files/jpegsrc.v8b.tar.gz 版本v9: wget http://w ...
浏览器支持webp格式
使用插件http://www.etherdream.com/WebP/WebP.js
批量将webp格式的图片转成png的图片 https://cn.office-converter.com/WEBP-to-PNG
https://cn.office-converter.com/WEBP-to-PNG

随机推荐

shutil库文件的操作
一.拷贝,移动,改名 import shutil old_file=r"C:\Users\ffm11\Desktop\AI.docx" new_file=r"C:\Use ...
Android Studio androidx 包冲突解决方法
如果包冲突了会包如下这样的错: Android dependency 'androidx.core:core' has different version for the compile (1.0.0 ...
makefile.new(7117) : error U1087: cannot have : and :: dependents for same target
makefile.new(7117) : fatal error U1087: cannot have : and :: dependents for same target(2012-05-21 2 ...
go gin
1.安装 go get -u github.com/gin-gonic/gin 2. package main import "github.com/gin-gonic/gin" ...
python 读取设备的另一个方法
import time,sys templist = []#设置一个空列表,用来放设备内容deviceslist =[]#设置一个空列表,用来放分割后的设备内容devices = [] #设置一 ...
C++——decltype
, &cj=ci; decltype(ci) x=;//x的类型是const int decltype(cj) y=x;//y的类型是const int & decltype(cj) ...
第48章 MDK的编译过程及文件类型全解
Frm: http://www.cnblogs.com/firege/p/5806134.html 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教 ...
前端（十九）—— Bootstrap框架
Bootstrap Bootstrap中文文档一.简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScrip ...
安装jdk 并放在 /usr/java/default 目录下
安装步骤 . mkdir /usr/java 2. tar -xvf jdk*.tar.gz -C /usr/java/ 记得将* 换成版本即可3. ln -s /usr/java/jdk* /usr ...
Excel简单应用
数据透视表的简单应用 LEN.LENB MID LEFT,RIGHT CONCATENATE 和 & TRIM(去掉前后空格) 和 SUBSTITUDE(去空格,包括字符串之间的空格) FIN ...

火狐不支持webp格式的图片

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

随机推荐

热门专题