前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

<img  src="{$vo.photo}" height="50px" onclick="showdiv({$i});">

<div id="bg"></div>

<div id="show{$i}" class="show" style="display:none;">                                                                <img  src="{$vo.photo}" onclick="hidediv({$i});" alt="鼠标放上滑动鼠标滑动放大缩小此图片" title="鼠标放上滑动鼠标滑动放大缩小此图片" onmousewheel="return bbimg(this)" style="cursor: pointer;" border="0">
</div>

 <script type="text/javascript">
        function loserbtn(mid){
                var msg= $("#loserinfo  option:selected").text();
                var url="{:U(‘/admin/merchant/loserbtn‘)}";
                url=url+‘?mid=‘+mid+‘&msg=‘+msg;
                window.location=url;
        }

      //图片弹出层显示原图大小js
      function showdiv(i) {
            document.getElementById("bg").style.display ="block";
            document.getElementById("show"+i).style.display ="block";
      }
      function hidediv(i) {
          document.getElementById("bg").style.display =‘none‘;
          document.getElementById("show"+i).style.display =‘none‘;
      }

      //图片缩小放大js
      function bbimg(o){
          var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+‘%‘;
          return false;
      }
</script>
<style type="text/css">
         #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
          .show{display: none; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
</style>


 

 <div class="am-container lose">
    <div class="am-g">
       <?php if(!empty($result[‘image‘])){ ?>
           <div class="am-u-sm-12" style="text-align:center; border-bottom:#CCC 1px solid; width:90%; margin-left:5% ">
              	<div class="am-slider am-slider-default" data-am-flexslider>
		<ul class="am-slides">
                    <?php foreach($result[‘image‘] as $value){ ?>
                      <li style="">

                <img class=‘img_src‘ onclick=‘showdiv(this);‘ src="<?php echo $value[‘img‘]; ?>" />  //小图片显示区

             </li>
                    <?php }?>
                </ul>
                    </div>
              </div>
              <?php } ?>
           </div>

           <!--点击图片放大区域-->
          <div id="bg"></div>
          <div id="show" class="show" style="display:none;">
          <img class="get_src"  src="" onclick="hidediv(this);" onmousewheel="return bbimg(this)" style="cursor: pointer;" border="0">
          </div>

 <style type="text/css">
          #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
          .show{display: none; position: absolute; top: 10%; left: 0%; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
 </style>
 <script>
     //图片弹出层显示原图大小js
     function showdiv(obj) {
          var src=$(obj).attr("src");
          $(‘.get_src‘).attr("src",src);
          document.getElementById("bg").style.display ="block";
          document.getElementById("show").style.display ="block";
      }
      function hidediv() {
           document.getElementById("bg").style.display =‘none‘;
           document.getElementById("show").style.display =‘none‘;
      }
   //图片缩小放大js(移动端无效)
     function bbimg(o){
           var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+‘%‘;
           return false;
     }
    </script>

  

 

时间: 2024-10-16 03:45:38

前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)的相关文章

jquery实现点击按钮弹出层和点击空白处隐藏层

昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn').find('.assess').unbind().bind('click',function(event){                    //取消事件冒泡                      event.stopPropagation(); if($('.abtnBox').is

基于jQuery+CSS3点击动画弹出表单代码

分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog" id="uploadDial

设置点击文本框或图片弹出日历控件

<input id="startDate" value="" readonly="true" type="text" style="cursor: pointer" class="user_datepicker "><input class="canlderImg" data-tag="start" type="imag

jQuery插件之文章图片弹出放大效果

首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部,如下: ;(function($,window,document,undefined){ $.fn.popImg = function() { //your code goes here } })(jQuery,window,document); 那么接下来我们就在里面实现点击文章图片弹出该图片并放

改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)

下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下: 像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打开新窗口到 图片地址,非常不友好,很不和谐!添加wordpress添加图片弹出层效果之后如上所示效果.逼格瞬间提高! 打造这个效果的这款插件名称是FancyBox for WordPress

点击删除弹出提示是否删除代码

点击删除弹出提示是否删除代码:在一些应用中,会有删除功能,比如删除新闻等功能,在这些功能中,当点击删除的时候,一般会弹出提示窗口,提示是否要删除指定的内容,以防止出现误操作现象,下面就通过代码实例介绍一下,如何弹出这个提示窗口.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

jQuery实现的关闭页面弹出提示实例代码

jQuery实现的关闭页面弹出提示实例代码:当要关闭当前页面的时候,如果能够弹出一个提示那算是一个相当人性化的举措,因为可以防止误操作,当然也会因人而异,因为有些浏览者会感觉比较麻烦,不管怎么说,确实有这样的需求,下面就分享一下具有这个功能的代码.代码实例如下: $(window).bind('beforeunload',function(){ return '确定要离开当前页面吗'; }); 以上代码当在刷新或者关闭浏览器页面的时候会弹出提示.浏览器兼容性:1.谷歌浏览器效果良好.2.火狐浏览

Js浮动层插件,点击按钮弹出层,可关闭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>石家庄礼品公司</title>

点击文字弹出一个DIV层窗口代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: