jquery 그림 확대 효과
- (function($){
- $.fn.preview = function(){
- var xOffset = 10;
- var yOffset = 20;
- var w = $(window).width();
- $(this).each(function(){
- $(this).hover(function(e){
- if(/.png$|.gif$|.GIF$|.jpg$|.JPG$|.bmp$|.BMP$/.test($(this).attr("bigpic"))){
- $("body").append("<div id='preview'><div><img src=\'#\'" /span>+$(this).attr('bigpic')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
- }else{
- $("body").append("<div id='preview'><div><p>"+$(this).attr('title')+"</p></div></div>");
- }
- $("#preview").css({
- position:"absolute",
- padding:"4px",
- border:"1px solid #f3f3f3",
- backgroundColor:"#eeeeee",
- top:(e.pageY - yOffset) + "px",
- zIndex:1000
- });
- $("#preview > div").css({
- padding:"5px",
- backgroundColor:"white",
- border:"1px solid #cccccc"
- });
- $("#preview > div > p").css({
- textAlign:"center",
- fontSize:"12px",
- padding:"8px 0 3px",
- margin:"0"
- });
- if(e.pageX < w/2){
- $("#preview").css({
- left: e.pageX + xOffset + "px",
- right: "auto"
- }).fadeIn("fast");
- }else{
- $("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");
- }
- },function(){
- $("#preview").remove();
- }).mousemove(function(e){
- $("#preview").css("top",(e.pageY - xOffset) + "px")
- if(e.pageX < w/2){
- $("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
- }else{
- $("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
- }
- });
- });
- };
- })(jQuery);
2. html 코드
- <a class="preview" href="150.html" bigpic="http://show.icarlus.com//Upload/photos/4135314.jpg" title=" "><img src="http://show.icarlus.com//Upload/photos/4135314.jpg" /></a>
- <a class="preview" href="97.html" bigpic="http://show.icarlus.com//Upload/photos/419267.jpg" title=" "><img src="http://show.icarlus.com//Upload/photos/419267.jpg" /></a>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
