星联网络专注帝国CMS二次功能插件开发-精品网站模板站长代码素材

  • 最近更新
  • 模板:32
  • 记录:12528|
  • 插件:46|
  • 工具:4|
  • 代码:5|
  • 评论:0
当前位置:首页>站长素材> 鼠标移到到图片,图片向上滑动预览效果
鼠标移到到图片,图片向上滑动预览效果

鼠标移到到图片,图片向上滑动预览效果

  • 素材类型:图片代码幻灯片代码
  • 适用程序:站长素材
  • 编码格式:UTF-8
  • 适应终端:
  • 更新时间2022-09-29
  • 代码介绍
    <!DOCTYPE html>
    <html>
    <head>
    	<title>鼠标移到到图片,图片向上滑动预览效果</title>
    	<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    	<script type="text/javascript">
    	//图片滚动
    	$(document).ready(function(){
    	  function template($this,img_h,info_h){
    	    function img1_sin(){
    	      $this.find(".img1").find("img").stop(true,true).animate({
    	        top: -(img_h-info_h)
    	      },(img_h-info_h)*4,"linear")
    	    }
    	    img1_sin();
    	  }
    	  $(".slide").mouseover(function(){
     
    	    var info_h = $(this).find(".img1").find(".info").height();
    	    var img_h = $(this).find(".img1").find("img").height();
    	    template($(this),img_h,info_h);
    	  })
    	  $(".slide").mouseout(function(){
    	    $(this).find(".img1").find("img").stop(true,true).animate({
    	      top: 0
    	    }, 800 , "linear");
    	  })
    	})
    	</script>
    	<style type="text/css">
    	  .img1{
    	    width: 305px;
    	    height: 206px;
    	    padding: 12px 1px 1px;
    	    -webkit-transition: all .3s;
    	    transition: all .3s;
    	    position: relative;
    	  }
    	  .info{    
    	    overflow: hidden;
    	    height: 100%;
    	    position: relative;
    	  }
    	  .slide img{
    	    max-height: inherit;
    	    *max-height: none;
    	    position: absolute;
    	    top: 0;
    	  }
    	</style>
    </head>
    <body>
    	<div class="slide" style="width:330px;">
            <div class="img1" style="margin-left:15px;">
              <div class="info">
                <a href="" target="_blank"><img src="https://www.xinglianwangluo.com/img/324a66c5c66c3192e053a6e84768a866.png" width="305" alt=""></a>
              </div>
            </div>
        </div>
    </body>
    </html>
    
    更新说明

    1、本站所有下载的模板或者整站源码,点数在300元以下,不提供版本技术支持

    安装说明

    1、需要安装服务点击右侧联系客服即可,我们不提供免费安装服务,如需安装请支付相应的安装费用,请大家理解

    2、安装是请提供相应的FTP、宝塔等上传文件账号密码,本站不保存任何账号密码。为你的安全安装完毕之后请修改相关账号密码,如安装测试完成之后,造成的任何问题,本站概不负责

    3、安装费用100点/站(根据实际情况进行调整,300点以下不提供安装服务,300点以上首次安装免费)

    服务说明
    版权申明

    本站部分样式或模板代码移植或仿造自互联网(如有侵权,出示著作权证书联系我删除),所有代码不能用于非法站点(色情,暴力,政治类站点)。我们只提供源代码服务,不提供任何建站服务。不承担任何建站后的法律问题!我们所得费用均为制作模板劳动报酬。使用开源免费的帝国CMS作为核心为主,请保留开源系统的著作版权。如商用请购买帝国版,我们只做帝国CMS模板服务,不做任何建站、不制作采集任何网站内容、不出售任何非开源有版权源代码更不卖任何域名和空间服务器,我出卖的只是我的技术劳动力!如在本站发生交易任何资源或者下载任何资源,则代表默认同意以上文字内容。感谢大家的支持,做一个知法守法的好公民!

    Web开发教程好记性不如烂笔头这是老师的口头语,我们就记录在这里