jQuery Image Warp 스크립트 문제

현재 내 사이트 http://www.dynamicdrive.com/dynamicindex4/imagewarp.htm에서 실행하려고합니다. 쉽습니다. 저는 현재 내 섹션의 모든 스크립트를 호출하고 이미지에서 클래스를 호출하여 원하는 부분을 찾습니다. 여기 내jQuery Image Warp 스크립트 문제

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta name="description" content="Reflecting our present perception of aesthetics."> 
 
\t <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" /> 
 

 

 
\t <meta property="og:url" content="" /> 
 
\t <meta property="og:title" content="" /> 
 
\t <meta property="og:image" content="" /> 
 
\t <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($){ 
 
\t $('img.imagewarp').imageWarp() //apply warp effect to images with CSS class "imagewarp" 
 
}) 
 

 
</script> 
 

 
</head>

이며,이 내 이미지가

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

이 효과를 표시하지 않는 것 같습니다 모습입니다. 어떤 아이디어? 고맙습니다!

출처

2017-12-27 Maren

그래서 문제 무엇인가? –

효과가 나타나지 않습니다. – Maren

가장 좋은 질문입니다. –

https 또는 cdn 링크 availables가 없으므로 여기에 스크립트 파일을 추가하는 데 도움이되는지 보려면 아래를 참조하십시오.

/* 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={ 
 
\t dsettings: { 
 
\t \t warpfactor: 1.5, //default increase factor of enlarged image 
 
\t \t duration: 1000, //default duration of animation, in millisec 
 
\t \t imgopacity: [0.5, 1], 
 
\t \t warpopacity: [0.1, 0.5] 
 
    \t }, 
 
\t warpshells: [], 
 

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

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

 
jQuery.fn.imageWarp=function(options){ 
 
\t var $=jQuery 
 
\t return this.each(function(){ //return jQuery obj 
 
\t \t var $imgref=$(this) 
 
\t \t if (this.tagName!="IMG") 
 
\t \t \t return true //skip to next matched element 
 
\t \t if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0){ //if image has explicit width/height attrs defined 
 
\t \t \t jQuery.imageWarp.addEffect($, $imgref, options) 
 
\t \t } 
 
\t \t else if (this.complete){ //account for IE not firing image.onload 
 
\t \t \t jQuery.imageWarp.addEffect($, $imgref, options) 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t $(this).bind('load', function(){ 
 
\t \t \t \t jQuery.imageWarp.addEffect($, $imgref, options) 
 
\t \t \t }) 
 
\t \t } 
 
\t }) 
 
};

<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($){ 
 
\t $('img.imagewarp').imageWarp(); 
 
}) 
 

 
</script> 
 

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

출처

2017-12-27 00:52:06

답변

관련 문제