动画在双击而不是单击时工作

Animation working on double click not on single click

本文关键字：单击 工作 双击 动画      更新时间：2023-09-26

我有想要滑动图像的网页问题是，当我双击按钮时它会滑动，而单击它不会滑动，我不知道为什么会发生这种情况。

我的 Java 脚本用于滑动

     <script>
            function class1(id, newclass){
                myid=document.getElementById(id);
                myid.className=newclass;
                }
            </script>
     <div id="page_three" class="panel">
     <div class="main_heading_three">DRAXXIN</div>
     <div class="menu">
           <ul>
                    <li class="stix"></li>
                    <li><a href="#page_one"><img src="image/overview.gif" /></a></li>
                    <li class="stix"></li>
                    <li><a href="#page_two"><img src="image/strategy.gif"/></a></li>
                    <li class="stix"></li>
                    <li><a href="#page_three" onclick="class1('img_one_slide','img_one');class1('img_two_slide','img_two');"><img src="image/draxxin_active.png"/></a></li>                         <li class="stix"></li>
                    <li><a href="#page_four"><img src="image/excede.gif"/></a></li>
                    <li class="stix"></li>
                    <li><a href="#page_five" onclick="class1('test','img_six_2');"><img src="image/results.gif"/></a></li>
                    <li class="stix"></li>
                    <li><a href="#"><img src="image/reference.gif"/></a>
                            <ul>
                            <li><a target='_blank' href="DRAXXIN-Product-Insert.pdf"><img src="image/dropdown1.png"/></a></li> 
                            <li><a target='_blank' href="DRAXXIN-Product-Insert.pdf"><img src="image/dropdown2.png"/></a></li>
                            </ul>
                    </li> 
                    <li class="stix"></li>
                </ul>
            </div>
            <div class="rightclass_two"><img src="image/whiteslide.png"/></div>  
            <div>
                <ul>
                    <li class="midmenu_3"><a href="#page_two"><img src="image/backward.png"/></a></li>     
                    <li class="midmenu_4"><a href="#page_four"><img src="image/forward.png"/></a></li>
                </ul>
            </div>                
            <div class="text_paragraph_3">
                <p>DRAXXIN ® (<i>tulathromycin</i>) keeps working for up to 14 days.<span class="superscript">1, 2</span>
                </p>
            </div>
            <div class="text_paragraph_4">
               A single dose of DRAXXIN ® (<i>tulathromycin</i>):
                <ul><li>Controls and treats the four major BRD pathogens, including <i>Mycoplasma bovis</i></li>
                    <li>Decreases the total number of treatments</li>
                    <li>Reduces associated labor and treatment costs</li>
                </ul>
            </div>
            <div class="text_paragraph_5">
                <p class="para">Pre-slaughter Withdrawal Time 18 days </p>
                <p class="para_2">IMPORTANT SAFETY INFORMATION</p>
                <p class="para_1">Do not use DRAXXIN in calves to be processed for veal. A pre-slaughter withdrawal time has not been determined for pre-ruminating calves. Effects on reproductive performance, pregnancy and lactation have not been determined. 
                </p>
           </div>
           <div class="right_text_page3">
           <p>With longer duration, DRAXXIN extends your PMIs or PTIs for a greater return on your investment.
           </p>
           </div>
           <div class="right_text_page4"> 
           <p>
           DRAXXIN has been shown to work with a 14-day PMI on high-risk cattle compared with other antimicrobials using a 3-day PMI<span class="superscript">7</span>
           </p>
           </div>
           <div class="right_text_page5"> 
           <small>
           <p>
           a,b Different superscripts identify statistically different values (P=0.0005) through 208 days.
           </p>
           <p>*Least square means.</p>
           </small>
           </div>
           <div class="right_text_page6"> 
           <p>
           A study<span class="superscript">8</span> of DRAXXIN shows, even at 7-, 10- or 14-day
           PTIs, extending the PTI resulted in no change to
           treatment responses, or slight improvement
           </p>
           </p></div>
           <div class="right_text_page7"> 
           <p>
           At 7, 10 or 14 days, there were no differences in
           mortality rate or ADG<span class="superscript">8</span>
           </p>
           <p>
           (<small><i>P=0.34</i></small>)
           </p>
           </p>
           </div>

这些是滑动的图像。

        <div id="img_one_slide" class="img_one_in"><img src="image/graph_one.png"/></div>      
    <div id="img_two_slide" class="img_two_in"><img src="image/graph_two.png"/></div>
 <!--Draxxin page light box-->

您需要从元素 a 中删除 href 或将 onclick 移动到另一个元素。

事实上，a元素上的两个"指令"（由onclick设计的指令和自然跳转到href）是冲突的。

编辑：

这是一种（使用 jquery）同时进行页面跳转和滑动的方法：

function doThing() {
    $('html, body').animate({
        scrollTop: $('a[name="page_three"]').offset().top + 'px'
    }, 'fast');
    class1('img_one_slide','img_one');
    class1('img_two_slide','img_two');
}

<li><img style="cursor:pointer;" src=... onclick="doThing();">

我添加了光标：指针;让用户知道图像是可点击的。

相关文章：