<分区>
我有以下 html、javascript 和 css 代码，但是我不知道如何制作它，所以我最终只在运行程序时使用 html。我听说过在您的 html 的头部引用它，但是不知道如何执行此操作，也不知道我可以在哪里上传 .js 或 .css 文件。
jsfiddle.net/tq7h99fo/3/
标签 javascript html css
<分区>
我有以下 html、javascript 和 css 代码，但是我不知道如何制作它，所以我最终只在运行程序时使用 html。我听说过在您的 html 的头部引用它，但是不知道如何执行此操作，也不知道我可以在哪里上传 .js 或 .css 文件。
jsfiddle.net/tq7h99fo/3/
最佳答案
您将 Javascript 放在 <script> 中<style> 中的标签和 CSS标签。
<html>
<head>
<style>
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
.large {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
background: url('http://i.imgur.com/m57F6tb.png') no-repeat;
//background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
display: none;
}
.small { display: block; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
$(".magnify").mousemove(function(e){
if(!native_width && !native_height)
{
var image_object = new Image();
image_object.src = $(".small").attr("src");
native_width = image_object.width;
native_height = image_object.height;
}
else
{
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
</script>
</head>
<body>
<div class="magnify">
<div class="large"></div>
<img class="small" src="http://i.imgur.com/m57F6tb.png" width="200"/>
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
</body>
</html>
关于javascript - 如何仅在 html 中使用 css 和 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44599824/