Question

我希望删除此页面上图片周围的边框; http://oymyo.com/practice/rotating-heads/index.html

代码如下，如果需要，还可以发布一些JS文件

/*
Filename: rotating-heads.css
Project: rotating heads
Type: CSS
Author: Jan Dellsperger
Initial Version: 14. October 2013

This is the style sheet for the rotating heads project. All UI styles are
defined in this file.

Changelog:
12.11.2013 - Modifikationen zur leistungsverbesserung
*/

*{
    margin: 0;
    padding: 0;
}



.content-wrapper{
    width: 0px; right:0%;)
    margin: 0px auto;

}

.row{
    width: 100%;
    position: relative;
    font-size: 0;
    height: 0px;
}

.column-1-1,.column-1-3,.column-2-3{
    float: left; 
    min-height: 1px;
}

.column-1-1{
    width: 100%;
}


.text-holder{
    display: none;
}

.image-holder{
    position: relative;
    margin: 0 auto;
    width: 0px;
    height: 0px;
}

.head-image,.circle{
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 260px;
}

.head-image{
    z-index: 0;
}

.circle{
    z-index: 2;
}

.front{
    z-index: 1;
}

.widget{
    padding: 0px 0px;
    position: relative;
    top: 0;
}

<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>Rotating Heads</title>
	<link href="css/rotating-heads.css" rel="stylesheet" type="text/css" /><script src="js/1.8.2.min.js" type="text/javascript"></script><script src="js/jquery.js" type="text/javascript"></script><script src="js/HeadImage.js" type="text/javascript"></script>
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="content-wrapper">
<div class="column-1">
<div class="image-holder one"><img class="circle" src="img/circle.png" /> <img class="head-image up" src="img/up.jpg" /> <img class="head-image up-left" src="img/upleft.jpg" /> <img class="head-image left" src="img/left.jpg" /> <img class="head-image down-left" src="img/downleft.jpg" /> <img class="head-image down" src="img/down.jpg" /> <img class="head-image down-right" src="img/downright.jpg" /> <img class="head-image right" src="img/right.jpg" /> <img class="head-image up-right" src="img/upright.jpg" /> <img class="head-image front" src="img/front.jpg" /></div>
</div>
</div>

<script type="text/javascript">
            
            /* Declaring the global variables */
            var mouseX;
            var mouseY;
            var imageOne;
           
            
            /* Calling the initialization function */
            $(init);
            
            /* The images need to re-initialize on load and on resize, or else the areas
             * where each image is displayed will be wrong. */
            $(window).load(init);
            $(window).resize(init);
            
            /* Setting the mousemove event caller */
            $(window).mousemove(getMousePosition);
            
            /* This function is called on document ready, on load and on resize
             * and initiallizes all the images */
            function init(){
                
                /* Instanciate the mouse position variables */
                mouseX = 0;
                mouseY = 0;
                
                /* Instanciate a HeadImage class for every image */
                imageOne = new HeadImage("one");
              
            }
            
            /* This function is called on mouse move and gets the mouse position. 
             * It also calls the HeadImage function to display the correct image*/
            function getMousePosition(event){
                
                /* Setting the mouse position variables */
                mouseX = event.pageX;
                mouseY = event.pageY;
                
                /*Calling the setImageDirection function of the HeadImage class
                 * to display the correct image*/
                imageOne.setImageDirection();
          
            }
            
        </script></body>
</html>

我不确定导致大纲出现的原因，我在下载原始代码的页面上没有显示（https://www.cloudtec.ch/blog/web/change-image-with-jquery-mouse-position.html）

Answer 1

<img class="circle" src="img/circle.png" />

我认为您所看到的是因为该文件丢失了。

从DIV中的图像中删除图像边框

1 个答案: