从DIV内的图像移除图像边界

  • 本文关键字:图像 边界 DIV outline
  • 更新时间 :
  • 英文 :


我希望删除此页面上图像周围的边框;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)

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

我想你看到的是因为那个文件不见了。

最新更新