jQuery Image Warp 脚本问题

jQuery Image Warp script issues

我目前正在尝试在我的网站上执行此操作 http://www.dynamicdrive.com/dynamicindex4/imagewarp.htm。这看起来很简单,我目前已经调用了我部分中的所有脚本,并在我想要的图像中调用了 class。这是我的

<!DOCTYPE html>
<html lang="en">
<head>
 <meta name="description" content="Reflecting our present perception of aesthetics.">
 <meta name="keywords" content="">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1, user-scalable=no" />
<meta name="robots" content="INDEX,FOLLOW" />


 <meta property="og:url" content="" />
 <meta property="og:title" content="" />
 <meta property="og:image" content="" />
 <meta property="og:description" content="" />

<title><?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="icon" type="image/x-icon" href="" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_media-queries.css'); ?>" type="text/css" />    

<!-- jquery --> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>       


<!-- fontawesome --> 

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>


<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/jquery.imageWarp.js">

/***********************************************
* jQuery imageWarp script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){
 $('img.imagewarp').imageWarp() //apply warp effect to images with CSS class "imagewarp"
})

</script>

</head>

这就是我的图片的样子

<img src="emb.png" class="imagewarp">

效果好像没有出现。有任何想法吗?谢谢!

请参阅下文是否对我在此处添加脚本文件有帮助,因为没有 https 或 cdn link 可用。

/* imageWarp jQuery plugin v1.01
* Last updated: June 29th, 2009. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

jQuery.noConflict()

jQuery.imageWarp={
 dsettings: {
  warpfactor: 1.5, //default increase factor of enlarged image
  duration: 1000, //default duration of animation, in millisec
  imgopacity: [0.5, 1],
  warpopacity: [0.1, 0.5]
  },
 warpshells: [],

 refreshoffsets:function($target, warpshell){
  var $offsets=$target.offset()
  warpshell.attrs.x=$offsets.left //update x position of original image relative to page
  warpshell.attrs.y=$offsets.top
  warpshell.newattrs.x=warpshell.attrs.x-((warpshell.newattrs.w-warpshell.attrs.w)/2) //update x position of final warped image relative to page
  warpshell.newattrs.y=warpshell.attrs.y-((warpshell.newattrs.h-warpshell.attrs.h)/2)
 },

 addEffect:function($, $target, options){
  var setting={} //create blank object to store combined settings
  var setting=jQuery.extend(setting, this.dsettings, options)
  var effectpos=this.warpshells.length
  var attrs={w:$target.outerWidth(), h:$target.outerHeight()}
  var newattrs={w:Math.round(attrs.w*setting.warpfactor), h:Math.round(attrs.h*setting.warpfactor)}
  var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', zIndex:1000}).appendTo(document.body)
  $target.add($clone).data('pos', effectpos) //save position of image
  var $targetlink=$target.parents('a').eq(0)
  this.warpshells.push({$clone:$clone, attrs:attrs, newattrs:newattrs, $link:($targetlink.length==1)? $targetlink : null}) //remember info about this warp image instance
  $target.click(function(e){
   var $this=$(this).css({opacity:setting.imgopacity[0]})
   var imageinfo=jQuery.imageWarp.warpshells[$(this).data('pos')]
   jQuery.imageWarp.refreshoffsets($this, imageinfo) //refresh offset positions of original and warped images
   if (imageinfo.$link){
    e.preventDefault()
   }
   var $clone=imageinfo.$clone
   $clone.stop().css({left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:setting.warpopacity[0], visibility:'visible'})
   .animate({opacity:setting.warpopacity[1], left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
   function(){ //callback function after warping is complete
    $clone.css({left:0, top:0, visibility:'hidden'})
    $this.css({opacity:setting.imgopacity[1]})
   if (imageinfo.$link){
    window.location=imageinfo.$link.attr('href')
   }   
   }) //end animate
  }) //end click
 }
};

jQuery.fn.imageWarp=function(options){
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
  if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0){ //if image has explicit width/height attrs defined
   jQuery.imageWarp.addEffect($, $imgref, options)
  }
  else if (this.complete){ //account for IE not firing image.onload
   jQuery.imageWarp.addEffect($, $imgref, options)
  }
  else{
   $(this).bind('load', function(){
    jQuery.imageWarp.addEffect($, $imgref, options)
   })
  }
 })
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://www.dynamicdrive.com/dynamicindex4/jquery.imageWarp.js"></script>


<script type="text/javascript">

jQuery(document).ready(function($){
 $('img.imagewarp').imageWarp();
})

</script>

<img src="http://www.mondieu.nu/mag/wp-content/uploads/2017/12/emb.png" class="imagewarp">