我有一个盒子阴影生成器。每个值有4个滑块(x轴,y轴,模糊,传播) 我还通过javascript创建了第5个滑块(我希望此滑块启用/禁用插入属性) 问题是它不起作用: 这是我的代码:
$(document).ready(function() {
$("#code").css({
" $( document ).ready(function() {
$("#code").css({
"border": "3px solid gold",
"padding": "4px",
"color": "lightblue"
});
$("#inset").css('width', '10%');
$(".slider").change(
function() {
var x = $("#x").val() + "px ";
var y = $("#y").val() + "px ";
var b = $("#blur").val() + "px ";
var s = $("#spread").val() + "px ";
var code = x + y + b + s + " dodgerblue ";
$(".generator").css("box-shadow", code);
$(".h-shadow").html(x);
$(".v-shadow").html(y);
$(".blur").html(b);
$(".spread").html(s);
});
$("#optimize").before(
"<input type='range' id='inset' value='0' min='0' max='1' >");
$("#boxSub").click(
function() {
$(".slider").val(0);
$('.Code').html("0");
$(".blur").html("0");
$(".spread").html("0");
$('.generator').css("box-shadow", $("#boxShadowf").val());
});
$("#inset").change(
function() {
var ins = $("#inset").val();
if (ins === "1") {
var code = x + y + b + s + " dodgerblue inset";
$(".generator").css("box-shadow", code);
} else {
var code = x + " " + y + " " + b + " " + s + " dodgerblue";
$(".generator").css("box-shadow", code);
}
});
$("#toggleCode").click(
function() {
$('.code').toggle(789);
});
$("#optimize").click(function() {
/****
Optimize the code by finding the spread and the blur values
If any of those to is equal to 0 or 0px then removeit or print an empty string
***/
var b = $(".blur").html();
var s = $(".spread").html();
if (b === "0" || b === "0px" && s != "0" || s != "0px") {
$(".blur").html(b);
} else {
if (b === "0" || b === "0px") {
$(".blur").html("");
}
if (s === "0" || s === "0px") {
$(".spread").html("");
}
}
});
$("#resetCode").click(function(event) {
$(".slider").val(0);
$('.generator').css('box-shadow', '0px 0px 0px 0px');
$('.Code').html("0");
$('.v-shadow').html(" 0");
$('.blur').html("0");
});
});
border ":"
3 px solid gold ","
padding ":"
4 px ","
color ":"
lightblue "});
$("#inset").css('width', '10%');
$(".slider").change(
function() {
var x = $("#x").val() + "px ";
var y = $("#y").val() + "px ";
var b = $("#blur").val() + "px ";
var s = $("#spread").val() + "px ";
var code = x + y + b + s + " dodgerblue ";
$(".generator").css("box-shadow", code);
$(".h-shadow").html(x);
$(".v-shadow").html(y);
$(".blur").html(b);
$(".spread").html(s);
});
$("#optimize").before(
"<input type='range' id='inset' value='0' min='0' max='1' >");
$("#boxSub").click(
function() {
$(".slider").val(0);
$('.Code').html("0");
$(".blur").html("0");
$(".spread").html("0");
$('.generator').css("box-shadow", $("#boxShadowf").val());
});
$("#inset").change(
function() {
var ins = $("#inset").val();
if (ins === "1") {
var code = x + y + b + s + " dodgerblue inset";
$(".generator").css("box-shadow", code);
} else {
var code = x + " " + y + " " + b + " " + s + " dodgerblue";
$(".generator").css("box-shadow", code);
}
});
$("#toggleCode").click(
function() {
$('.code').toggle(789);
});
$("#optimize").click(function() {
/****
Optimize the code by finding the spread and the blur values
If any of those to is equal to 0 or 0px then removeit or print an empty string
***/
var b = $(".blur").html();
var s = $(".spread").html();
if (b === "0" || b === "0px" && s != "0" || s != "0px") {
$(".blur").html(b);
} else {
if (b === "0" || b === "0px") {
$(".blur").html("");
}
if (s === "0" || s === "0px") {
$(".spread").html("");
}
}
});
$("#resetCode").click(function(event) {
$(".slider").val(0);
$('.generator').css('box-shadow', '0px 0px 0px 0px');
$('.Code').html("0");
$('.v-shadow').html(" 0");
$('.blur').html("0");
});
});
.generator{
width:10em;
height:10em;
background:red;}
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="container">
<div class="jumbotron landing">
<h1>Box Shadow Generator v1.0 BETA </h1>
</div>
<h1 class="btn btn-info center-block text-center ">An easy to use box shadow generator</h1>
You can try your own values in the following form:
<div class="container">
<input type="text" id="boxShadowf"><div class="btn btn-success" id="boxSub">Get val</div>
</div>
<div class="row">
<div class="col-md-3">
<input type="range" class="slider form-control" id="x" step="0.1" min="-100" max="100" value="0">
</div>
<div class="col-md-3">
<input type="range" class="slider form-control" id="y" step="0.1" min="-100" max="100" value="0">
</div>
<div class="col-md-3">
<input type="range" class="slider form-control" id="blur" step="0.1" min="0" max="100" value="0">
</div>
<div class="col-md-3">
<input type="range" class="slider form-control" id="spread" step="0.1" min="0" max="20" value="0" >
</div>
<div class="generator"></div>
</div>
<div class="btn btn-warning" id="toggleCode">
Toggle code
</div>
<div class="btn btn-danger" id="resetCode">Reset code</div>
<h1>Code</h1>
<div class="code" id="code">
div{
<p class="text-success bg-info"><span class="standard coded">
box-shadow:<span class="h-shadow Code">0</span> <span class="v-shadow Code">0</span> <span class="blur">0</span> <span class="spread Code">0</span><span class="color"> black</span></span>
;</p>
<p class="text-success bg-info prefixed"><span class="standard coded">
-webkit-box-shadow:<span class="h-shadow Code">0</span> <span class="v-shadow Code">0</span> <span class="blur">0</span> <span class="spread Code">0</span><span class="color"> black</span></span>
;</p>
<p class="text-success bg-info prefixed"><span class="standard coded">
-moz-box-shadow:<span class="h-shadow Code">0</span> <span class="v-shadow Code">0</span> <span class="blur">0</span> <span class="spread Code">0</span><span class="color"> black</span></span>
;</p>
}
<div class="btn btn-danger btn-block" id="optimize" disabled="true">Optimize code</div>
</div>
我想要的是当我更改最后一个滑块以启用/禁用inset属性更新代码并将其应用于带有class.generator的div
答案 0 :(得分:0)
使用类似的东西:
var down = false;
function move(){
down = true;
var value = document.getElementById("range").value;
var value1 = document.getElementById("range1").value;
var value2 = document.getElementById("range2").value;
var value3 = document.getElementById("range3").value;
document.getElementById("d").style.boxShadow= value + "px " + value1 + "px " + value2 + "px " + value3 + "px";
}
&#13;
input{padding:10px}
&#13;
Left:<input id="range" type="range" max-value="100" /></br>
Top:<input id="range1" type="range" max-value="100" /></br>
Blur:<input id="range2" type="range" max-value="100" /></br>
Size:<input id="range3" type="range" max-value="100" value="0" onclick="move()" onmousemove="move()"/>
<div id="d" style="background:red;height:50px;width:50px;"></div>
&#13;
答案 1 :(得分:0)
我已经改变了你的代码,认为它有效:
$(document).ready(
function(){
$(".Code").html("0px")
$("#optimize").show();
$("#boxSub").css("margin-bottom","0.1em");
$("#optimize").before("<h3>inset?</h3><input type='range' value='0' min='0' max='1' class='slider' id='inset'/>");
$(".slider").change(
function(){
$p=$("#inset").val();
var x=$("#x").val()+"px ";
var y=$("#y").val()+"px ";
var b=$("#blur").val()+"px ";
var s=$("#spread").val()+"px ";
$r=$("#red").val();
$g=$("#green").val();
$b=$("#blue").val();
$color=" rgb("+$r+","+$g+","+$b+")";
var code=x+y+b+s+$color;
if (b != "0px"){$(".blur").show();}
if (s != "0px"){$(".spread").show();}
if ($p==="0"){
code = code;
$(".inset").hide();
}
else{
code="inset "+code;
$(".inset").show();
}
$(".generator").css("box-shadow",code);
$(".h-shadow").html(x);
$(".v-shadow").html(y);
$(".blur").html(b);
$(".spread").html(s);
$(".color").html($color);
});
$("#resetCode").click(
function(){
$(".slider:not(#inset)").val(0);
$(".generator").css("box-shadow",code);
$(".Code").html("0px");
$(".color").html(" rgb(0,0,0)");
});
$("#boxShadowf").change(
function (){
$(".slider").val(0);
$('.Code').html("0px");
$(".color").html(" rgb(0,0,0)");
$('.generator').css("box-shadow",$("#boxShadowf").val());
});
$("#toggleCode").click(
function(){
$("#code").toggle(768);
});
$("#generators").click(
function(){
alert("You might like to use some other generators such as..\nBorder Radius Generator!!!\nText shadow Generator!!\n\nkounelios13");
});
$("#optimize").click(
function(){
var blur=$(".blur").html();
var spread=$(".spread").html();
if($.trim(spread)==="0px"){
if($.trim(spread)==="0px" && $.trim(blur)==="0px"){
$(".spread").hide();
$(".blur").hide();
}
else{
$(".spread").hide();
}
}
});
});
这是一个jsfiddle:http://jsfiddle.net/ucq3401d/