小编Luk*_*ara的帖子

最简单的翻转/悬停技术

我很想知道人们认为当前最好的基本翻转动作--JQuery还是CSS?

我希望翻看这些状态:

  • 正常:DIV中的文本段落
  • 悬停:文本段落淡出,照片淡入,与文本位置相同
  • OnMouseOut:照片淡出,文字淡入.

DIV和照片都是已知尺寸.

我在网上发现的90%仅限CSS翻转效果专门用于菜单,使用精灵,这不是我想要的,而另外10%的人正在争论是否:悬停是好习惯.

我很好奇人们认为现在最简单的技术 - 最少代码,最不复杂,最兼容.

如果没有添加翻转,HTML与此类似:

<div id="box1">
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS是:

#box1 {
    width:403px;
    height:404px;
    background-image:url('../images/bio_square1.jpg');
    background-repeat:no-repeat;
    color:#fff;
}
Run Code Online (Sandbox Code Playgroud)

html css jquery rollover

6
推荐指数
1
解决办法
719
查看次数

为什么window.location附加而不是替换ie中的URL

我在错误的URL中获取错误但不是在firefox和chrome中.

基本上,我有一个名为文本搜索的文本域.我在htaccess中使用jQuery和rewriterule来内部重定向页面.我在localhost上,所有文件都在一个名为test的文件夹中.

在firefox和chrome中,如果你输入'hello'点击回车,'hi'点击回车,'goodbye'点击在文本搜索框中输入你得到正确的URL

本地主机/测试/测试/你好

本地主机/测试/检验/喜

本地主机/测试/检验/再见

repectively.

就是说你得到了

本地主机/测试/测试/你好

本地主机/测试/检验/检测/喜

本地主机/测试/检验/检测/检测/再见

分别

这里的问题是'测试'是预先的.如何阻止这种情况发生在ie.我无法在网上找到这个问题的答案.

html和jquery代码

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>


        <base href="http://localhost/test/" />
        <script src="jQuery.js"></script>
        <script>
            $(document).ready(function(){
                $("#text-search").keyup(function(e){
                    if (e.keyCode == 13){
                        window.location.replace("testing/"+$('#text-search').val());
                    }
                })
            })
        </script>
    </head>

    <body>
        <input type='text' id='text-search'>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

的.htaccess

Options +FollowSymLinks -MultiViews
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^testing/(.+)$ /test/testing.php?string=$1 [L]
Run Code Online (Sandbox Code Playgroud)

你能帮我解决这个问题吗?非常感谢

javascript .htaccess jquery

6
推荐指数
2
解决办法
9468
查看次数

在下拉菜单上使用箭头键滚动-Vue.js

我正在vuejs中构建一个自动完成组件。

此刻,我陷入了滚动动画中。

目的是单击箭头键作为键的方向滚动,但是仅当该选项不可见时才执行滚动。

我想要这种东西,但是在vue / javascript中。- http://jsfiddle.net/kMzR9/3/

如果您由于屏幕很小而在我离开的示例中看不到问题,那么这里是jsfiddle- https: //jsfiddle.net/v7yd94r5/

这是我所拥有的一个例子。

const Autocomplete = {
  name: "autocomplete",
  template: "#autocomplete",
  props: {
    items: {
      type: Array,
      required: false,
      default: () => []
    },
    isAsync: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  data() {
    return {
      isOpen: false,
      results: [],
      search: "",
      isLoading: false,
      arrowCounter: 0
    };
  },

  methods: {
    onChange() {
      // Let's warn the parent that a change was made
      this.$emit("input", this.search);

      // Is the data given by …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-component vuejs2

6
推荐指数
2
解决办法
2843
查看次数

数据表分页字符"<<"和"<"在IE和Safari中无法正确显示

我正在使用DataTables jQuery插件,并且在IE和Safari(Firefox和Opera工作)中正确显示First和Previous分页链接存在问题.

"<<"和"<"显示为"<"和"".

$(document).ready(function () {
     oTable = $('#fileList').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "oLanguage": 
            {
                "sSearch": "Search all columns:",
                "oPaginate": 
                {
                    "sNext": '>',
                    "sLast": '>>',
                    "sFirst": '<<',
                    "sPrevious": '<'
                }
            }
});
Run Code Online (Sandbox Code Playgroud)

我试图逃避'\ <\ <'无济于事.

有任何想法吗?

jquery pagination jquery-plugins datatables html-entities

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

JSTL 在循环中每第 5 个字段集创建一个新行

您好,我目前正在迭代并显示表中的字段集列表。为了尝试使布局有点体面。每次循环到达第 5 个 fieldSet 时,我都想创建一个新行。谢谢

JSP:

<div class="det" id="displayFields">
    <table class="det">
        <tr>
            <td>
                <c:forEach items="${detFieldMap}" var="detFieldEntry">     
                    <fieldset class="det">         
                        <legend>${detFieldEntry.key}</legend>  
                        <c:forEach items="${detFieldEntry.value}" var="detBean">    
                            <input type="checkbox" name="fieldNames" value="${detBean.fieldName}" <c:if test="${preselectionMap[detBean.fieldName]}">checked="checked"</c:if>>${detBean.displayName}</input>          
                            </br>    
                        </c:forEach> 
                    </fieldset> 
                </c:forEach>
            </td>
        </tr>
    </table>
</div>
Run Code Online (Sandbox Code Playgroud)

html jsp jstl

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

如何并排显示图像和表格

我似乎不能并排放置一个徽标和一张桌子,但彼此之间的距离不是很近。我能够实现这一目标的唯一方法是使用表格,但图像和表格变得非常接近。我想要页面中间的表格,以及表格和左侧屏幕远端之间的徽标。

像这样

标志表

这是现在的样子

标识

- -桌子

<div id="header" style="height:15%;width:100%;">
    <img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
    <table border="1" width="44" style="margin-left:30%;float:top;"> 
    <tr>
            <td><h1><a href="home">Home</a></h1></td>
            <td><h1><a href="home">Home</a></h1></td>
            <td><h1><a href="home">Home</a></h1></td>
    </tr>
    </table>
</div>
Run Code Online (Sandbox Code Playgroud)

html

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

带字符串&int的Javascript警告语句

我是Javascript的新手并尝试调试一个简单的js函数..我需要通过alert语句获取x的值,但它无法正确显示..如何连接字符串和int,就像在这种情况下..

<html>
    <head>
    </head>
    <body>
        <script>
            function displaydate()  
            {
                document.getElementById("test").innerHTML='first line changed';
                document.getElementById("test1").innerHTML='second line changed';
                var x = 5;
                alert("Value of x" + String.valueOf(x));
            }
        </script>
        <p id="test">this is the 1st line</p>
        <p id="test1">this is the 2nd line</p>
        <button type="button" onclick="displaydate()">clickme!</button>

    <body>
</html>
Run Code Online (Sandbox Code Playgroud)

新代码:

<html>
    <head>
    </head>
    <body>
        <script>
            function displaydate()  
            {
                document.getElementById("test").innerHTML='first line changed';
                document.getElementById("test1").innerHTML='second line changed';
                var x = 5;
                alert("Value of x=" + x);
                var cars=new Array();
                cars[0]='car';
                cars[1]='Volvo';
                alert("Value of arrary 1 var=' + cars[0]);
                //alert("Value …
Run Code Online (Sandbox Code Playgroud)

javascript

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

格式字符串 - 每三位数之间的空格

如何简单地格式化带有十进制数字的字符串,以显示每三位数之间的空格?

我可以做这样的事情:

some_result = '12345678,46'
' '.join(re.findall('...?', test[:test.find(',')]))+test[test.find(','):]
Run Code Online (Sandbox Code Playgroud)

结果是:

'123 456 78,46'
Run Code Online (Sandbox Code Playgroud)

但我想要:

'12 345 678,46'
Run Code Online (Sandbox Code Playgroud)

python

5
推荐指数
2
解决办法
2532
查看次数

Ng-src不适用于本地存储的图像

我在angularjs尝试一些东西.这是我制作的控制器:

function ImagesController($scope){
    $scope.count = 0;
    $scope.imags = [
        {
            image1: 'images/levels/level1/sky.jpg',
            image2: 'images/levels/level1/rain.jpg',
            image3: 'images/levels/level1/sky.jpg'
        },
        {
            image1: 'images/levels/level2/x.jpg',
            image2: 'images/levels/level2/y.jpg',
            image3: 'images/levels/level2/z.jpg'
        }
    ];
  }
Run Code Online (Sandbox Code Playgroud)

这是链接到此控制器的HTML:

<div ng-controller="ImagesController">
      Random Writing
        <img ng-src="$scope.imags[0].image1">
 </div>
Run Code Online (Sandbox Code Playgroud)

我不知道为什么我试图显示的图像不起作用.我已经在标签中添加了ng-app,因此不会出现问题.

html javascript jquery angularjs

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

css @ -moz-keyframes动画不能在firefox 18.0.1上运行

firefox 18.0.1上的css @ -moz-keyframes动画无效,

我在之前的版本上检查了这个动画(忘了版本以前的号码),它正在工作,

这是动画

<html>
    <head>
        <style type="text/css">

            @-webkit-keyframes animation {
                0% { -webkit-transform:translate(100px,100px) scale(1); }
                50% { -webkit-transform:translate(00px,00px)  scale(2); }
                100% { -webkit-transform:translate(100px,100px)  scale(1); }
            }

            @-moz-keyframes animation_m {
                0% { -moz-transform:translate(100px,100px)  scale(1); }
                50% { -moz-transform: translate(00px,00px) scale(2); }
                100% { -moz-transform:translate(100px,100px)  scale(1); }
            }

            .cc1{
                -webkit-animation-name: "animation";
                -webkit-animation-duration: 2s;
                -webkit-animation-timing-function: linear;

                -moz-animation-name: "animation_m";
                -moz-animation-duration: 2s;
                -moz-animation-timing-function: linear;
            }

            #id1,#ci1{
                position:absolute;
                top:0px;
                left:0px;
            }

        </style>
        <script type="text/javascript">
            window.onload=function(){
                var e=document.getElementById("ci1");
                var ctx=e.getContext("2d");
                ctx.fillStyle="#f00";
                ctx.fillRect(0,0,90,90);
            }
        </script> …
Run Code Online (Sandbox Code Playgroud)

firefox html5 css3 css-animations webkit-transform

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