小编art*_*ics的帖子

用于自定义URL的自定义Pinterest按钮(文本链接,图像或两者)

我试图找到解决方案,但不能.我需要Pinterest(Pin It)按钮的自定义图像,并通过URL固定一些自定义图像,但不是当前页面.

我创建了一个自定义链接:

<a href="http://pinterest.com/pin/create/button/?url=http://inspired-ui.com&media={ImageURL}&description=DescriptionText" class="pinitbutton">Pin It</a>
Run Code Online (Sandbox Code Playgroud)

在风格我设置背景图像,但我只看到默认的Pin It按钮,而不是我的自定义按钮

在某些解决方案中,您可以为Pin It按钮设置自定义按钮图像,但我无法在这些解决方案中更改media = {ImageURL}.

流行的解决方案是

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a>
Run Code Online (Sandbox Code Playgroud)

但它对我没有帮助.有人知道解决方案吗?

html css pinterest

34
推荐指数
5
解决办法
5万
查看次数

将gve css3旋转到Chrome中的DIV然后背景附件:修复创建错误

background-attachment:fixed的工作正常.但是当我在那个DIV上定义CSS3旋转并向下滚动然后background-attachment:fixed停止工作.

检查这个http://jsfiddle.net/P3jS4/

现在我正在研究chrome18.

当你删除旋转css然后后台附件:修复工作正常.

http://jsfiddle.net/P3jS4/2

css google-chrome rotation css3 css-transforms

23
推荐指数
1
解决办法
2848
查看次数

CSS中的层次结构显示

我在为层次结构显示提供CSS时遇到了麻烦,比如文件和文件夹树.我使用嵌套的无序列表:

<ul>
  <li>animals<ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

它们与正确的CSS减去连接线很好地显示.我需要连线.我使用以下CSS执行此操作:

ul ul li:before {
  content: "";
  padding: 15px;
  border: 1px solid #000;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 10px;
  position: absolute;
  left: -22px;
  top: -15px;
}
Run Code Online (Sandbox Code Playgroud)

问题是线条与动物,狗和猫的图标重叠.我尝试将z-index更改为无效.有没有更好的方法来实现这个CSS?还是有另一种方法让z-index有意义吗?

html css css3 html-lists

19
推荐指数
2
解决办法
2万
查看次数

我可以使用CSS绘制像幸运轮一样的东西吗?

我希望使用CSS和jQuery绘制一个财富之轮.我不想使用任何图像.

此外,我希望在圆圈中至少有8个段,并在每个段中正确对齐每个文本词.这是一张照片来说明:

在此输入图像描述

一旦我有这个工作,我就可以使用CSS3 rotate财产.

不知道怎么能这样做?

javascript jquery animation css3 css-transitions

15
推荐指数
2
解决办法
3万
查看次数

Javascript中的空间(2D)声音

为了我的游戏需要,我需要有2D声音.这意味着,发射器应位于2D平面上的某个位置.如何在Javascript中实现此效果?我需要使用特殊的声音格式还是可以控制扬声器的音量?

我想我可以达到每个扬声器有2个音量的程度,但我对如何在Javascript中为同一个声音应用不同音量感到无能为力.

javascript browser audio

12
推荐指数
1
解决办法
1169
查看次数

除了textarea中的'text-caret'之外,如何使用透明字体?

我有一个简单的textarea,我需要制作透明字母,同时允许文本插入符号可见.当我应用以下规则时,我会得到隐形插入符号:

textarea {
   background: transparent;
   opacity: 0;
}
Run Code Online (Sandbox Code Playgroud)

当我输入不可见的文本时,我需要看到text-caret移动.

编辑:我需要编辑编辑表格中的td单元格.当我点击一个单元格时,我会显示一个textarea并开始输入.在每个字母上,我在单元格中插入一个上下文.在那之后,我隐藏了一个textarea.

html javascript css fonts caret

12
推荐指数
1
解决办法
3249
查看次数

如何使用鼠标点击绝对定位的图像区域地图?

我使用绝对定位将几个图像放在彼此的顶部.这些图像是部分透明的,并且具有html area并且map仅使可见部分可点击.在jQuery中,我将鼠标事件附加到area标签上.

这适用于一个图像:只有在输入图像的映射部分时才会触发mouseenter和mouseleave.

问题是它只适用于顶部图像.对于所有其他人来说,它不会触发事件而不是CSS悬停工作,因为它上面还有另一个图像.尽管事实上areas不重叠并且maps在图像的前面.

以下是该问题的演示:http://markv.nl/stack/imgmap2/

javascript jquery imagemap mouseevent

10
推荐指数
1
解决办法
2967
查看次数

CSS3在动画元素上旋转,导致不调用click事件

好吧,这个问题给我带来了很多问题.

将css3 -webkit-transform样式与任何类型的3d旋转(例如rotateY(30deg))一起使用时,将click事件绑定到此旋转对象是极不可靠的.

请参阅下面的示例代码或查看此小提琴(要查看小提琴中的不可靠性,请单击元素的右侧).此示例没有动画但仍受影响.

HTML:

<div id='box1'>Click this box.</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

#box1{
    -webkit-transform: rotateY(30deg);
}
Run Code Online (Sandbox Code Playgroud)

jQuery的:

$('#box1').click(function(){
    alert('clicked box 1');
});
Run Code Online (Sandbox Code Playgroud)

我的意思是'不可靠'是不会总是抛出click事件(取决于你点击它的位置),有时事件根本不会被抛出(无论你在哪里点击它).

有没有办法解决或避免这种情况,以便旋转和动画时它与CSS3元素一起使用?

更新:

在元素上使用CSS属性"float:left"似乎允许它在不运动时正确检测点击事件.有谁知道为什么浮动属性修复了这个?

我的最终目标是让对象在运动时接收点击事件,但是,当我应用新的CSS3 rotate3d属性(实时,在另一个jquery事件上)给出对象动画时,click事件再次开始失败.

html jquery transform css3 jquery-animate

8
推荐指数
1
解决办法
2627
查看次数

全屏登录

我正在登录屏幕上工作,我需要让它全屏运行.

我正在尝试将表单放在用户名之上,而且只是我没有得到正确的位置

这是一个例子:http: //jsfiddle.net/TSbRY/

   #loginbackground{
        width:100%;
        height:100%;
        position:fixed;
        top:0px;
        left:0px;
        background: url(http://ivojonkers.com/loginscreentemp.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

    #loginbackground form{
        width:18.667%;
        height:7.466%;
        position:absolute;
        top:51.4%;
        left:50%;
        margin-left:-8.867%;
 }

    #loginbackground input{
        width:100%;
        height:31.25%;
        background-color:#F00;
        border:none;
        font:Georgia, "Times New Roman", Times, serif;
        font-size:18px;
        position: absolute;
 }
Run Code Online (Sandbox Code Playgroud)

我的问题是我希望将表单放在用户名和pas上,并在每个屏幕分辨率下都存在,所以当你缩放浏览器时,你需要将表单放在你认为可以输入img的部分的顶部.

你可以在全屏幕上看到灰烬http://fiddle.jshell.net/TSbRY/show/它适合某些屏幕分辨率但不适用于所有屏幕分辨率

html css css3

8
推荐指数
1
解决办法
1815
查看次数

如何使<img>标签在div中水平排列?

我需要让图像在div中水平并排显示.我怎样才能做到这一点?

HTML:

<div class="Wrapper">
  <img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
  <img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
  <img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>
Run Code Online (Sandbox Code Playgroud)

参考:jsFiddle

html css image

7
推荐指数
1
解决办法
5万
查看次数