0

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

<!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">

效果似乎没有出现。有任何想法吗？谢谢！

4

1 回答 1

1

如果它有助于我在此处添加脚本文件，请参见下文，因为没有可用的 https 或 cdn 链接。

/* 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">

于 2017-12-27T00:52:06.467 回答