'tag.htm'; break; case 'flag': $pre .= $default_pre .= 'flag.htm'; break; case 'my': $pre .= $default_pre .= 'my.htm'; break; case 'my_password': $pre .= $default_pre .= 'my_password.htm'; break; case 'my_bind': $pre .= $default_pre .= 'my_bind.htm'; break; case 'my_avatar': $pre .= $default_pre .= 'my_avatar.htm'; break; case 'home_article': $pre .= $default_pre .= 'home_article.htm'; break; case 'home_comment': $pre .= $default_pre .= 'home_comment.htm'; break; case 'user': $pre .= $default_pre .= 'user.htm'; break; case 'user_login': $pre .= $default_pre .= 'user_login.htm'; break; case 'user_create': $pre .= $default_pre .= 'user_create.htm'; break; case 'user_resetpw': $pre .= $default_pre .= 'user_resetpw.htm'; break; case 'user_resetpw_complete': $pre .= $default_pre .= 'user_resetpw_complete.htm'; break; case 'user_comment': $pre .= $default_pre .= 'user_comment.htm'; break; case 'single_page': $pre .= $default_pre .= 'single_page.htm'; break; case 'search': $pre .= $default_pre .= 'search.htm'; break; case 'operate_sticky': $pre .= $default_pre .= 'operate_sticky.htm'; break; case 'operate_close': $pre .= $default_pre .= 'operate_close.htm'; break; case 'operate_delete': $pre .= $default_pre .= 'operate_delete.htm'; break; case 'operate_move': $pre .= $default_pre .= 'operate_move.htm'; break; case '404': $pre .= $default_pre .= '404.htm'; break; case 'read_404': $pre .= $default_pre .= 'read_404.htm'; break; case 'list_404': $pre .= $default_pre .= 'list_404.htm'; break; default: $pre .= $default_pre .= theme_mode_pre(); break; } if ($config['theme']) { $conffile = APP_PATH . 'view/template/' . $config['theme'] . '/conf.json'; $json = is_file($conffile) ? xn_json_decode(file_get_contents($conffile)) : array(); } !empty($json['installed']) and $path_file = APP_PATH . 'view/template/' . $config['theme'] . '/htm/' . ($id ? $id . '_' : '') . $pre; (empty($path_file) || !is_file($path_file)) and $path_file = APP_PATH . 'view/template/' . $config['theme'] . '/htm/' . $pre; if (!empty($config['theme_child']) && is_array($config['theme_child'])) { foreach ($config['theme_child'] as $theme) { if (empty($theme) || is_array($theme)) continue; $path_file = APP_PATH . 'view/template/' . $theme . '/htm/' . ($id ? $id . '_' : '') . $pre; !is_file($path_file) and $path_file = APP_PATH . 'view/template/' . $theme . '/htm/' . $pre; } } !is_file($path_file) and $path_file = APP_PATH . ($dir ? 'plugin/' . $dir . '/view/htm/' : 'view/htm/') . $default_pre; return $path_file; } function theme_mode_pre($type = 0) { global $config; $mode = $config['setting']['website_mode']; $pre = ''; if (1 == $mode) { $pre .= 2 == $type ? 'portal_category.htm' : 'portal.htm'; } elseif (2 == $mode) { $pre .= 2 == $type ? 'flat_category.htm' : 'flat.htm'; } else { $pre .= 2 == $type ? 'index_category.htm' : 'index.htm'; } return $pre; } ?>javascript - overflow not hidden but opacity changed - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - overflow not hidden but opacity changed - Stack Overflow

programmeradmin6浏览0评论

Is it possible to make the overflow not hidden but just change the opacity of the content that is overflowing?

So that the parts of the content that are going outside the parent div has opacity of .5 but the parts that remain in the parent are normal?

This would require JavaScript I am assuming if anyone could get me off in the right direction I would be very appreciative. In my fiddle you can drag the image around. FIDDLE

<script type='text/javascript' src='.5.js'></script>
<script type="text/javascript" src=".8.7/jquery-ui.js"></script>




<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('#img_rnd').resizable();
    $('#rnd').draggable({
        appendTo: 'body',
        start: function(event, ui) {
        isDraggingMedia = true;
    },
        stop: function(event, ui) {
        isDraggingMedia = false;
    }
});
});//]]>  

</script>


<link rel="stylesheet" type="text/css" href=".8.6/themes/cupertino/jquery-ui.css" />

<div id="frame">
    <div id="rnd" style="display:inline-block">
    <img id="img_rnd" style="border:1px solid red" src=".png" />
</div>

</div>

<style>

#frame {
      height: 500px;
      width: 500px;
      overflow: hidden;
      border: 1px solid black;
}
</style>

Is it possible to make the overflow not hidden but just change the opacity of the content that is overflowing?

So that the parts of the content that are going outside the parent div has opacity of .5 but the parts that remain in the parent are normal?

This would require JavaScript I am assuming if anyone could get me off in the right direction I would be very appreciative. In my fiddle you can drag the image around. FIDDLE

<script type='text/javascript' src='http://code.jquery./jquery-1.5.js'></script>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>




<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('#img_rnd').resizable();
    $('#rnd').draggable({
        appendTo: 'body',
        start: function(event, ui) {
        isDraggingMedia = true;
    },
        stop: function(event, ui) {
        isDraggingMedia = false;
    }
});
});//]]>  

</script>


<link rel="stylesheet" type="text/css" href="http://ajax.googleapis./ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />

<div id="frame">
    <div id="rnd" style="display:inline-block">
    <img id="img_rnd" style="border:1px solid red" src="http://blog.stackoverflow./audio/stackoverflow-300.png" />
</div>

</div>

<style>

#frame {
      height: 500px;
      width: 500px;
      overflow: hidden;
      border: 1px solid black;
}
</style>
Share Improve this question asked Aug 1, 2014 at 20:07 user3749553user3749553 2633 silver badges13 bronze badges 1
  • “In my fiddle you can drag the image around” – is that integral to the sought for solution? – C3roe Commented Aug 1, 2014 at 20:39
Add a ment  | 

3 Answers 3

Reset to default 4

Allow me to think outside the box here. Why, in stead of applying an opacity, don't you overlay your picture with something semi transparent... Something like this:

#frame:after {
    content: '';
    display: block;
    position: absolute;
    background: transparent;
    z-index: 1;
    pointer-events: none;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    box-shadow: 0 0 0 5000px rgba(255,255,255,.5);
}

It may be a bit hacky, but it works, and with just css. Have a look at the updated fiddle

Oooh. A cool, but tricky idea.

As far as I know, there's no easy way to do this without javascript.

My remendation is to include 2 images:

  • The overflow: hidden; image. This will work exactly as you have in your demo.
  • The opacity: 0.5 image. This is the image that will show up outside of the parent. In fact, in order to show up outside of the parent, it must be just that: a sibling of the parent.

With this you can have the inner area of the parent show the overflow: hidden;, and the outer area of the parent show the opacity: 0.5.

If you take this approach, I'd remend keeping all of the event handlers on the slightly opaque one, as that will always be on top, even when the image is entirely outside of the frame!

Here's the fiddle.

you can achieve a similar effect by having an absolute div, with same image, with less opacity and less z-index, and it would move around with your image as you move it, using start stop and drag functions.

see this fiddle for a example, there might be some lag sometimes, but consider this as a proof of concept.

http://jsfiddle/gaurav5430/vrUgs/1244/

accurate: http://jsfiddle/gaurav5430/vrUgs/1246/

发布评论

评论列表(0)

  1. 暂无评论